Mutiple jqx grid table in single page with JqWidgets

Question

I want to create mutiple jqx grid boxes in single page. can some one please tell me how to do that ? Here is the preview page http://jsfiddle.net/NuUjc/

score 1 · Accepted Answer · edited Feb 17 '15 at 08:22

You'd do it the same way you create the first grid. Simply create a new div where the grid goes, create necessary data sources, and initialize the grid.

So, in your example, you'd have:

<body class='default'>
    <div id='jqxWidget1' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
     </div>
    <br/>Second grid<br/>
    <div id='jqxWidget2' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid2">
        </div>
     </div>
    <br/>Third grid<br/>
    <div id='jqxWidget3' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid3">
        </div>
     </div> </body>

then create appropriate data sources and data adapters for your grids: source2, dataAdapter2, etc.

then initialize your grids the same way:

    $("#jqxgrid2").jqxGrid(
    {
        width: 670,
        source: dataAdapter2,
    .....

Make sure 'jqxgrid2' is replaced with whatever the right id for your grid is (the one you defined in your html snippet)

Mutiple jqx grid table in single page with JqWidgets

1 Answers1