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

  • kkasunperera
    Member

    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 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 },
    }
    ]
    });
    }

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    kkasunperera
    Member

    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.