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

[Owen]

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>

[Owen]

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?

[Konstantin Dikov]

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:

• IMPROVE RadGrid's virtualization functionality to return the values of fields which are set as a ClientDataKeyName but are not bound to a certain column.

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