Javascript - How to add objects to column array in kendo ui grid dynamically?

Question

I am trying to generate objects in the columns array as the heading implies, although I haven\'t found a working method.

alert( \"Value 1: \" + temporaryArr         


        

Answer 1

You can do it. Lets have the Titles stored in titleDefs and the field name in fieldDef. Then you should do:

// Title Definitions
var titleDefs = [
    "First Name", "Last Name", "Title"
];
// Field Definition
var fieldDefs = [
    "FirstName", "LastName", "Title"
];
// Lets compute column definition
var columnDefs = [];
for (var i = 0; i < titleDefs.length; i++) {
    columnDefs.push({ title : titleDefs[i], field: fieldDefs[i] });
}
// Now, create the grid using columnDefs as argument
var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : dataArray,
        pageSize: 10
    },
    columns   : columnDefs
}).data("kendoGrid");

NOTE: In this example I've defined a DataSource that is a JavaScript array in memory but you can get the data from a server changing the DataSource definition.

NOTE: In your code, you were adding extra white space to the title definition and that is not correct: column definitions are JavaScript code and not strings so you don't have to format it as you were going to display it.