ClientDataKey values lost after virtual paging -ASP.NET AJAX Q3 2013

3 posts, 0 answers
  1. Owen
    Owen avatar
    12 posts
    Member since:
    May 2013

    Posted 26 Dec 2013 Link to this post

    I have a radgrid that has virtualization enabled. The problem I run into is that after the grid pages forward, my ClientDataKey values are null. If I try to get the values server side, I get a row from the first page instead of the row that I selected. This makes my two options to fail miserably since there are no DataKeys, or send the user to a page based on incorrect data. I created a small sample application that demonstrates this problem. 

    Basically, if you double click a row on the page that loads. The Order and Item have values in the alert that pops up. Scroll down for a few pages and double click another row. The datakey values are undefined (null). This is not ok.

    If you want the zipped project file, let me know where to send it.

    Aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="TelerikIE11._default" MasterPageFile="~/Site1.Master" %>
     
    <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <script type="text/javascript">
            var RadGrid1;
     
            function GetGridObject(sender, eventArgs) {
                RadGrid1 = sender;
            }
     
            function ColumnChecked(sender, eventArgs) {
                var item = eventArgs.get_item();
                var checked = item.get_checked();
                var value = item.get_value();
                if (checked) {
                    RadGrid1.get_masterTableView().showColumn(value);
                    RadGrid1.MasterTableViewHeader.ColGroup.Cols[value].style.display = "";
                }
                else {
                    RadGrid1.get_masterTableView().hideColumn(value);
                    RadGrid1.MasterTableViewHeader.ColGroup.Cols[value].style.display = "none";
                }
            }
     
            function OnRowMouseOver(sender, args) {
                $('Order').text(args.getDataKeyValue("OrderID"));
                $('Item').text(args.getDataKeyValue("OrderItemID"));
            }
     
            function OnRowDblClick(sender, args) {
                var order = args.getDataKeyValue("OrderID");
                var item = args.getDataKeyValue("OrderItemID");
                var id = args.get_id();
                //var itemIndex = args.get_itemIndexHeirarchical();
                //var dataItem = args.getGridDataItem();
                alert('Order:'+ order + ' Item:' + item + ' ID:' + id);
            }
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager" runat="server" UpdatePanelsRenderMode="Inline">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="button">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <button runat="server" onclick="PopulateGrid" id="button">Populate</button>
        </div>
        <div id="radGridPaneNav" class="radPaneNav">
            <telerik:RadComboBox ID="ColumnListBox" runat="server" Width="300px" CheckBoxes="true" OnClientItemChecked="ColumnChecked">
                <Items>
                    <telerik:RadComboBoxItem Text="Reserved By" Value="3" Checked="true" />
                    <telerik:RadComboBoxItem Text="Client" Value="4" Checked="true" />
                    <telerik:RadComboBoxItem Text="Loan Number" Value="5" Checked="true" />
                    <telerik:RadComboBoxItem Text="Product" Value="6" Checked="true" />
                    <telerik:RadComboBoxItem Text="Vendor Name" Value="7" Checked="true" />
                    <telerik:RadComboBoxItem Text="Property Address" Value="8" Checked="true" />
                    <telerik:RadComboBoxItem Text="City" Value="9" Checked="true" />
                    <telerik:RadComboBoxItem Text="County" Value="10" Checked="true" />
                    <telerik:RadComboBoxItem Text="State" Value="11" Checked="true" />
                    <telerik:RadComboBoxItem Text="Borrower" Value="12" Checked="true" />
                    <telerik:RadComboBoxItem Text="Order Date" Value="13" Checked="true" />
                    <telerik:RadComboBoxItem Text="Due Date" Value="14" Checked="true" />
                    <telerik:RadComboBoxItem Text="Updated Date" Value="15" Checked="true" />
                    <telerik:RadComboBoxItem Text="Last Status" Value="16" Checked="true" />
                    <telerik:RadComboBoxItem Text="Hold Reason" Value="17" Checked="true" />
                    <telerik:RadComboBoxItem Text="Supervisory Review Reason" Value="18" Checked="true" />
                </Items>
            </telerik:RadComboBox>
     
            <span class="pull-right col-lg-1">Order:<label id="Order"></label>
                 Item:<label id="Item"></label></span>
        </div>
        <div id="radGridPane" class="radGridPane">
            <telerik:RadGrid ID="RadGrid" runat="server" AllowSorting="true" AllowFilteringByColumn="true" AllowPaging="true" AllowCustomPaging="true" PageSize="100"
                GridLines="None" Style="font-weight: normal; font-size: 10pt; font-family: Calibri, Verdana, Arial" OnNeedDataSource="RadGrid_NeedDataSource"
                AutoGenerateColumns="false" GroupingEnabled="False" Width="100%" Height="1000px">
                <MasterTableView ClientDataKeyNames="OrderID,OrderItemID" TableLayout="Fixed">
                    <Columns>
                        <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="Overdue" DataImageUrlFormatString="images/{0}.gif"
                            ImageAlign="Middle" AllowFiltering="false" HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-Width="30px" />
                        <telerik:GridImageColumn DataType="System.String" DataImageUrlFields="UnhandledComment" DataImageUrlFormatString="images/{0}.gif"
                            ImageAlign="Middle" AllowFiltering="false" HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle" ItemStyle-Width="30px" />
                        <telerik:GridBoundColumn DataField="OrderKey" HeaderText="ID" FilterControlWidth="60px">
                            <HeaderStyle Width="100px" HorizontalAlign="Center" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle HorizontalAlign="Center" Font-Size="Smaller" Width="100px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ReservedUserName" HeaderText="Reserved By" FilterControlWidth="110px">
                            <HeaderStyle Width="150px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Client" HeaderText="Client" UniqueName="Client" FilterControlWidth="200px">
                            <HeaderStyle Font-Bold="true" Width="240px" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LoanNumber" HeaderText="Loan Number" FilterControlWidth="85px">
                            <HeaderStyle Width="125px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Product" HeaderText="Product" UniqueName="Product" FilterControlWidth="100px">
                            <HeaderStyle Width="140px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="VendorName" HeaderText="Vendor" FilterControlWidth="100px">
                            <HeaderStyle Width="140px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address1" HeaderText="Property Address" FilterControlWidth="130px">
                            <HeaderStyle Width="170px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="City" HeaderText="City" FilterControlWidth="100px">
                            <HeaderStyle Width="140px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CountyName" HeaderText="County" FilterControlWidth="100px">
                            <HeaderStyle Width="140px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="State" HeaderText="State" FilterControlWidth="25px">
                            <HeaderStyle Width="65px" HorizontalAlign="Center" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle HorizontalAlign="Center" Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Borrower" HeaderText="Borrower" FilterControlWidth="135px">
                            <HeaderStyle Width="175px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="OrderDate" HeaderText="Ordered" DataFormatString="{0:MM-dd-yyyy}" FilterControlWidth="55px">
                            <HeaderStyle Width="95px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="RequiredByDate" HeaderText="Due" UniqueName="RequiredByDate" FilterControlWidth="55px" DataFormatString="{0:MM-dd-yyyy}">
                            <HeaderStyle Width="95px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastUpdatedDate" HeaderText="Updated" UniqueName="LastUpdatedDate" DataFormatString="{0:MM-dd-yyyy 'at' h:mm tt}">
                            <HeaderStyle Width="130px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastStatus" HeaderText="Last Status" UniqueName="Status" FilterControlWidth="135px">
                            <HeaderStyle Width="175px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="OnHoldReason" HeaderText="Hold Reason" FilterControlWidth="125px">
                            <HeaderStyle Width="165px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SupervisoryReviewReason" HeaderText="Review Reason" FilterControlWidth="125px">
                            <HeaderStyle Width="165px" Font-Bold="true" Font-Size="Smaller" />
                            <ItemStyle Font-Size="Smaller" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="false" EnableRowHoverStyle="true" AllowColumnHide="true">
                    <Virtualization EnableVirtualization="true" InitiallyCachedItemsCount="1000" ItemsPerView="100" />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" EnableVirtualScrollPaging="true" />
                    <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
                    <ClientEvents OnRowMouseOver="OnRowMouseOver" OnRowDblClick="OnRowDblClick" />
                </ClientSettings>
                <PagerStyle Mode="NextPrevAndNumeric" Position="Bottom" PageSizeControlType="None" AlwaysVisible="false" Visible="false" />
            </telerik:RadGrid>
        </div>
    </asp:Content>

    CS:
    using System;
    using System.Data;
     
    namespace TelerikIE11
    {
        public partial class _default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {}
     
            protected void PopulateGrid(object sender, EventArgs e)
            {
                RadGrid_NeedDataSource(null, null);
            }
     
            protected void RadGrid_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
            {
                DataTable table = new DataTable();
                DataSet ds = new DataSet();
                DataRow row;
                 
                ds.Tables.Add(table);
                ds.Tables[0].Columns.Add("Overdue");
                ds.Tables[0].Columns.Add("UnhandledComment");
                ds.Tables[0].Columns.Add("OrderID");
                ds.Tables[0].Columns.Add("OrderItemID");
                ds.Tables[0].Columns.Add("ReservedUserName");
                ds.Tables[0].Columns.Add("Client");
                ds.Tables[0].Columns.Add("LoanNumber");
                ds.Tables[0].Columns.Add("Product");
                ds.Tables[0].Columns.Add("VendorName");
                ds.Tables[0].Columns.Add("Address1");
                ds.Tables[0].Columns.Add("City");
                ds.Tables[0].Columns.Add("CountyName");
                ds.Tables[0].Columns.Add("State");
                ds.Tables[0].Columns.Add("Borrower");
                ds.Tables[0].Columns.Add("OrderDate", Type.GetType("System.DateTime"));
                ds.Tables[0].Columns.Add("RequiredByDate", Type.GetType("System.DateTime"));
                ds.Tables[0].Columns.Add("LastUpdatedDate", Type.GetType("System.DateTime"));
                ds.Tables[0].Columns.Add("LastStatus");
                ds.Tables[0].Columns.Add("OnHoldReason");
                ds.Tables[0].Columns.Add("SupervisoryReviewReason");
     
                for (int i = 0; i < 10000; i++)
                {
                    row = ds.Tables[0].NewRow();
                    row["Overdue"] = i > 12 ? "Y" : "N";
                    row["UnhandledComment"] = i < 5 ? "Y" : "N";
                    row["OrderID"] = "1123" + i;
                    row["OrderItemID"] = "1";
                    row["ReservedUserName"] = "User " + i;
                    row["Client"] = "Client " + i;
                    row["LoanNumber"] = "Loan " + i;
                    row["Product"] = "Product " + i;
                    row["VendorName"] = "Vendor " + i;
                    row["Address1"] = i + " Fake Street";
                    row["City"] = "Random City";
                    row["CountyName"] = "Random County";
                    row["State"] = "CA";
                    row["Borrower"] = i + "Borrower" + i;
                    row["OrderDate"] = DateTime.Now.AddHours(-i);
                    row["RequiredByDate"] = DateTime.Now.AddHours(i + i);
                    row["LastUpdatedDate"] = DateTime.Now.AddMinutes(-i);
                    row["LastStatus"] = "Status " + (i * 2);
                    row["OnHoldReason"] = "Testing";
                    row["SupervisoryReviewReason"] = "Broken";
                    ds.Tables[0].Rows.Add(row);
                }
     
                ds.Tables[0].Columns.Add("OrderKey");
                foreach (DataRow dRow in ds.Tables[0].Rows)
                {
                    dRow["OrderKey"] = string.Format("{0}.{1}", dRow["OrderID"], dRow["OrderItemID"]);
                    dRow["Overdue"] = dRow["Overdue"].ToString().Equals("Y") ? "flag" : "blank";
                    dRow["UnhandledComment"] = dRow["UnhandledComment"].ToString().Equals("Y") ? "comment" : "blank";
                }
     
                RadGrid.VirtualItemCount = ds.Tables[0].Rows.Count;
                RadGrid.DataSource = ds.Tables[0];
            }
        }
    }

    Master page:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="TelerikIE11.Site1" %>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <div><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" /></div>
        </form>
    </body>
    <script src="js/jquery-1.10.2.min.js"></script>
    </html>


  2. Owen
    Owen avatar
    12 posts
    Member since:
    May 2013

    Posted 26 Dec 2013 Link to this post

    This is using ASP.Net AJAX version 2013.3.1114.40

    Also, am I correct in assuming that this is due in part to the client side not rebinding on a virtual paging event?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 02 Jan 2014 Link to this post

    Hi Owen,

    We are aware of this behavior and we have already logged it into our system. You could follow the progress at our Ideas & Feedback Portal at the link bellow:

    In the meantime, in order to overcome that limitation you could just add GridBoundColumn for the "OrderID" data field with Display property set to false:
    <telerik:GridBoundColumn Display="false" DataField="OrderID"></telerik:GridBoundColumn>

    Hope that helps.


    Regards,
    Konstantin Dikov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top