CODEWITHSUNDEEP
kendo-grid
Sanyog Tomar
Sanyog Tomar

Reputation: 33

Create Dynamic Column In Kendo Grid (Javascript)

I want to create a kendo grid with dynamic column all the columns will be create on client side.

as an example:

I have written the below code to create a grid : 

var grid = $("#grid");
        grid.children().remove();
        grid.kendoGrid({
            columns: [{ title: 'One', width: '100px' }, { title: 'Two', width: '100px' }, {title: 'Three', width:'100px'}],
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("")",
                        type: "GET",
                        dataType: "json",
                        traditional: true,
                        data: {
                            itemTypeId: $("#").val(),
                            where: ["", "", "", "", ""],
                            orderBy: ["", "", ""],
                        },
                    },
                },
                schema: {
                    data: "",
                    total: "",
                },
                serverPaging: true,
                pageSize: 4,
                error: function (e) {
                    alert(e.errors);
                }
            },
            pageable: true,
            resizable: true,
            reorderable: true,
        })
    }

When i define the column by : 

columns: [{ title: 'One', width: '100px' }, { title: 'Two', width: '100px' }, {title: 'Three', width:'100px'}],

the above code is working fine.

But I want to create all these column in a loop which is not working.

like as : I am holding the schema in a javascript variable and then assigning it to the kendo grid. 

Var columnSchema = "{ title: 'One', width: '100px' },{ title: 'Two', width: '100px' },{ title: 'Two', width: '100px' }";

columns : [columnSchema]

But it is not working.

Upvotes: 3

Views: 5725

Answers (1)

Timothy Walters
Timothy Walters

Reputation: 16874

One slight change to your code and it should work:

var columnSchema = [{ title: 'One', width: '100px' },{ title: 'Two', width: '100px' },{ title: 'Three', width: '100px' }];

grid.kendoGrid({
    // .. other properties ..
    columns : columnSchema
});

You need to define your columnSchema variable as an array instead of a string (as shown in my example), and it will work.

You could also build the array, e.g.

var columnSchema = [];
columnSchema.push({ title: 'One', width: '100px' });
columnSchema.push({ title: 'Two', width: '100px' });
columnSchema.push({ title: 'Three', width: '100px' });

You could use push(..) inside a loop that reads column information from somewhere else if needed.

As long as this is done before you use the variable to initialise the grid. Once the grid has been created you can't change the columns.

If you need to change columns after the grid has been created you'll need to call the destroy() method first, then kendoGrid(..) again with the new column spec.

Upvotes: 3

Related Questions