Create Dynamic Column In Kendo Grid (Javascript)

Question

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.

Timothy Walters · Accepted Answer · 2013-04-02 11:58:41Z

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.

Collectives™ on Stack Overflow

Create Dynamic Column In Kendo Grid (Javascript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related