Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] Bind Detail Table on Client Side

5 Answers 560 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mfmz
Top achievements
Rank 1
mfmz asked on 25 May 2009, 10:39 AM
Hi,

I try to bind master detail on client side. It binds master table but not its associate detail table. Can you help me in this regard that where I get wrong?

Thanks
My Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default4.aspx.cs" Inherits="TestGrid._Default4" %> 
 
<%@ 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>Untitled Page</title> 
     
    <script type="text/javascript" src="script/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="json.js"></script> 
    <telerik:RadScriptBlock ID="SB" runat="server">  
        
    <script type="text/javascript"> 
        
    var companies = null; 
    var empId = -1000; 
    var curDataItem = null; 
    var companyId = -100; 
     
    $(document).ready(pageLoad); 
     
    function pageLoad() 
    { 
        companies = [{"CompanyID":1,"CompanyName":"Moftak","Employees":[{"CompanyId":1,"FirstName":"Naeem","EmployeeID":1,"LastName":"Dad","Title":"","TitleId":0,"BirthDate":"","ShiftStart":"","JoinDate":""},{"CompanyId":1,"FirstName":"Nabil","EmployeeID":2,"LastName":"Manzoor","Title":"","TitleId":0,"BirthDate":"","ShiftStart":"","JoinDate":""}]}];         
         
        var grd = $find("<%= RadGrid1.ClientID %>");       
        if(grd != null)        
        {               
            grd.get_masterTableView().rebind(); 
            grd.get_detailTables()[0].rebind(); 
        }        
    }        
        
    function OnCommand(sender,args) 
    { 
       args.set_cancel(true); 
        
       if(args.get_commandName() == "RebindGrid") 
       {    
          resetContainers(); 
                                        
          if(args.get_tableView().get_name() == "Company") 
          {             
            sender.get_masterTableView().set_dataSource(companies); 
            sender.get_masterTableView().dataBind();                     
          } 
           
          if(args.get_tableView().get_name() == "Employee") 
          {             
            args.get_tableView().set_dataSource(companies[0].Employees); 
            args.get_tableView().dataBind();                     
          } 
       }                     
    } 
    function popupAddEmployee() 
    { 
        var oWnd = window.radopen("add-employee.aspx" , "radWindow1"); 
        oWnd.SetSize(500,400); 
        oWnd.Center(); 
        return false; 
    } 
    function addEmployee(employee) 
    {        
        employee.CompanyID = 1;                  
        employee.EmployeeID = empId--; 
        var grd = $find("<%= RadGrid1.ClientID %>"); 
                 
        for(var i=0;i<companies.length;i++) 
        { 
            if(companies[i].CompanyID == employee.CompanyID) 
            { 
                var company = companies[i]; 
                if(company != null) 
                { 
                    company.Employees[company.Employees.length] = employee;            
                    
                    document.getElementById("hdCompanies").value = $.toJSON(companies);   
                 
                    //grd.get_masterTableView().rebind(); 
                     
                    grd.get_detailTables()[0].rebind(); 
                } 
                break; 
            } 
        }                 
    }       
    </script> 
    </telerik:RadScriptBlock> 
</head> 
<body > 
     
    <telerik:RadWindowManager ID="eiditCustomFields" runat="server" DestroyOnClose="true" ShowContentDuringLoad="false" Skin="Office2007"> 
    <Windows> 
        <telerik:RadWindow ID="radWindow1" runat="server" style="display:none" Behavior="default"></telerik:RadWindow> 
    </Windows> 
</telerik:RadWindowManager> 
     
    <form id="form1" runat="server"> 
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" ></asp:ScriptManager> 
        <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1NeedDataSource" OnDetailTableDataBind = "DetailTableDataBind"  > 
        <MasterTableView AutoGenerateColumns="false"  AllowAutomaticInserts="true" DataKeyNames="CompanyID" Name="Company" 
         CommandItemDisplay="Top" HierarchyLoadMode="Client">                  
         
        <Columns> 
        <telerik:GridBoundColumn DataField="CompanyID" UniqueName="CompanyID"  Display="false" DataType="System.Int32" >    
         
        </telerik:GridBoundColumn>               
         
        <telerik:GridBoundColumn DataField="CompanyName" UniqueName="CompanyName" HeaderText="Company Name">               
        <ItemStyle Width="100px" /> 
        </telerik:GridBoundColumn>                           
                                                                                                 
        </Columns> 
         
        <DetailTables> 
            <telerik:GridTableView runat="server" DataKeyNames="EmployeeID" AutoGenerateColumns="false" Name="Employee"  > 
             
             <ParentTableRelation> 
                 <telerik:GridRelationFields DetailKeyField="CompanyID" MasterKeyField="CompanyID" /> 
             </ParentTableRelation> 
              
            <ExpandCollapseColumn Visible="False"> 
                <HeaderStyle Width="19px" /> 
            </ExpandCollapseColumn> 
             
            <RowIndicatorColumn Visible="False"> 
               <HeaderStyle Width="20px" /> 
            </RowIndicatorColumn> 
             
            <Columns> 
                <telerik:GridBoundColumn DataField="CompanyID" Display="false" DataType="System.Int32" >    
                 
                </telerik:GridBoundColumn>  
                <telerik:GridBoundColumn DataField="EmployeeID" Display="false" DataType="System.Int32" >    
                 
                </telerik:GridBoundColumn>               
                 
                <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name">               
                <ItemStyle Width="100px" /> 
                </telerik:GridBoundColumn> 
                
                <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name">               
                <ItemStyle Width="100px" /> 
                </telerik:GridBoundColumn> 
                 
                <telerik:GridBoundColumn DataField="TitleId" Display="false" DataType="System.Int32">                     
                </telerik:GridBoundColumn> 
                 
                <telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title" >             
                <ItemStyle Width="100px" /> 
                </telerik:GridBoundColumn>         
                 
                <telerik:GridBoundColumn DataField="BirthDate"  HeaderText="BirthDate" >             
                <ItemStyle Width="100px" /> 
                </telerik:GridBoundColumn> 
                    
                <telerik:GridBoundColumn DataField="ShiftStart" UniqueName="ShiftStart" HeaderText="Shift Start" >             
                <ItemStyle Width="150px" /> 
                </telerik:GridBoundColumn>      
                 
                <telerik:GridBoundColumn DataField="JoinDate" UniqueName="JoinDate" HeaderText="JoinDate" >             
                <ItemStyle Width="150px" /> 
                </telerik:GridBoundColumn>    
                                                                                                 
            </Columns> 
            
             
            </telerik:GridTableView> 
        </DetailTables> 
                 
        <CommandItemTemplate> 
        <input type="button" value="Add Employee" id="add" onclick="popupAddEmployee();" /> 
        </CommandItemTemplate> 
                 
        </MasterTableView> 
        <ClientSettings> 
        <ClientEvents OnCommand="OnCommand"  /> 
        </ClientSettings> 
        </telerik:RadGrid>      
         
    </div> 
             
    </form> 
</body> 
</html> 
 

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 28 May 2009, 10:55 AM
Hello,

I'm afraid RadGrid doesn't support client hierarchy out-of-the-box. Refer to the following blog post for a possible workaround:
How To: Telerik RadGrid Master/Detail client-side data-binding using LINQ to SQL and WebService

I would like to let me know if you have any comments/feedback on my answer in the following forum thread:
Link to public post

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Manoj Bhatty
Top achievements
Rank 1
answered on 28 Jul 2009, 01:31 AM
Daniel, thanks for the excellent link. I've also been struggling with the client hierarchical binding problem.

But I didn't really understand the example - There's a radgrid2_command method that's missing the definition! Is it declarative binding or what is going on?

Could you post some simple code or steps that demonstrate the essential elements of such binding?
0
Princy
Top achievements
Rank 2
answered on 30 Jul 2009, 05:25 AM
Hi Manoj,

I have gone through the above link and tried the demo application implemented by telerik. It is working fine on my end. I guess you have missed out the script file which contains the necessary code snippets.

CS:
 
function RadGrid2_Command(sender, args) { 
    args.set_cancel(true); 
 
    ordersCommandName = args.get_commandName(); 
 
    WebService.GetOrdersByCustomerID(customerID, ordersTableView.get_currentPageIndex() * ordersTableView.get_pageSize(), 
                ordersTableView.get_pageSize(), 
                    ordersTableView.get_sortExpressions().toString(), ordersTableView.get_filterExpressions().toDynamicLinq(), 
                        updateOrdersGrid); 
}  
 
 

Thanks
Princy
0
Jeff Nafe
Top achievements
Rank 1
answered on 23 Feb 2010, 06:46 PM
Since this post is now approximately 6 months old, has this capability been added in a recent version, or should we still attempt to use the linked to workaround?
0
Sebastian
Telerik team
answered on 24 Feb 2010, 03:11 PM
Hello Jeff,

We will consider support for hierarchy with client load mode and client-side binding for the future major versions of RadGrid for ASP.NET AJAX. Note that this feature will not be available for the Q1 2010 release and you can consider the solution from the blog post posted by my colleague Daniel.

Kind regards,
Sebastian
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
mfmz
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Manoj Bhatty
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Jeff Nafe
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or