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: " + temporaryArray[1] + " - " + finalArray[1].values ); 
alert( "Value 2: " + temporaryArray[2] + " - " + finalArray[2].values ); 
var myGrid =  $("#grid").kendoGrid( 
{
    columns: 
    [
        {
            title: temporaryArray[0] + " ",
            field: gridArray[0].values + " "
        }
    ],
    dataSource: 
    {
        data:finalArray,
        pageSize:10
    },
    scrollable:false,
    pageable:true 
});

I've tried the following to add the object:

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid[columns] = { temporaryArray[x]:finalArray[x] };
}

And

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid.columns[values]= finalArray[x].values;
}

with no success...

The following looks like an array of objects inside of the object which I want to achieve dynamically:

columns: 
[
    {
        title: temporaryArray[0] + " ",
        field: gridArray[0].values + " "
    },
    {
        title: temporaryArray[1] + " ",
        field: gridArray[1].values + " "
    },
    {
        title: temporaryArray[2] + " ",
        field: gridArray[2].values + " "
    }
],

For example:

for( var x = 0; x < finalArray.length; x++ )
{
    myGrid[columns] = { temporaryArray[x]:finalArray[x] };
}

I want to generate the objects using a for loop to generate an array of objects inside the column array.

What I want to know is, whether this is possible to do dynamically? or just possible at all without hard coding it?

Above part is done, Please find next question posted below.

Phillip-juan
– Phillip-juan

2013-04-11 12:52:01 +00:00
Commented Apr 11, 2013 at 12:52 — Phillip-juan
– Phillip-juan, Commented Apr 11, 2013 at 12:52

OnaBai · Accepted Answer · 2013-04-03 06:42:24Z

4

+100

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.

answered Apr 3, 2013 at 6:42

OnaBai

40.9k6 gold badges98 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Phillip-juan Over a year ago

Thanks for the quick reply and for the extra note. I will keep that in mind. Everything is working now.

Phillip-juan Over a year ago

I've found that with the above code that when you add more values than there titles, blank titles are generated for fields. How can I add more values to already made columns?

OnaBai Over a year ago

In my code I iterate on columnsDef.length so I cannot add more titles than row values. Can you post the actual code in JSFiddle for showing me what you have?

Phillip-juan Over a year ago

Seeing that I'm getting my data from an xml file, I only posted the javascript coding at jsfiddle.net/jLsjk/1. I have 2 arrays, One for the grid titles and one for the field values. The title consits of any number of fields between 3 and 7, which is calculated by JS, whereas the field value array consists of +-hundreds of values. The code that I am currently using, is merely looping the same row of data through the entire grid. thanks...

Phillip-juan Over a year ago

Everything worked accordingly until the last alert message. I have replaced the code on jsfiddle.net/jLsjk/1 with the code on jsfiddle.net/jLsjk/2 which has the 2 example arrays. Although I see, there is a slight problem to the code as it is not working.

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related