Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export (csv, html, pdf, xlsx )

RTL Layout

Layouts

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

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, ...]
where col is a plain object having properties in key: value pair format. 
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": "abcd@example.com",
    "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": "xyz@example.com",
    "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"
        }
    ]
}]}