RadListView doesnt display paged datasource results

[Matthew]

I have a RadListView that is paged by a RadDataPager. The ListView is loaded correctly on the initial page load. After that the needdatasource method correctly retrieves the next set of results, but they are never displayed. From my investigation, it appears that it is related to the fact that the listview always has a page count of 1 while the datapager correctly calculates 2(13 items, with a page size of 10). The list view changes page index correctly, which retrieves the next page of results to set for the datasource. After setting the datasource the new items are never displayed. I am doing something very similar to the listview image gallery demo, so if it at least tried to add the new images and failed, I should get broken image links.  I think the listview is skipping binding the new results, since the list view thinks its out of its page range. Its worth noting we are using the 2013 Q2 controls, since this is new work for a customer with an existing site. We want to avoid updating versions to limit risk to the rest of the site.

<telerik:RadListView runat="server" ID="ImageGalleryDisplay" OnNeedDataSource="ImageGalleryDisplay_NeedDataSource" OnItemCreated="RadListView1_ItemCreated"
                AllowPaging="true" ItemPlaceholderID="ImagePlaceHolder" OnItemDataBound="RadListView_ItemDataBound">
                    <LayoutTemplate>
                       <asp:PlaceHolder ID="ImagePlaceHolder" runat="server">
                       </asp:PlaceHolder>
                       <telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="ImageGalleryDisplay"
                        PageSize="10">
                        <Fields>
                            <telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
                            <telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
                            <telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
                        </Fields>
                        </telerik:RadDataPager>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ImageURL")%>' />
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("ImageURL")%>' />
                    </AlternatingItemTemplate>
                </telerik:RadListView>      


protected void ImageGalleryDisplay_NeedDataSource (object source, RadListViewNeedDataSourceEventArgs e)
            {           
            _photos = new List<Photo> ();
            LoadData ();
            ImageGalleryDisplay.DataSource = _photos;
            }

        protected void LoadData ()
            {         
            //dataSearch is our own special search type that returns a datatable and estimated hit count, they return the correct values

            DataTable fileIds = dataSearch.Retrieve<DataTable> (ImageGalleryDisplay.CurrentPageIndex * ImageGalleryDisplay.PageSize + 1, ImageGalleryDisplay.PageSize);
            ImageGalleryDisplay.VirtualItemCount = dataSearch.EstimateHitCount > 0 ? dataSearch.EstimateHitCount : 0;

            foreach (DataRow row in fileIds.Rows)
                {
                int id = Convert.ToInt32 (row["fileId"].ToString ());

                Photo photo = new Photo (id, String.Format("Handlers/ImageHandler.ashx?id={0}&height=100&width=100",id));
                _photos.Add (photo);
                }
            }

        protected void RadListView_ItemDataBound (object sender, RadListViewItemEventArgs e)
            {
            if (e.Item is RadListViewDataItem)
                {
                var dataItem = ((RadListViewDataItem)e.Item).DataItem;

                }
            }

        protected void RadListView1_ItemCreated (object sender, RadListViewItemEventArgs e)
            {
            if (e.Item is RadListViewDataItem)
                {
                Image img = e.Item.FindControl ("image1") as Image;
                }
            }

        protected void Comand2 (object sender, RadListViewPageChangedEventArgs e)
            {
            ImageGalleryDisplay.CurrentPageIndex = e.NewPageIndex;
            string i = ImageGalleryDisplay.PageCount.ToString();
            }

[Matthew]

I was able to resolve the issue by adding AllowCustomPaging=true. What am i doing differently that is requiring custom paging to be turned on? All examples that I see, do not set that when using a raddatapager.

[Konstantin Dikov]

Hello Matthew,

Since you are setting multiple properties related to the paging, in order go get the paging to work as you are expecting, as you have found out yourself, you need to set the AllowCustomPaging to true.

In the following help article you can find detailed information on this matter:

• RadListView - Custom Paging

Best Regards,
Konstantin Dikov
Telerik

 

 

[khadeer]

Am binding radlistview at client side and for same listview am appending the data, for that am using "Logslistview.appendData(json);"  and it is appending properly, same way if i use "Logslistview.deleteItem(0);" to delete the  zeroth  index item its not working..   and below is the code what i was trying to achieve.  And same way i want it for server side.

====>   can any one please help how to achieve this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function RefreshClient_Click() {
                    var json = [{ DoorID: "001", DoorName: "Door_1" },
                    { DoorID: "002", DoorName: "Door_2" },
                    { DoorID: "003", DoorName: "Door_3" },
                    { DoorID: "004", DoorName: "Door_4" },
                    { DoorID: "005", DoorName: "Door_5" },
                    { DoorID: "006", DoorName: "Door_6" },
                    { DoorID: "007", DoorName: "Door_7" },
                    { DoorID: "008", DoorName: "Door_8" },
                    { DoorID: "009", DoorName: "Door_9" },
                    { DoorID: "010", DoorName: "Door_10" }];

                    var Logslistview = $find("<%= rlvDoors.ClientID%>");
                    Logslistview.appendData(json);
                    Logslistview.dataBind();

                    Logslistview.selectItem(0);
                    Logslistview.selectItem(2);
                    Logslistview.selectItem(4);
                    Logslistview.selectItem(6);
                    Logslistview.selectItem(8);

                }

                function RefreshServer_Click() {

                }

                function rbtnAddClient_Click() {
                    if (ID_Name() != "") {
                        var json = [{ DoorID: ID_Name().split('~')[0], DoorName: ID_Name().split('~')[1] }];
                        var Logslistview = $find("<%= rlvDoors.ClientID%>");
                        Logslistview.appendData(json);
                    }
                }

                function rbtnDeleteClient_Click() {
                    if (ID_Name() != "") {
                        var Logslistview = $find("<%= rlvDoors.ClientID%>");

                        Logslistview.deselectItem(0);
                        Logslistview.deselectItem(2);
                        Logslistview.deselectItem(4);
                        Logslistview.deselectItem(6);
                        Logslistview.deselectItem(8);

                        Logslistview.deleteItem(0);
                        
                        Logslistview.dataBind();
            }
        }

        function ID_Name() {
            var txtDoorID = $find("<%= rtxt_DoorID.ClientID%>");
            var txtDoorName = $find("<%= rtxt_DoorName.ClientID%>");
            if (txtDoorID._text.trim() != "" && txtDoorName._text.trim() != "") {
                return txtDoorID._text.trim() + "~" + txtDoorName._text.trim()
            }
            else {
                return "";
            }
        }

            </script>
        </telerik:RadCodeBlock>
        <div>
            <telerik:RadSplitter runat="server" Width="100%" Height="600px">
                <telerik:RadPane Width="50%" ID="rpListView" runat="server">
                    <telerik:RadListView ID="rlvDoors" runat="server" AllowMultiItemSelection="true"  DataKeyNames="DoorID">
                        <ClientSettings>
                        <DataBinding ItemPlaceHolderID="itemPlaceHolder">
                        <LayoutTemplate>
                            <ul id="itemPlaceHolder"></ul>
                        </LayoutTemplate>
                        <ItemTemplate> 
                            <ul style="background-color:ActiveBorder">#= DoorID # - #= DoorName #</ul>
                        </ItemTemplate>
                            <SelectedItemTemplate>
                            <ul style="background-color:aliceblue">#= DoorID # - #= DoorName #</ul>
                            </SelectedItemTemplate>
                        </DataBinding>
                        </ClientSettings>
                    </telerik:RadListView>
                </telerik:RadPane>

                <telerik:RadSplitBar CollapseMode="Both" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane Width="50%" ID="rpOperation" runat="server">
                    <div id="testDiv" runat="server" class="addColor"></div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Refresh Client" ID="RefreshClient" AutoPostBack="false" CssClass="addColor" OnClientClicked="RefreshClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Refresh Server" ID="RefreshServer" AutoPostBack="false" OnClientClicked="RefreshServer_Click"></telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="rlbl_DoorID">Door ID :</telerik:RadLabel>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="rtxt_DoorID"></telerik:RadTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="rlbl_DoorName">Door Name :</telerik:RadLabel>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="rtxt_DoorName"></telerik:RadTextBox>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Add Client" ID="rbtnAddClient" AutoPostBack="false" OnClientClicked="rbtnAddClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Delete Client" ID="rbtnDeleteClient" AutoPostBack="false" OnClientClicked="rbtnDeleteClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Edit Client" ID="rbtnEditClient"></telerik:RadButton>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Add Server" ID="rbtnAddServer" OnClick="rbtnAddServer_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Delete Server" ID="rbtnDeleteServer" OnClick="rbtnDeleteServer_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Edit Server" ID="rbtnEditServer" OnClick="rbtnEditServer_Click"></telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
    </form>
</body>
</html>

 

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmRlvPOC.aspx.cs" Inherits="frmRlvPOC" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                function RefreshClient_Click() {
                    var json = [{ DoorID: "001", DoorName: "Door_1" },
                    { DoorID: "002", DoorName: "Door_2" },
                    { DoorID: "003", DoorName: "Door_3" },
                    { DoorID: "004", DoorName: "Door_4" },
                    { DoorID: "005", DoorName: "Door_5" },
                    { DoorID: "006", DoorName: "Door_6" },
                    { DoorID: "007", DoorName: "Door_7" },
                    { DoorID: "008", DoorName: "Door_8" },
                    { DoorID: "009", DoorName: "Door_9" },
                    { DoorID: "010", DoorName: "Door_10" }];

                    var Logslistview = $find("<%= rlvDoors.ClientID%>");
                    Logslistview.appendData(json);
                    Logslistview.dataBind();

                    Logslistview.selectItem(0);
                    Logslistview.selectItem(2);
                    Logslistview.selectItem(4);
                    Logslistview.selectItem(6);
                    Logslistview.selectItem(8);

                }

                function RefreshServer_Click() {

                }

                function rbtnAddClient_Click() {
                    if (ID_Name() != "") {
                        var json = [{ DoorID: ID_Name().split('~')[0], DoorName: ID_Name().split('~')[1] }];
                        var Logslistview = $find("<%= rlvDoors.ClientID%>");
                        Logslistview.appendData(json);
                    }
                }

                function rbtnDeleteClient_Click() {
                    if (ID_Name() != "") {
                        var Logslistview = $find("<%= rlvDoors.ClientID%>");

                        Logslistview.deselectItem(0);
                        Logslistview.deselectItem(2);
                        Logslistview.deselectItem(4);
                        Logslistview.deselectItem(6);
                        Logslistview.deselectItem(8);

                        Logslistview.deleteItem(0);
                        
                        Logslistview.dataBind();
            }
        }

        function ID_Name() {
            var txtDoorID = $find("<%= rtxt_DoorID.ClientID%>");
            var txtDoorName = $find("<%= rtxt_DoorName.ClientID%>");
            if (txtDoorID._text.trim() != "" && txtDoorName._text.trim() != "") {
                return txtDoorID._text.trim() + "~" + txtDoorName._text.trim()
            }
            else {
                return "";
            }
        }

            </script>
        </telerik:RadCodeBlock>
        <div>
            <telerik:RadSplitter runat="server" Width="100%" Height="600px">
                <telerik:RadPane Width="50%" ID="rpListView" runat="server">
                    <telerik:RadListView ID="rlvDoors" runat="server" AllowMultiItemSelection="true"  DataKeyNames="DoorID">
                        <ClientSettings>
                        <DataBinding ItemPlaceHolderID="itemPlaceHolder">
                        <LayoutTemplate>
                            <ul id="itemPlaceHolder"></ul>
                        </LayoutTemplate>
                        <ItemTemplate> 
                            <ul style="background-color:ActiveBorder">#= DoorID # - #= DoorName #</ul>
                        </ItemTemplate>
                            <SelectedItemTemplate>
                            <ul style="background-color:aliceblue">#= DoorID # - #= DoorName #</ul>
                            </SelectedItemTemplate>
                        </DataBinding>
                        </ClientSettings>
                    </telerik:RadListView>
                </telerik:RadPane>

                <telerik:RadSplitBar CollapseMode="Both" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane Width="50%" ID="rpOperation" runat="server">
                    <div id="testDiv" runat="server" class="addColor"></div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Refresh Client" ID="RefreshClient" AutoPostBack="false" CssClass="addColor" OnClientClicked="RefreshClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Refresh Server" ID="RefreshServer" AutoPostBack="false" OnClientClicked="RefreshServer_Click"></telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="rlbl_DoorID">Door ID :</telerik:RadLabel>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="rtxt_DoorID"></telerik:RadTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadLabel runat="server" ID="rlbl_DoorName">Door Name :</telerik:RadLabel>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="rtxt_DoorName"></telerik:RadTextBox>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                    <div>
                        <center>
                            <table>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Add Client" ID="rbtnAddClient" AutoPostBack="false" OnClientClicked="rbtnAddClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Delete Client" ID="rbtnDeleteClient" AutoPostBack="false" OnClientClicked="rbtnDeleteClient_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Edit Client" ID="rbtnEditClient"></telerik:RadButton>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Add Server" ID="rbtnAddServer" OnClick="rbtnAddServer_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Delete Server" ID="rbtnDeleteServer" OnClick="rbtnDeleteServer_Click"></telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton runat="server" Text="Edit Server" ID="rbtnEditServer" OnClick="rbtnEditServer_Click"></telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </center>
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
    </form>
</body>
</html>

 

 

Regards

khadeer