jQuery UI Widgets › Forums › Grid › initialize Grid columns through a for loop
This topic contains 2 replies, has 2 voices, and was last updated by kkasunperera 12 years, 1 month ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Below is my code, How do I initialize columns in a grid through a for loop?
my
var documentName=["HSBC inc.","City Bank","Countrywide Loans","Bank of America"];
can be change and can have diffident number of values to the
I want to initialize the columns according to the size ofvar documentName
If above is not possible through a for loop how do I initialize columns dynamically.
var source2 = { localdata: data2, datatype: "array" }; var documentName=["HSBC inc.","City Bank","Countrywide Loans","Bank of America"]; if (tabsdiv != null) { tabsdiv.jqxGrid({source: source2, theme: theme, width: 700, height: 200, columns: [ for (var i = 0; i < documentName.length; i++) { { text: documentName[i], datafield: 'doc'+i, width: 150 }, } ] }); }
Hello kkasunperera,
Here is an example that shows how to add columns with a for loop:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from JSON data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/beverages.txt"; var parentsLength = $("#jqxWidget").parents().length; if (parentsLength > 3) { url = 'demos/sampledata/beverages.txt'; } // prepare the data var source = { datatype: "json", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories', type: 'int' }, { name: 'totalfat' }, { name: 'protein' }, ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); var documentName = ["name", "type", "calories", "totalfat", "protein"]; var columnsData = []; for (var i = 0; i < documentName.length; i++) { columnsData.push({ text: documentName[i], datafield: documentName[i], width: 250 }); }; $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, columnsresize: true, columns: columnsData }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, your example was helpful
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.