XML - Paging - Set Row Count | datagrid, gridview, jquery grid examples, javascript ui

The problem I'm having is trying to figure out where I should set the row count for the grid using synchronous xml data retrieval and then draw the grid.

When it first displays no data is shown and the row #'s are negative. If I page the grid will be refreshed and shown correctly. I tried to have the document write out the grid within the response function and the grid wasn't writter correctly either.

Any help would be appreciated.

Here's the code I have so far -

<html>

<head>

    <title>ActiveWidgets Grid</title>



    <!-- ActiveWidgets stylesheet and scripts -->

    <link href="grid/grid.css" rel="stylesheet" type="text/css" ></link>

    <script src="grid/grid.js"></script>

    <script src="grid/browserSniffer.js" type="text/javascript"></script>





    <!-- Include patches here -->

    <script src="grid/paging1.js"></script>





    <!-- grid format -->

    <style>

        .active-controls-grid {height: 400px; font: menu;}



        .active-grid-column {border-right: 1px solid threedshadow;}

        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

    </style>

</head>

<body>

    <form name="tableForm">



        <script>





        </script>

        <script>

        //	create ActiveWidgets data model - XML-based table

        var table = new Active.XML.Table;



        var grid = new Active.Controls.Grid;



        //	provide data URL

        table.setURL("grid/company.xml?" + new Date().getTime());



        //	replace the built-in row model with the new one (defined in the patch)

        grid.setModel("row", new Active.Rows.Page);



        // Set Paging Properties



 		var defaultResponse = table.response;

        table.response = function(XML) {

 			defaultResponse.call(table, XML);



            var rowCount = table.getCount();

            alert("Row Count " + rowCount);

            grid.setProperty("row/count", rowCount);

        }



        //start data retrieval

        table.request();



        grid.setProperty("column/count", 5);



        //	set page size

        grid.setProperty("row/pageSize", 25);



        // Set Columns

        var columns = new Array();

        columns[0]='<input type=\"checkbox\" name=\"selAll\" onclick=\"selectColumn();\">';

        columns[1]='Ticker';

        columns[2]='Company Name';

        columns[3]='Market Cap.';

        columns[4]='$ Sales';

        columns[5]='Employees';



        //	provide column labels

        grid.setColumnProperty("texts", columns);



        //	provide external model as a grid data source

        grid.setDataModel(table);



        //	write grid html to the page

        document.write(grid);



        var holdSelAll = false;



        function selectColumn() {

            var form = document.forms['tableForm'];

            var selAll = form.elements['selAll'];

            var rowSel = form.elements['rowSel'];



            for (i = 0; i < rowSel.length; i++) {

                rowSel[i].checked = selAll.checked;

            }



            holdSelAll = selAll.checked;

        }



        function resetColumns() {

            var form = document.forms['tableForm'];

            var selAll = form.elements['selAll'];

            selAll.checked = holdSelAll;

            selectColumn();

        }



        function storeValue(checkbox) {

            alert(checkBox.checked);

        }



    </script>





    </form>

    <table>

    <tr>

    <td align="middle">



        <!-- bottom page control buttons -->

        <div>

            <button onclick='goToPage(-Infinity)'>&lt;&lt;</button>

            <button onclick='goToPage(-1)'>&lt;</button>

            <span id='pageLabel'></span>

            <button onclick='goToPage(1)'>&gt;</button>

            <button  onclick='goToPage(Infinity)'>&gt;&gt;</button>

        </div>

        <script>

            function goToPage(delta) {

                var count = grid.getProperty("row/pageCount");

                var number = grid.getProperty("row/pageNumber");

                number += delta;

                if (number < 0) {number = 0}

                if (number > count-1) {number = count-1}

                document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";

                grid.setProperty("row/pageNumber", number);

                grid.refresh();

                resetColumns();

            }



            goToPage(0);

        </script>

    </td>

    </tr>

    </table>





</body>

</html>

XML - Paging - Set Row Count

Forum search