ABC

[ov]

I checkout the documentation and cannot find anything.

How do can I add dynamic column to the grid?

I have a array of javascript objects with grid header and value like below.

var list = [{header: "Grid Header 1", value: "value1"}, {header: "Grid Header 2", value: "value2"}, {header: "Grid Header 3", value: "value3"}];

Any example?

[ov]

This is the documentation I read.

http://help.syncfusion.com/js/grid/columns

Is there a page where it is all available functions ejgrid can call?

[Sellappandi Ramu]

Hi OV,

Thanks for contacting Syncfusion support,

We can merge dynamic column in to defined grid column using dataBound event and columns() method. We need to generate the column based on the object in dataBound event and merge in to grid column.

Please refer to the code example and playground sample,

$(function () {

            var obj = [

                  . . . .

            ];

            var list = [{ header: "Grid Header 1", value: "value1" }, { header: "Grid Header 2", value: "value2" }, { header: "Grid Header 3", value: "value3" }];

            $("#Grid").ejGrid({

                dataSource: obj,

                allowPaging: true,

                columns: [

                        { field: "EmployeeID", isPrimaryKey: true, headerText: "EmployeeID", textAlign: ej.TextAlign.Right, width: 90 },

                        { field: "LastName", headerText: 'LastName', width: 90 },

                        { field: "FirstName", headerText: 'FirstName', textAlign: ej.TextAlign.Right, width: 75 },

                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" },

                        { field: "Title", headerText: 'Title', width: 90 },

                        { field: "City", headerText: 'City', width: 90 }

                ],

                dataBound: function (args) {

                    for (var fld = 0; fld < list.length; fld++) {

                        var column = { field: list[fld].value, headerText: list[fld].header, column: "", textAlign: "left", type: "string", visible: true, width: 75 };

                        this.model.columns.push(column); //add dynamic columns

                    }

                    this.columns(this.model.columns);

                }

            });
        });

Sample: https://jsplayground.syncfusion.com/a3lhujxv

Refer to the online help document for functions and event for grid,

Document: https://help.syncfusion.com/js/api/ejgrid

Regards,
Sellappandi R

[ov]

Is there a way to change the ordering of the dynamic columns?

I like the dynamic columns to be added in the middle but the last column is still a static.

[ov]

Is there a way to change the ordering of the dynamic columns?

I like the dynamic columns to be added in the middle but the last column is still a static.

Thanks for the example provided.

Also, is there a a way to change re-update the headers whenever the grid data changed?

[Sellappandi Ramu]

Hi OV,

Thanks for the update.

We can insert the dynamic columns in middle of the defined column using databound event and columns method. Please refer to the following online documentation for column method,

Doc Link: Ducumetation

We have generate the dynamic column and using jQuery splice() method to insert that dynamic column in-between of the custom columns.

Please refer to the following example code and playground sample,

    $(function () {

        var obj = [

                                                . . . .

        ];

        var list = [{ header: "Grid Header 1", value: "value1" }, { header: "Grid Header 2", value: "value2" }, { header: "Grid Header 3", value: "value3" }];

        $("#Grid").ejGrid({

            dataSource: obj,

            allowPaging: true,

            columns: [

                    { field: "EmployeeID", isPrimaryKey: true, headerText: "EmployeeID", textAlign: ej.TextAlign.Right, width: 90 },

                    { field: "LastName", headerText: 'LastName', width: 90 },

                    { field: "FirstName", headerText: 'FirstName', textAlign: ej.TextAlign.Right, width: 75 },

                    { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" },

                    { field: "Title", headerText: 'Title', width: 90 },

                    { field: "City", headerText: 'City', width: 90 }

            ],

            dataBound: function (args) {

                var count = 0;

                for (var fld = 0; fld < list.length; fld++) {

                    var column = { field: list[fld].value, headerText: list[fld].header, column: "", textAlign: "left", type: "string", visible: true, width: 75 };

                    this.model.columns.splice(3 + count, 0, column);// adding dynamic column after 3rd column

                    count++;

                }

                this.columns(this.model.columns);

            }

        });
    });

Sample Link: https://jsplayground.syncfusion.com/y4warpwp

Regards,
Sellappandi R

[ov]

I need to regenerate the headers as well whenever the grid datasource changes.
I can't seems to find a suitable function.

If possible, Can I regenerate the headers without manually adding/removing the columns array?

[Sellappandi Ramu]

Hi OV,

When we want to change the data source to grid we need to remove the filed name which is not in that dynamic data source. If we use auto generate columns to grid, no need to remove the columns, grid will generate the columns automatically from data source. We have created a sample based on your requirement and used dropdown list to bind the different data source to grid based on selected item.

In that dropdown list have two different data list. While changing the data in dropdown, grid dataSource will change and based on that data source columns are generated automatically.

Please refer to the code example and playground sample,

        var list1 = [{ header: "Header 1", value: "value1" }, { header: "Header 2", value: "value2" }, { header: "Header 3", value: "value3" }];

        var data1 = [

                  . . . .

        ];

        var data2 = [

                 . . . .

        ];

        $(function () {

            $('#selectDataSource').ejDropDownList({

                change: function (args) {

                    var gridObj = $("#Grid").ejGrid("instance");

                    if (args.value == "data1")

                        $("#Grid").ejGrid("model.dataSource", data1);// set the new datasource to grid

                    else

                        $("#Grid").ejGrid("model.dataSource", data2);// set the new datasource to grid

                    var oldColumns = ej.DataManager(gridObj.model.columns).executeLocal(new ej.Query().select("field"));// geting field name in array

                    var newColumns = [];

                    for (var field in gridObj.model.dataSource[0]) {

                        $("#Grid").ejGrid("columns", field, "add");// add dynamic columns form new data source

                        newColumns.push(field);

                    }

                    var removeColumn = [];

                    $.grep(oldColumns, function (el) {

                        if (jQuery.inArray(el, newColumns) == -1) removeColumn.push(el);

                    });

                    $("#Grid").ejGrid("columns", removeColumn, "remove");// removing columns if it is not in new data source

                }

            });            $("#Grid").ejGrid({

                dataSource: data1,

                allowPaging: true,

                columns: [

                        { field: "EmployeeID", isPrimaryKey: true, headerText: "EmployeeID", textAlign: ej.TextAlign.Right, width: 90 },

                        { field: "LastName", headerText: 'LastName', width: 90 },

                        { field: "FirstName", headerText: 'FirstName', textAlign: ej.TextAlign.Right, width: 75 },

                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" },

                        { field: "Title", headerText: 'Title', width: 90 },

                                                                                                { field: "City", headerText: 'City', width: 90 }

                ],

                dataBound: function (args) {

                    var count = 0;

                    for (var fld = 0; fld < list1.length; fld++) {

                        var column = { field: list1[fld].value, headerText: list1[fld].header, column: "", textAlign: "left", type: "string", visible: true, width: 75 };

                        this.model.columns.splice(3 + count, 0, column);

                        count++;

                    }

                    this.columns(this.model.columns);

                }

            });
        });

Sample link: https://jsplayground.syncfusion.com/4bvqzgh5

Regards,
Sellappandi R