jQWidgets Forums

jQuery UI Widgets Forums Grid 2 grids on one page

This topic contains 2 replies, has 2 voices, and was last updated by  swisspen 9 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 2 grids on one page #75603

    swisspen
    Participant

    Hi

    I have read around on this forum and on the web in general, but cannot figure out why my first grid displays, but not the second. When I comment out all the code for the first grid, the second one appears, but not otherwise.
    My script is as follows:

    $(document).ready(function ()
    {
       var data1 =
        {
            datatype: "json",
            datafields:
                    [
                        {name: 'act_id'},
                        {name: 'act_name', type: 'string'}
                    ],
            url: 'iwcn-json-responses.php?fct=getJSONAllLangActs',
            sortcolumn: 'act_id', 
            sortdirection: 'asc',
            async: false, 
        };//end data source 1
        //create the dataAdapter for Grid 1
        var adapter1 = new $.jqx.dataAdapter(data1);
        var columns1 = [
                { text: 'Id', datafield: 'act_id', width: 20 },
                { text: 'Language', datafield: 'act_name', width: 200 }          
        	  	   ];
        
       //INITIALIZE GRID 1
       $("#lang-grid").jqxGrid(
        {
            width: 250,
            source: adapter1,
            theme: 'classic',
            selectionmode: 'checkbox',
            columns: columns1
        });//end grid 1 declaration
    
        //build array of language-related activities 
        selectedRows.length = 0;
        
        $('#lang-grid').on('rowselect', function (event)
        {
            var thisRow = event.args.rowindex;
            var idCell = $('#lang-grid').jqxGrid('getcell', thisRow, 'act_id');
       
            //if they click the All Rows box, null is returned
            if (idCell === null)
            {
                //select all rows' values
                for (var i = 0; i <= thisRow.length; i++)
                {
                    idCell = $('#lang-grid').jqxGrid('getcell', i, 'act_id');
                    selectedRows.push(idCell.value);
                }
            }
            else
            {
                selectedRows.push(idCell.value);
            }
        });
        
        var data2 =
        {
            datatype: "json",
            datafields:
                    [
                        {name: 'act_id'},
                        {name: 'act_name', type: 'string'}
                    ],
            url: 'iwcn-json-responses.php?fct=getJSONAllGameActs',
            sortcolumn: 'act_id', 
            sortdirection: 'asc',
            async: false, 
        };//end data source 2
    
        //create the dataAdapter for Grid 2
        var adapter2 = new $.jqx.dataAdapter(data2);
        var columns2 = [
                { text: 'Id', datafield: 'act_id', width: 20 },
                { text: 'Game', datafield: 'act_name', width: 150 }          
        	  	   ];
        
        //INITIALIZE GRID 2
       $("#game-grid").jqxGrid(
        {
            width: 250,
            source: adapter2,
            theme: 'classic',
            selectionmode: 'checkbox',
            columns: columns2
        });//end grid 2 declaration
    
    //build array of game-related activities 
        selectedRows.length = 0;
        //var arraySize = 0;    
        $("#game-grid").on('rowselect', function (event)
        {
            var thisRow = event.args.rowindex;
    
            var idCell = $("#game-grid").jqxGrid('getcell', thisRow, 'act_id');
      
            //if they click the All Rows box, null is returned
            if (idCell === null)
            {
                //select all rows' values
                for (var i = 0; i <= thisRow.length; i++)
                {
                    idCell = $("#game-grid").jqxGrid('getcell', i, 'act_id');
                    //alert("id cell is null, pushing act id " + idCell.value);
                    selectedRows.push(idCell.value);
                }
            }
            else
            {
                selectedRows.push(idCell.value);
            }
        });
    
    });
    

    For information, the first grid is populated from a db table that has id numbering in the sequence 1,2,3 etc, while the second grid is populated from a table numbered 101,102,103 etc.

    My html is as follows:

    <table style="width: 50%; ">
            <tr>
                <td style="border: 1px solid #000; width: 300px;"><div id="lang-grid"></div></td>
            </tr>
        </table>
        <table style="width: 50%; ">
            <tr>
        <td style="border: 1px solid #000; width: 300px;"><div id="game-grid"></div></td>
            </tr>
        </table>
    

    The above is one of many, many attempts to make them both display … no deal. Only the first one is displayed. I’ve checked what the json returns and that aspect is fine. Only the display in html isn’t working!

    Any solutions out there?
    Thanks
    SP

    2 grids on one page #75607

    Peter Stoev
    Keymaster

    Hi SP,

    Check your JavaScript code for syntax errors and your HTML, too. There is no problem to display as many Grids as you wish and we have demos about that online.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    2 grids on one page #75611

    swisspen
    Participant

    OK – I did what you said, then I tried moving the function that handles a row-select for the first grid:
    $("#lang-grid").on('rowselect', function (event)
    to a position AFTER all the code that sets up the 2nd grid – and that worked! Now I can even get both grids to show up side by side, as long as their row-select functions come AFTER the grid setup.

    I can’t say I understand why this should be, but that’s okay!

    Thanks,
    SP

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

You must be logged in to reply to this topic.