jqxgrid assign columns value from a json string

Question

am working with jqxgrid to display data in a grid in an html page.

For loading data from a local json data, jqxgrid says the following code will work.

var source ={
               datatype: "json",
               datafields: [{ name: 'name' },{ name: 'type' },
                           { name: 'calories', type: 'int' },
                           { name: 'totalfat' },{ name: 'protein' },],
                    localdata: jsonData
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        theme: theme,
                        columnsresize: true,
                        columns: [
                              { text: 'Name', datafield: 'name', width: 250 },
                              { text: 'Beverage Type', datafield: 'type', width: 250 },
                              { text: 'Calories', datafield: 'calories', width: 180 },
                              { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                              { text: 'Protein', datafield: 'protein', minwidth: 120 }
                             ]
                    });
                });

And this will work. But my problem is suppose i need to dynamically generate this datafields & columns values. I generate the json string's for both of these and stored that in 2 variables like

jsonStr = '[{ name: 'name' },{ name: 'type' },{ name: 'calories', type: 'int' },
             { name: 'totalfat' },{ name: 'protein' },]'

and

 jsonColsStr='[{ text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
                 ]'

and jqxgrid loading code will look like this.

var source ={datatype: "json",
             datafields: jsonStr,
             localdata: jsonData
             };
                var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        theme: theme,
                        columnsresize: true,
                        columns: jsonColsStr
                    });
                });

But this is not working for me..??Can any one help me to solve this issue.?

score 0 · Answer 1 · answered Jun 01 '12 at 07:37

0

I think that the 'columns' setting expects an Array, but you are passing a String instead.

answered Jun 01 '12 at 07:37

turbob1234

51
1

score 0 · Answer 2 · answered Jun 25 '12 at 06:34

0

you can try ..

 jsonColsStr = "[" +
               "  { text: \"Name\", datafield: \"name\", width: 250 }," +
               "  { text: \"Beverage Type\", datafield: \"type\", width: 250 }"
               "]"
 var myColsObject = eval(jsonColsStr);  // change to json object

and ....

 $("#jqxgrid").jqxGrid(
 {
     width: 670,
     source: dataAdapter,
     theme: theme,
     columnsresize: true,
     columns: myColsObject  // use the object
  });

answered Jun 25 '12 at 06:34

Grant Liang

1

I got a solution for this problem.. I can create a json array for this and push each items to this array by iterating over the collection am are having. Anyway thanks for your response – TKV Jun 25 '12 at 06:42
Hi, I have the same problem, I want to load column definitions from DB. How exactly did you solve it? When I iterate over the json I have from DB and move items to another array, it doesn't help. – Robert Oct 08 '12 at 21:30

score 0 · Answer 3 · answered Aug 30 '16 at 06:57

You need to first convert to JSON object and then pass it

var jsonStr = '[{ "name" : "name" }, { "name": "type" }, { "name" : "calories", "type" : "int" }, { "name" : "totalfat" }, { "name" : "protein" }]';
var objectJson = JSON.parse(jsonStr);
console.log(objectJson);
var source = {
    datatype: "json",
    datafields: objectJson,
    localdata: jsonData
};

jqxgrid assign columns value from a json string

3 Answers3