:: Forum >>

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 -

    <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 -->
        .active-controls-grid {height: 400px; font: menu;}

        .active-grid-column {border-right: 1px solid threedshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
    <form name="tableForm">


        // 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

        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[2]='Company Name';
        columns[3]='Market Cap.';
        columns[4]='$ Sales';

        // provide column labels
        grid.setColumnProperty("texts", columns);

        // provide external model as a grid data source

        // write grid html to the page

        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;

        function storeValue(checkbox) {


    <td align="middle">

        <!-- bottom page control buttons -->
            <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>
            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);



shaun thompson
Monday, June 13, 2005

This topic is archived.

Back to support forum

Forum search