Hi,

Regarding Paging, I'm starting with the ADC GridView and am having troubling understand what steps I need to take to build something from scratch.

Please note that I am using an XML file as the datasource, which is loaded into a dataTable for use with the GridView.

I've looked at the Sample site but I can't quite see how to do this.

I would typically use SQL Server and the Over keyword but this situation requires XML.

I am wanting to use Paging and Sorting but am not totally sure how to implement this with the XML file/dataTable situation??

Any help appreciated.

Thanks in advance.

Take a look at this article - it will show you how you can add paging to the dataTable. Then you could use the total rows from the dataTable to set the pager.

<AjaxData:Pager ID="MembersPager" runat="server" ShowInfo="True"
    PageIndex="1" PageSize="25"  PageChangedEvent="OnMembers_PageChange"
    ShowNumeric="true" CssClass="pager" ShowPreviousAndNext="True"/>

Declare a public variable called currentPage in BLOCKED SCRIPT

var currentPage = 1;

Then in your onLoadSuccess (or something similar) callback function you cna set the variables to the pager:

var totalRows = result.rows.length;
pager.set_pageIndex(currentPage);
pager.set_recordCount(totalRows);

This will create now the necessary links for the pager (1,2,3,4 etc..) based on the pageSize.

The next part will be to implement the PageChangedEvent, which is fired whenever you click any of the paging links - it would look something like this:

function OnMembers_PageChange(sender, e) 
{ 
    currentPage=e.get_newPageIndex()+1; // Set the global variable
    // Rebind the data now
    BindData();
}

function BindData()
{
    DataService.GetData(onLoadSuccess, currentPage);
}

Makes sense?

 And in terms of sorting, take a look at the sorting.aspx example.

Its set up is the same as regular gridview controls. And when load datasource, you set up the sort column

   function loadData()
        {
            //Need to convert the sortoder so our WS understand
            var sortColumn = _gridView.get_sortColumn();
            var sortOrder = (_gridView.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';

            DataService.GetData(0, 1000, sortColumn, sortOrder, onLoadSuccess);
        }

   function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            loadProducts();
        }

 Hi,

Thanks for the reply.

When you said:

"Take a look at this article - it will show you how you can add paging to the dataTable. Then you could use the total rows from the dataTable to set the pager. "

Does that mean using the article you referred to in conjunction with the Ajax Pager?  (I've not used a pager control before, being I've been using asp.net 2.0 - I think the standards asp.net pager is in 3.5??)

If so, I was a bit confused on a few things.

First, I assume the code to create the table with the new ID has to go in the data access asp.net code or in the asp.net web service?

Second, in the article you refer to it says this:

" Now to get paged data we'll simply use RowFilter of DataTable.DefaultView to filter the rows. At this point we know the total no of records from DataTable.Rows.Count, UserDefined pagesize, and total no of pages by deviding row count to page size. We'll use simple calculation to calculate which page we want and how many records.

int FromID = ((PageNum - 1) * PageSize) + 0;

int ToID = PageNum * PageSize; "

But here I was not sure what PageNum is or how to get it to the webservice?

Third, I don't understand how the script you posted fits in and how it all hangs together?

I tried looking in the ADC sample web project but this only confused matters more (I think because I'm not using SQL Server for what I'm doing).

Any help on this appreciated.

Many thanks,

Darren

I will try to create a short example for you today.

Here we go:

The webservice:

    <WebMethod()> _
    Public Function TestData(ByVal page As Integer, ByVal rowsPerPage As Integer) As DataTable
        Dim dt As New DataTable("t1")
        dt.Columns.Add("image")
        dt.Columns.Add("title")
        dt.Columns.Add("totalRows")
        dt.Columns.Add("ID").AutoIncrement = True


        For i As Integer = 0 To 100
            dt.Rows.Add(New Object() {"img" & i.ToString, "title" & i.ToString, 100})
        Next

        Dim firstRec As Integer = (page - 1) * rowsPerPage
        Dim lastRec As Integer = (page * rowsPerPage)

        Dim dv As DataView = dt.DefaultView
        dv.RowFilter = "ID >= " & firstRec & " AND ID <= " & lastRec

        Dim filteredResult As DataTable = dv.ToTable
        Return filteredResult

    End Function

The aspx page:

<asp:ScriptManager runat="server" ID="sm1">
    <Services>
        <asp:ServiceReference Path="~/WebServices/Test/DataService.asmx" />
    </Services>
</asp:ScriptManager>

Pager:
<AjaxData:Pager ID="pager" runat="server" ShowInfo="True"
    PageIndex="1" PageSize="10"  PageChangedEvent="OnPageChange"
    ShowNumeric="true" ShowPreviousAndNext="True"/>
   
<AjaxData:DataList ID="ImagesList" runat="server" Visible=True ItemDataBoundEvent="onItemDataBound" >
    <ItemTemplate>
        <p id="spanPhoto"></p>
        <p id="spanTitle"></p>
    </ItemTemplate>
</AjaxData:DataList>

<script type="text/javascript">

var adc = null;
var pager = null;
var currentPage = 1;
var recsPerPage = 10;

function pageLoad(sender, e)
{
    adc = $find('<%= ImagesList.ClientID %>');
    pager = $find('<%= pager.ClientID %>');
    BindData();
}

function BindData()
{
    DataService.TestData(currentPage, recsPerPage, onLoadSuccess);
}

function onLoadSuccess(result)
{
    var dt = result;
   
    adc.set_dataSource(dt.rows);
    adc.dataBind();
   
    var totalRows = parseInt(dt.rows[0]["totalRows"]);  // important - This needs to be an int!
    pager.set_pageIndex(currentPage-1);
    pager.set_recordCount(totalRows);
}

function OnPageChange(sender, e)
{
    currentPage=e.get_newPageIndex()+1; // Set the global variable
    // Rebind the data now
    BindData();
}

function onItemDataBound(sender, e)
{
    var item = e.get_item();
    if (item.get_isDataItemType())
    {
        var row = item.get_dataItem();
        var spanPhoto = item.findControl('spanPhoto');
        var spanTitle = item.findControl('spanTitle');

        setText(spanPhoto, row.image);
        setText(spanTitle, row.title);
    }
}

function setText(element, text)
{
    if (typeof element.innerText != 'undefined')
    {
        element.innerText = text;
    }
    else if (typeof element.textContent != 'undefined')
    {
        element.textContent = text;
    }
}
</script>

Let me know if this makes sense.

 Sonu, you are the most tireless teacher. Thanks

he :)

I use these controls daily and big kudos goes actually to Kazi for creating a great foundation of the controls.

 Do I need to set the DataKeyName property on the adc gridview?

Thanks.

 if the only functionality you need is paging and sorting, then not necessarily

The DataKeyName is only used if you want to keep a primary key for edit/update's - If you just reading the data simply into the GridView, then you won't need it.

Hi - Regarding this...

sonu:

Here we go:

The webservice:

    <WebMethod()> _
    Public Function TestData(ByVal page As Integer, ByVal rowsPerPage As Integer) As DataTable
        Dim dt As New DataTable("t1")
        dt.Columns.Add("image")
        dt.Columns.Add("title")
        dt.Columns.Add("totalRows")
        dt.Columns.Add("ID").AutoIncrement = True


        For i As Integer = 0 To 100
            dt.Rows.Add(New Object() {"img" & i.ToString, "title" & i.ToString, 100})
        Next

        Dim firstRec As Integer = (page - 1) * rowsPerPage
        Dim lastRec As Integer = (page * rowsPerPage)

        Dim dv As DataView = dt.DefaultView
        dv.RowFilter = "ID >= " & firstRec & " AND ID <= " & lastRec

        Dim filteredResult As DataTable = dv.ToTable
        Return filteredResult

    End Function

The aspx page:

<asp:ScriptManager runat="server" ID="sm1">
    <Services>
        <asp:ServiceReference Path="~/WebServices/Test/DataService.asmx" />
    </Services>
</asp:ScriptManager>

Pager:
<AjaxData:Pager ID="pager" runat="server" ShowInfo="True"
    PageIndex="1" PageSize="10"  PageChangedEvent="OnPageChange"
    ShowNumeric="true" ShowPreviousAndNext="True"/>
   
<AjaxData:DataList ID="ImagesList" runat="server" Visible=True ItemDataBoundEvent="onItemDataBound" >
    <ItemTemplate>
        <p id="spanPhoto"></p>
        <p id="spanTitle"></p>
    </ItemTemplate>
</AjaxData:DataList>

<script type="text/javascript">

var adc = null;
var pager = null;
var currentPage = 1;
var recsPerPage = 10;

function pageLoad(sender, e)
{
    adc = $find('<%= ImagesList.ClientID %>');
    pager = $find('<%= pager.ClientID %>');
    BindData();
}

function BindData()
{
    DataService.TestData(currentPage, recsPerPage, onLoadSuccess);
}

function onLoadSuccess(result)
{
    var dt = result;
   
    adc.set_dataSource(dt.rows);
    adc.dataBind();
   
    var totalRows = parseInt(dt.rows[0]["totalRows"]);  // important - This needs to be an int!
    pager.set_pageIndex(currentPage-1);
    pager.set_recordCount(totalRows);
}

function OnPageChange(sender, e)
{
    currentPage=e.get_newPageIndex()+1; // Set the global variable
    // Rebind the data now
    BindData();
}

function onItemDataBound(sender, e)
{
    var item = e.get_item();
    if (item.get_isDataItemType())
    {
        var row = item.get_dataItem();
        var spanPhoto = item.findControl('spanPhoto');
        var spanTitle = item.findControl('spanTitle');

        setText(spanPhoto, row.image);
        setText(spanTitle, row.title);
    }
}

function setText(element, text)
{
    if (typeof element.innerText != 'undefined')
    {
        element.innerText = text;
    }
    else if (typeof element.textContent != 'undefined')
    {
        element.textContent = text;
    }
}
</script>

Let me know if this makes sense.

I've implemented it but there's two things...

First, on the screen when tested, I see "1 of NaN2345678" on the pager bit

Second, when I try to move beyond page 4, I get this error: "Microsoft JScript runtime error: 'rows.0' is null or not an object".

Here is the markup on the page...

    <div>
   
    <AjaxData:Pager ID="pager" runat="server" ShowInfo="True"
    PageIndex="1" PageSize="10"  PageChangedEvent="OnPageChange"
    ShowNumeric="true" ShowPreviousAndNext="True"/>
   
    <AjaxData:GridView ID="OverviewGrid" runat="server"  Width="85%"
    CellPadding="3" RowDataBoundEvent="OnRowDataBound" >
    <Columns>
       
        <AjaxData:GridViewTemplateColumn HeaderText="Properties" ColumnID="1">
            <ItemTemplate>
               
                <div>
                    <div style="width:22%; float:left;">
                        <img src='' alt='' id="img1" class="ovgridimage"/>
                    </div>
                    <div style="width:78%">
                        <span id="spnHeader" class="ovgridheader"></span><br class="br5" />
                        <span id="spnPara1" class="ovgridpara1"></span> <br class="br5" />
                    </div>
                    <br class="br5" /><br class="br5" /><br class="br5" /><br class="br5" />
                   
                </div>
                <div style="float:none; width:100%;">
                    <br class="br5" />
                    <br class="brx1" />
                    <hr class="propertysepz" />
                </div>
               
            </ItemTemplate>
            <HeaderStyle CssClass="ovgridheaderstyle" />
            <ItemStyle CssClass="ovgridimagecol" />
        </AjaxData:GridViewTemplateColumn>
       
    </Columns>
   
    </AjaxData:GridView>
    </div>
     <script type="text/javascript">
        var gridView = null;
       
        var adc = null;  // data control reference (not used)
        var pager = null; // var use for reference to pager control
        var currentPage = 1;
        var recsPerPage = 10;
       
        function pageLoad(sender, e)
        {
            // get references to page objects (gridView and pager)
            gridView = $find('<%= OverviewGrid.ClientID %>');
            pager = $find('<%= pager.ClientID %>');
           
            // Bind the data
            BindData();       
        }
       
        function BindData()
        {
            // invoke the webservice call
            // pass in current page, records per page, and function
            DataService.GetAllPropertiesPaged(currentPage, recsPerPage, onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            var dt = result; //store result in variable
           
            gridView.set_dataSource(dt.rows);
            gridView.dataBind();

            // important - This needs to be an int! :
            var totalRows = parseInt(dt.rows[0]["totalRows"]); 
           
            pager.set_pageIndex(currentPage-1);
            pager.set_recordCount(totalRows);
        }
       
        function OnPageChange(sender, e)
        {
            currentPage=e.get_newPageIndex()+1; // Set the global variable
           
            // Rebind the data now
            BindData();
        }
       
        function OnRowDataBound(sender, e)
        {
            if (e.get_row().get_isDataRowType())
            {
                var row=e.get_row();
                var item = row.get_dataItem();
                var control = row.findControl("img1");
                control.src = item.image1thumb;
            
                var spnHeader = row.findControl('spnHeader');
                var spnPara1 = row.findControl('spnPara1');

                // set the text - You could also do this:
                // setText(spn, "Hello World!!!");
                // setText(spn, item.headerbullet1);
                setText(spnHeader, item.header);
                setText(spnPara1, item.para1);
            }
        }
       
        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }  
            else if (typeof element.innerText != 'undefined')
            {  
                element.innerText = text;
            }
        }
       
        </script>

And this is the web service method (c#):

[WebMethod()]
    public DataTable GetAllPropertiesPaged(int page, int rowsPerPage)
    {
        DataTable myTable = null;
        DataTable newTable = null;

        try
        {
            // get all data
            myTable = Properties.GetAllPropertiesForWebService();

            // returning paged data
            //
            newTable = new System.Data.DataTable("properties");
                       
            System.Data.DataColumn column = new DataColumn();
            column.DataType = System.Type.GetType("System.Int32");
            column.AutoIncrement = true;
            column.ColumnName = "iID";
            column.ReadOnly = true;
            column.Unique = true;
            column.AutoIncrementSeed = 1;
            column.AutoIncrementStep = 1;

            // Add the Column to the DataColumnCollection.
            newTable.Columns.Add(column);
           
            // next column
            column = new DataColumn();
            column.DataType = System.Type.GetType("System.String");
            column.ColumnName = "header";
            column.AutoIncrement = false;
            column.Caption = "header";
            column.ReadOnly = false;
            column.Unique = false;

            // Add the column to the table.
            newTable.Columns.Add(column);

            // next column
            column = new DataColumn();
            column.DataType = System.Type.GetType("System.String");
            column.ColumnName = "para1";
            column.AutoIncrement = false;
            column.Caption = "para1";
            column.ReadOnly = false;
            column.Unique = false;
           
            // Add the column to the table.
            newTable.Columns.Add(column);

            // next column
            column = new DataColumn();
            column.DataType = System.Type.GetType("System.String");
            column.ColumnName = "image1thumb";
            column.AutoIncrement = false;
            column.Caption = "image1thumb";
            column.ReadOnly = false;
            column.Unique = false;

            // Add the column to the table.
            newTable.Columns.Add(column);

            // add data to new table
            int tot = myTable.Rows.Count;

            for (int i = 0; i < tot; i++)
            {
                System.Data.DataRow row = newTable.NewRow();

                //row["iID"] = i;

                row["header"] = myTable.Rows.ItemArray[25];
                row["para1"] = myTable.Rows.ItemArray[19];
                row["image1thumb"] = myTable.Rows.ItemArray[47];

                newTable.Rows.Add(row);
            }

            // Should have new table with linear unique ID at this point
            // Now paged data...
            int FromID = ((page - 1) * rowsPerPage) + 0;
            int ToID = page * rowsPerPage + 0;

            DataView dv = newTable.DefaultView;
            dv.RowFilter = "iID >= " + FromID + " AND iID <= " + ToID;

            DataTable filteredResult = dv.ToTable();

            return filteredResult;
        }

        catch (Exception ex)
        {
            // throw ex;
            return newTable;
        }

       
    } 

Have I implemented this right or done something wrong!??

Any help appreciated.

Thanks,

Darren

I did not read your code carefully. However, the errors have to do with your total recordCount is not set right.  

Copy again Sonu's code

var totalRows = result.rows.length;
pager.set_pageIndex(currentPage);
pager.set_recordCount(totalRows)

xxxd:

Copy again Sonu's code

var totalRows = result.rows.length;
pager.set_pageIndex(currentPage);
pager.set_recordCount(totalRows)

That should do that. You will need to make the changes in onLoadSuccess.

Hi,

Sonu:

xxxd:

Copy again Sonu's code

var totalRows = result.rows.length;
pager.set_pageIndex(currentPage);
pager.set_recordCount(totalRows)

That should do that. You will need to make the changes in onLoadSuccess.

Do I need the "  dt.Columns.Add("totalRows")" ?  Do I need the totalRows column in my table??

Thanks - Darren