We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ABC

Thread ID:

Created:

Updated:

Platform:

Replies:

121560 Dec 31,2015 05:58 AM UTC Jan 6,2016 09:55 AM UTC JavaScript 7
loading
Tags: ejGrid
ov
Asked On December 31, 2015 05:58 AM UTC


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
Replied On December 31, 2015 08:58 AM UTC

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 [Syncfusion]
Replied On January 4, 2016 10:44 AM UTC

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: http://jsplayground.syncfusion.com/a3lhujxv

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

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

Regards,
Sellappandi R

ov
Replied On January 5, 2016 02:40 AM UTC

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
Replied On January 5, 2016 07:47 AM UTC

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 [Syncfusion]
Replied On January 5, 2016 08:37 AM UTC

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: http://jsplayground.syncfusion.com/y4warpwp

Regards,
Sellappandi R

ov
Replied On January 5, 2016 08:44 AM UTC

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 [Syncfusion]
Replied On January 6, 2016 09:55 AM UTC

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: http://jsplayground.syncfusion.com/4bvqzgh5

Regards,
Sellappandi R

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;