This is a migrated thread and some comments may be shown as answers.

Hierarchial view and client side binding

3 Answers 122 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Alexander asked on 04 Mar 2012, 04:30 PM

I'm trying to implement hierarchial grid client update based on events I get from server.

JSON serialized array of objects is received from server and bound to grid with set_dataSource() either on MasterTableView or on one of detailTables. The problem is - respective detail tables only appear for rows that were bound to master table on server side.
E.g. if I bind array of 0 records to masterTable on server-side and bind array of 3 records on client-side then - get_detailTables().length returns 0. If I bind 2 records on server side and 5 records on client side then - get_detailTables().length returns 2. Of course UI doesn't show that newly added rows can be expanded too. I'm using HierarchyLoadMode="Client" for master table.

Is there a way to workaround this and have detail tables created appropriately without additional server calls from grid?

3 Answers, 1 is accepted

answered on 05 Mar 2012, 09:58 AM

Hi,

I've seen this demo prior to asking question, it doesn't answer the question I've got but I've used it to make a test page for my question. Please have a look at the sample below, I've limited number of rows in master table bound from server side to 2. Also an InitializeMasterTableWithArray() function added which binds datasource of master table to the array created on client-side with 3 records. Note, that third record doesn't get an expand functionality.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HierarchyTest.aspx.cs" Inherits="HierarchyTest" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function HierarchyExpanding(sender, args) {

var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];

if (!confirm("Should expand item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "'?")) {

args.set_cancel(true);

}

function HierarchyExpanded(sender, args) {

var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];

alert("Item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "' expanded.");

}

function HierarchyCollapsing(sender, args) {

var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];

if (!confirm("Should collapse item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "'?")) {

args.set_cancel(true);

}

function HierarchyCollapsed(sender, args) {

var firstClientDataKeyName = args.get_tableView().get_clientDataKeyNames()[0];

alert("Item with " + firstClientDataKeyName + ":'" + args.getDataKeyValue(firstClientDataKeyName) + "' collapsed.");

}

function ExpandCollapseFirstMasterTableViewItem() {

var firstMasterTableViewRow = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[0];

if (firstMasterTableViewRow.get_expanded()) {

firstMasterTableViewRow.set_expanded(false);

}

else {

firstMasterTableViewRow.set_expanded(true);

}

function ExpandFirstMasterTableViewItem() {

$find("<%= RadGrid1.MasterTableView.ClientID %>").expandItem(0);

}

function CollapseFirstMasterTableViewItem() {

$find("<%= RadGrid1.MasterTableView.ClientID %>").collapseItem(0);

}

function ExpandFirstDetailTableFirstItem() {

$find("<%= RadGrid1.Items[0].ChildItem.NestedTableViews[0].ClientID %>").expandItem(0);

}

function CollapseFirstDetailTableFirstItem() {

$find("<%= RadGrid1.Items[0].ChildItem.NestedTableViews[0].ClientID %>").collapseItem(0);

}

function InitializeMasterTableWithArray() {

var datasource = [{ 'CustomerID': 'ALFKI', 'ContactName': 'Maria Anders (Client-Side!)', 'CompanyName': 'Alfreds Futterkiste' },

{ 'CustomerID': 'ANATR', 'ContactName': 'Ana Trujillo (Client-Side!)', 'CompanyName': 'Ana Trujillo Emparedados y helados' },

{ 'CustomerID': 'NEWCUSTOMERID', 'ContactName': 'This One will not get expanded', 'CompanyName': 'How this can be solved?'}];

var masterTable = $find("<%= RadGrid1.MasterTableView.ClientID %>");

masterTable.set_dataSource(datasource);

masterTable.dataBind();

}

</script>

</telerik:RadCodeBlock>

</head>

<body class="BODY">

<form runat="server" id="mainForm" method="post">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" AutoGenerateColumns="False"

PageSize="3" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"

GridLines="None">

<PagerStyle Mode="NumericPages"></PagerStyle>

<ClientSettings>

<ClientEvents OnHierarchyExpanding="HierarchyExpanding" OnHierarchyExpanded="HierarchyExpanded"

OnHierarchyCollapsing="HierarchyCollapsing" OnHierarchyCollapsed="HierarchyCollapsed" />

</ClientSettings>

<MasterTableView ClientDataKeyNames="CustomerID" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID"

AllowMultiColumnSorting="True" HierarchyLoadMode="Client" Width="100%">

<DetailTables>

<telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client"

DataSourceID="SqlDataSource2" Width="100%" GridLines="Horizontal" CssClass="RadGrid2">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />

</ParentTableRelation>

<DetailTables>

<telerik:GridTableView ClientDataKeyNames="OrderID" DataKeyNames="OrderID" HierarchyLoadMode="Client"

DataSourceID="SqlDataSource3" Width="100%" GridLines="Horizontal" CssClass="RadGrid3">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />

</ParentTableRelation>

<Columns>

<telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"

DataField="UnitPrice">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"

DataField="Quantity">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"

DataField="Discount">

</telerik:GridBoundColumn>

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>

</SortExpressions>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"

DataField="OrderID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"

DataField="OrderDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"

DataField="EmployeeID">

</telerik:GridBoundColumn>

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="OrderDate"></telerik:GridSortExpression>

</SortExpressions>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"

DataField="CustomerID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"

DataField="ContactName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"

DataField="CompanyName">

</telerik:GridBoundColumn>

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="CompanyName"></telerik:GridSortExpression>

</SortExpressions>

</MasterTableView>

</telerik:RadGrid>

<asp:Button ID="Button1" CssClass="button" runat="server" Text="PostBack" Style="margin: 10px 22px 10px 0px">

</asp:Button>

Click PostBack to see the state of the grid is preserved.

<br />

<asp:Button ID="Button2" CssClass="button" Width="300px" Text="Expand/Collapse first MasterTableView item"

OnClientClick="ExpandCollapseFirstMasterTableViewItem(); return false;" runat="server" />

<br />

Using set_expanded() method of GridDataItem all GridDataItems will be created on

the client!

<br />

<asp:Button ID="Button3" CssClass="button" Width="300px" Text="Expand first MasterTableView item"

OnClientClick="ExpandFirstMasterTableViewItem(); return false;" runat="server" />

<br />

expandItem() method of GridTableView does not require GridDataItems to be created

on the client!

<br />

<asp:Button ID="Button4" CssClass="button" Width="300px" Text="Collapse first MasterTableView item"

OnClientClick="CollapseFirstMasterTableViewItem(); return false;" runat="server" />

<br />

collapseItem() method of GridTableView does not require GridDataItems to be created

on the client!

<br />

<asp:Button ID="Button5" CssClass="button" Width="300px" Text="Expand first item on first DetailTable"

OnClientClick="ExpandFirstDetailTableFirstItem(); return false;" runat="server" />

<br />

<asp:Button ID="Button6" CssClass="button" Width="300px" Text="Collapse first item on first DetailTable"

OnClientClick="CollapseFirstDetailTableFirstItem(); return false;" runat="server" />

<br />

<asp:Button ID="Button7" CssClass="button" Width="300px" Text="Bind data to MasterTableView client side"

OnClientClick="InitializeMasterTableWithArray(); return false;" runat="server" />

<br />

Binds MasterTable to client-side Datasource

<br />

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 2 * FROM Customers"

runat="server"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Orders Where CustomerID = @CustomerID"

runat="server">

<SelectParameters>

<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />

</SelectParameters>

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Order Details] where OrderID = @OrderID"

runat="server">

<SelectParameters>

<asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

Accepted

answered on 08 Mar 2012, 08:27 AM

Hello Alexander,

Unfortunately the RadGrid does not support the desired functionality. However you could try using the approach described in the following blog post in order to create hierarchical RadGrid on client side:
http://blogs.telerik.com/vladimirenchev/posts/08-09-09/how-to-telerik-radgrid-master-detail-client-side-data-binding-using-linq-to-sql-and-webservice.aspx
Additionally please check out the following example which demonstrates the client-side insert/update/delete functionality:
Client-side Insert/Update/Delete

I hope this helps.

All the best,
Radoslav
the Telerik team

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 their blog feed now.