An issue for Master-Details View on iPad and Android

[Arthur Wu]

Hi all,
I have an issue on the RadGrid on an iPad and Android when I use the control for Master-Details table view. My repro step is as below
I am greatly appreciated if anyone could help me on the issue, thanks! 

Repro Step:
1. Use the latest one 2012.2.607.40 or the older telerik verion v2010.1.415.40.
2. Use Telerik assemblies (e.g. Telerik.Web.UI.dll) from the Bin35
3. Default.aspx, Default.aspx.cs and web.config are posted in the below
4. In the web.config file, NorthwindConnectionString needs to be pointed to your local Northwind.mdf
5. Build the project and run it on an IIS
6. Brose the Default.aspx from iPad and Android default browser.
7. Click a row from Master view (e.g. Customer table) and check if its detailed contents are loaded in the detail view (e.g. Orders table).
 
Result: 
On the iPad and Android default browser, no update happans when I click the row at the first time. Detailed content will be loaded when clicking at the second time.

Note: The issue is not repro on the PC (IE browser).

Web.config:

<?xml version="1.0"?>
<configuration>
  <configSections>
    <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
        <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
        <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
          <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/>
          <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
          <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
          <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
        </sectionGroup>
      </sectionGroup>
    </sectionGroup>
  </configSections>
  <connectionStrings>
    <add name="NorthwindConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Company\Northwind.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>
  <appSettings>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
  </appSettings>
  <system.web>
    <compilation debug="true">
      <assemblies>
        <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
        <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
        <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
      </assemblies>
    </compilation>
    <pages>
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </controls>
    </pages>
    <httpHandlers>
      <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>
      <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false"/>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" validate="false" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </httpHandlers>
    <httpModules>
      <add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule"/>
      <add name="RadCompression" type="Telerik.Web.UI.RadCompression"/>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </httpModules>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="ScriptModule"/>
      <remove name="RadUploadModule"/>
      <add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" preCondition="integratedMode"/>
      <remove name="RadCompression"/>
      <add name="RadCompression" type="Telerik.Web.UI.RadCompression" preCondition="integratedMode"/>
      <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </modules>
    <handlers>
      <remove name="WebServiceHandlerFactory-Integrated"/>
      <remove name="ScriptHandlerFactory"/>
      <remove name="ScriptHandlerFactoryAppServices"/>
      <remove name="ScriptResource"/>
      <remove name="ChartImage_axd"/>
      <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_SpellCheckHandler_axd"/>
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_DialogHandler_aspx"/>
      <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_RadUploadProgressHandler_ashx"/>
      <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode"/>
      <remove name="Telerik_Web_UI_WebResource_axd"/>
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      <add name="ScriptResource" verb="GET,HEAD" path="ScriptResource.axd" preCondition="integratedMode" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </handlers>
    <directoryBrowse enabled="false"/>
  </system.webServer>
  <system.codedom>
      <compilers>
        <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" warningLevel="4">
          <providerOption name="CompilerVersion" value="v3.5"/>
          <providerOption name="WarnAsError" value="false"/>
      </compiler>
    </compilers>
  </system.codedom>
  <runtime>
    <assemblyBinding appliesTo="v2.0.50727" xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/>
        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/>
        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/>
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

Default.aspx.cs:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Page_PreRender(object sender, EventArgs e)
    {

    }
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument != null)
        {
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadAjaxManager1, RadGrid2, RadAjaxLoadingPanel1);
            RadGrid2.Rebind();
        }

    }

}

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>


</head>
 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function RowInteraction(sender, args) {
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                if (sender == $find("<%=RadGrid1.ClientID%>")) {
                    var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
                    var CustomerID = masterTable.getCellByColumnUniqueName(masterTable.get_selectedItems()[0], "CustomerID").innerHTML;
                    ajaxManager.ajaxRequestWithTarget('<%= RadAjaxManager1.UniqueID %>', CustomerID);
                }

            }

            function RowInteraction1(sender, args) {
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                if (sender == $find("<%=RadGrid2.ClientID%>")) {
                    var masterTable = $find("<%=RadGrid2.ClientID%>").get_masterTableView();
                    var OrderID = masterTable.getCellByColumnUniqueName(masterTable.get_selectedItems()[0], "OrderID").innerHTML;
                    ajaxManager.ajaxRequestWithTarget('<%= RadAjaxManager1.UniqueID  %>', OrderID);
                }

            }
        </script>
 </telerik:RadCodeBlock>
<body>
    <form id="form1" runat="server" method="post">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" >
    </telerik:RadScriptManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  RegisterWithScriptManager="true" Enabled="true" Skin="Windows7"
        Height="22px" Width="16px">
    </telerik:RadAjaxLoadingPanel>

<strong>Customers:</strong>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  OnAjaxRequest="RadAjaxManager1_AjaxRequest" EnableAJAX="true" EnableEmbeddedScripts="true" EnablePageHeadUpdate="true" EnableViewState="true" UpdatePanelsRenderMode="Block">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadGrid1">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="RadGrid2">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="RadGrid3">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid3" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowPaging="True"
  PageSize="5" DataSourceID="SqlDataSource1" GridLines="None"
        Width="95%" style="margin-top: 0px">
  <ClientSettings >
   <ClientEvents OnRowClick="RowInteraction"></ClientEvents>
    <Selecting AllowRowSelect="true" />
  </ClientSettings>
  <MasterTableView DataKeyNames="CustomerID" AutoGenerateColumns="False" >
      <Columns>
          <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID"
              ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName"
              SortExpression="CompanyName" UniqueName="CompanyName">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="ContactName" HeaderText="ContactName"
              SortExpression="ContactName" UniqueName="ContactName">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="ContactTitle" HeaderText="ContactTitle"
              SortExpression="ContactTitle" UniqueName="ContactTitle">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="Address" HeaderText="Address"
              SortExpression="Address" UniqueName="Address">
          </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="PostalCode" HeaderText="PostalCode"
              SortExpression="PostalCode" UniqueName="PostalCode">
          </telerik:GridBoundColumn>
      </Columns>
    </MasterTableView>
  <PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
<br />
<br />
<strong>Orders:</strong>
<telerik:RadGrid ID="RadGrid2" ShowStatusBar="True" runat="server" AllowSorting="True"
  AllowPaging="True" PageSize="5" DataSourceID="SqlDataSource2" GridLines="None"
   Width="95%">
  <MasterTableView Width="100%" AutoGenerateColumns="False" DataKeyNames="OrderID"
    DataSourceID="SqlDataSource2">
    <Columns>
      <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32" HeaderText="OrderID"
        ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="OrderDate" DataType="System.DateTime" HeaderText="OrderDate"
        SortExpression="OrderDate" UniqueName="OrderDate">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID"
        UniqueName="CustomerID">
      </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry"
            SortExpression="ShipCountry" UniqueName="ShipCountry">
        </telerik:GridBoundColumn>
    </Columns>
  </MasterTableView>
  <ClientSettings >
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowClick="RowInteraction1"></ClientEvents>
  </ClientSettings>
  <PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
<br />
<br />
<strong>Orders details:</strong>
<telerik:RadGrid ID="RadGrid3" ShowStatusBar="True" runat="server" AllowSorting="True"
  AllowPaging="True" PageSize="5" DataSourceID="SqlDataSource3" GridLines="None"
  Width="95%">
  <MasterTableView Width="100%" AutoGenerateColumns="False"
    DataSourceID="SqlDataSource3">
    <Columns>
      <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"
        UniqueName="OrderID" DataType="System.Int32">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice"
        UniqueName="UnitPrice" DataType="System.Decimal">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity"
        UniqueName="Quantity" DataType="System.Int16">
      </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Discount" DataType="System.Single"
            HeaderText="Discount" SortExpression="Discount" UniqueName="Discount">
        </telerik:GridBoundColumn>
    </Columns>
  </MasterTableView>
  <PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [PostalCode] FROM [Customers]"
  runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [OrderID], [OrderDate], [CustomerID], [ShipCountry] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
  runat="server">
  <SelectParameters>
    <asp:ControlParameter ControlID="RadGrid1" DefaultValue="ALFKI" Name="CustomerID"
      PropertyName="SelectedValue" Type="String" />
  </SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [OrderID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
  runat="server">
  <SelectParameters>
    <asp:ControlParameter ControlID="RadGrid2" Name="OrderID" DefaultValue="10643" PropertyName="SelectedValues['OrderID']"
      Type="Int32" />
  </SelectParameters>
</asp:SqlDataSource>

    </form>
</body>
</html>

[Arthur Wu]

Subimtted a ticket already, my Ticket ID: 558861

[Pavlina]

Hello,

My colleague Marin has already addressed the support you have opened about the same issue. To avoid duplicate posts, please continue your communication there.

Greetings,
Pavlina
the Telerik team

[Todd]

Was this issue resolved?  I'm having the same problem.

[Pavlina]

Hi Todd,

The answer provided in the support ticket is:

The RowClick client-side event of the grid fires before the item is actually selected so when you trigger and ajax request from there RadGrid1 will still have its previous selected value - that is why the selecting does not work the first time. You should use the approach shown in the demo which triggers postback on row click and updates the other grids consequently.

However, this not helps it will be best if you open a support ticket and send a sample project where the problem can be replicated. Thus we will be able to advice you further.

Greetings,
Pavlina
the Telerik team