How to display dynamic columns from remote data in javascript grid using pqgrid API?

This example shows how to create colModel dynamically from remote data. Data in this example is in nested format which adds one more layer of complexity.

Normally the columns ( number and their properties ) in a javascript grid are preknown:

[col1, col2, col3, ...]

col = {key1: value1, key2: value2, ...}

But sometimes developers have to construct colModel from remote data whereby number of columns and their properties are known only in run time.

{"data": [{
    "id": "1",
    "name": "abcd",
    "email": "[email protected]",
    "phone":"1234567890",
    "custom_fields": [
        {
            "type":"text",
            "name":"father_name",
            "label":"Father Name",
            "userData":"XYZ"
        },
        {
            "type":"text",
            "name":"mother_name",
            "label":"Mother Name",
            "userData":"HIJK"
        },
        {
            "type":"text",
            "name":"graduation",
            "label":"Graduation",
            "userData":"BE"
        },
        {
            "type":"text",
            "name":"college_name",
            "label":"College Name",
            "userData":"Bangalore University"
        }
    ]
},
{
    "id": "2",
    "name": "xyz",
    "email": "[email protected]",
    "phone":"1234567890",
    "custom_fields": [
        {
            "type":"text",
            "name":"father_name",
            "label":"Father Name",
            "userData":"ABCD"
        },
        {
            "type":"text",
            "name":"mother_name",
            "label":"Mother Name",
            "userData":"PQRS"
        },
        {
            "type":"text",
            "name":"graduation",
            "label":"Graduation",
            "userData":"MSC"
        },
        {
            "type":"text",
            "name":"college_name",
            "label":"College Name",
            "userData":"Mysore University"
        }
    ]
}]}