Detail Table Binding Issue

[umesh]

I m using Client Side javascript method to Bind  a RadGrid Control. I m unable to Bind Detail Table inside this RadGrid using Client Side or Server Side.
I didnt Get any Code for binding DetailTable at client side whose Master table is already binded with client methods.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script type="text/javascript">
            //<![CDATA[
                        var uid = $("#ddlSender").val();
                        var sid = $("#ddlSession").val();
 
                        function pageLoad(sender, eventArgs) {
                            var tableView = $find("<%= DemomailViewings.ClientID %>").get_masterTableView();
                            $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= DemomailViewings.ClientID %>");
                            PageMethods.GetData(0, tableView.get_pageSize(),
                        tableView.get_sortExpressions().toString(), uid, sid,
                        updateGrid);
                            PageMethods.GetCount(uid, sid, updateVirtualItemCount);
                        }

                        function DemomailViewings_Command(sender, args) {
                            args.set_cancel(true);
                            var pageSize = sender.get_masterTableView().get_pageSize();
                            var sortExpressions = sender.get_masterTableView().get_sortExpressions();
                            var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
                            if (args.get_commandName() == "Filter")
                                currentPageIndex = 0;

                            var sortExpressionsAsSQL = sortExpressions.toString();

                            $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= DemomailViewings.ClientID %>");

                            PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, uid, sid, updateGrid);

                            if (args.get_commandName() == "Filter") {
                                PageMethods.GetCount(uid, sid, updateVirtualItemCount);
                            }
                        }
                        function updateGrid(result) {
                            var tableView = $find("<%= DemomailViewings.ClientID %>").get_masterTableView();
                            tableView.set_dataSource(result);
                            tableView.dataBind();
                            $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= DemomailViewings.ClientID %>");
                        }
                        function updateVirtualItemCount(result) {
                            var tableView = $find("<%= DemomailViewings.ClientID %>").get_masterTableView();
                            tableView.set_virtualItemCount(result);
                        }
                        function DemomailViewings_RowDataBound(sender, args) {
                            // conditional formatting
                            var row = args.get_item();
                            var viewing = args.get_dataItem();
                            var link = $telerik.findElement(row.get_element(), 'contactLink');
                            var grpImg = $telerik.findElement(row.get_element(), 'grpImage');
                            if (viewing.InGroup) {
                                $(grpImg).attr("src", "Img/true.gif");
                                $(link).text("Group Viewing");
                                $(link).attr("href", "javascript:void(0)");
                                $(link).attr("onclick", "javascript:window.open('groupviewing.aspx<%=this.Request.Url.Query%>&contactid=" + viewing.ContactID + "', 'contacts', 'left=500,top=125,width=500,height=427,resizable=0,scrollbars=1');");
                            }
                            else {
                                $(grpImg).attr("src", "Img/false.gif");
                                $(link).text(viewing.email);
                                $(link).attr("onclick", "GetContactID('" + viewing.email + "')");
                            }
                        }
            //]]>
                    </script>
                </telerik:RadCodeBlock>
                <telerik:RadGrid ID="DemomailViewings" PageSize="50" Skin="Web20" EnableViewState="false"
                    runat="server" AllowPaging="true" AllowSorting="True" GridLines="None">
                    <ItemStyle Wrap="false"></ItemStyle>
                    <MasterTableView DataKeyNames="ContactID" ClientDataKeyNames="ContactID" TableLayout="Fixed"
                        HierarchyLoadMode="Client">
                        <DetailTables>
                            <telerik:GridTableView AllowFilteringByColumn="false" AllowSorting="false" Name="Orders">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="ContactID" MasterKeyField="ContactID" />
                                </ParentTableRelation>
                                <%--This detail table will bind to a single related entity -
                                    so paging, sorting and filtering is not requied--%>
                                <PagerStyle Visible="false" />
                                <Columns>
                                    <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" />
                                    <telerik:GridBoundColumn DataField="AccountId" HeaderText="Company Name" />
                                    <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                                    <telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" />
                                </Columns>
                            </telerik:GridTableView>
                        </DetailTables>
                        <Columns>
                            <telerik:GridTemplateColumn SortExpression="isvirtualcontact" HeaderText="Group Viewing">
                                <ItemTemplate>
                                    <asp:Image ID="grpImage" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" SortExpression="first_name" DataField="FirstName"
                                HeaderText="FirstName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" SortExpression="Last_Name" DataField="LastName"
                                HeaderText="LastName">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn SortExpression="email1" UniqueName="Email" HeaderText="Email">
                                <ItemTemplate>
                                    <a id="contactLink" style="cursor: pointer" runat="server"></a>&nbsp;
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" SortExpression="businesstitle" AllowSorting="true"
                                DataField="Title" HeaderText="Title">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Phone" SortExpression="Phone1" AllowSorting="true"
                                HeaderText="Phone">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" SortExpression="company_name" AllowSorting="true"
                                DataField="CompanyName" HeaderText="CompanyName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" AllowSorting="true" DataField="SessionTitle"
                                SortExpression="title" HeaderText="Video Viewed">
                            </telerik:GridBoundColumn>
                            <telerik:GridDateTimeColumn ShowSortIcon="true" AllowSorting="true" SortExpression="delaysendtime"
                                DataFormatString="{0:MM/dd/yyyy}" DataField="SentDate" HeaderText="SentDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridDateTimeColumn ShowSortIcon="true" AllowSorting="true" SortExpression="access_date"
                                DataFormatString="{0:MM/dd/yyyy}" DataField="ViewedDate" HeaderText="ViewedDate">
                            </telerik:GridDateTimeColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" AllowSorting="true" DataField="DurationText"
                                SortExpression="durationres" HeaderText="DurationText">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ShowSortIcon="true" AllowSorting="true" SortExpression="IPLocation"
                                DataField="location" HeaderText="location">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                    <SortingSettings SortedBackColor="#FFF6D6" EnableSkinSortStyles="false"></SortingSettings>
                    <PagerStyle AlwaysVisible="true" Mode="NumericPages"></PagerStyle>
                    <ClientSettings AllowExpandCollapse="true">
                        <ClientEvents  OnCommand="DemomailViewings_Command" OnRowDataBound="DemomailViewings_RowDataBound">
                        </ClientEvents>
                    </ClientSettings>
                </telerik:RadGrid>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Web20" runat="server">
                </telerik:RadAjaxLoadingPanel>



[WebMethod]
    public static int GetCount(string UserId, string Session_ID)
    {
        int count = 0;
        string startDate = "01/01/2013";
        string EndDate = "01/01/2014";
        int startIndex = 0;
        int maximumRows = 999999;
        string sortExpressions = "";
        count = DemoMail.Components.ViewingHelperX.GetViewingsCountForCurrentUser(UserId, startIndex, maximumRows, sortExpressions,
            startDate, EndDate, Session_ID, "count");
        return count;
    }

    [WebMethod]
    public static List<Viewing> GetData(int startIndex, int maximumRows,
    string sortExpressions, string UserId, string Session_ID)
    {                          
        string startDate = "01/01/2013";
        string EndDate = "01/01/2014";
        List<Viewing> list = DemoMail.Components.ViewingHelperX.GetViewingsForCurrentUser(UserId, startIndex, maximumRows, sortExpressions,
            startDate, EndDate, Session_ID,"list");
        return list;
    }

[Princy]

Hi Umesh,

Client-side data-binding with hierarchy is not a supported scenario. The closest thing to such functionality is described in the following blog post:
Client-Side Hierarchical DataBinding to OData with RadGrid for ASP.NET AJAX

Thanks,
Princy