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 11 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • kkasunperera

    Below is my code, How do I initialize columns in a grid through a for loop?


    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 of

    var 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">
    <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 });
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: columnsData
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">

    Best Regards,

    jQWidgets team


    Thanks Dimitar, your example was helpful

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.