3.2.0

XML - Paging - Set Row Count

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>

shaun thompson
June 13,

This topic is archived.

See also:


Back to support forum