Rank 1
hi
using the web service binding the child grid on expanding event of the js .when you expand the one row it is working ,if we expand all rows using the js only lost row is showing the data.
i downloaded the one sample from the forums and modified here is the code
<script runat="server">
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridHeaderItem)
{
GridHeaderItem hitem = (GridHeaderItem)e.Item;
CheckBox chk = new CheckBox();
chk.Attributes["onclick"] = "javascript: ExpandCollapseAllTables()";
hitem["ExpandColumn"].Controls.Add(chk);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Two level hierarchy</title>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript" src="Script1.js"></script>
<script type="text/javascript">
function pageLoad(sender, args) {
tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
commandName = "Load"
WebService.GetCustomers(0, tableView.get_pageSize(),
tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
updateGrid);
}
function ExpandCollapseAllTables() {
for (masterIndex = 0; masterIndex < 2; masterIndex++) {
var firstMasterTableViewRow = $find("<%= RadGrid1.MasterTableView.ClientID %>").get_dataItems()[masterIndex];
if (firstMasterTableViewRow.get_expanded()) {
firstMasterTableViewRow.set_expanded(false);
}
else {
firstMasterTableViewRow.set_expanded(true);
}
}
}
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
<telerik:RadGrid ID="RadGrid1" AllowFilteringByColumn="true" Skin="Telerik" runat="server"
GridLines="None" AllowPaging="true" AllowSorting="true"
onitemcreated="RadGrid1_ItemCreated">
<ClientSettings>
<ClientEvents OnCommand="RadGrid1_Command" OnHierarchyExpanding="RadGrid1_HierarchyExpanding" />
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" ClientDataKeyNames="CustomerID">
<Columns>
<telerik:GridBoundColumn SortExpression="CustomerID" DataField="CustomerID" HeaderText="CustomerID" />
<telerik:GridBoundColumn SortExpression="CompanyName" DataField="CompanyName" HeaderText="CompanyName" />
<telerik:GridBoundColumn SortExpression="ContactName" DataField="ContactName" HeaderText="ContactName" />
<telerik:GridBoundColumn SortExpression="ContactTitle" DataField="ContactTitle" HeaderText="ContactTitle" />
<telerik:GridBoundColumn SortExpression="Country" DataField="Country" HeaderText="Country" />
<telerik:GridBoundColumn SortExpression="City" DataField="City" HeaderText="City" />
</Columns>
<NestedViewTemplate>
</NestedViewTemplate>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
<asp:Panel ID="Panel1" style="display:none;" runat="server">
<telerik:RadGrid ID="RadGrid2" AllowFilteringByColumn="true" Skin="Telerik" runat="server"
GridLines="None" AllowPaging="true" AllowSorting="true">
<ClientSettings>
<ClientEvents OnCommand="RadGrid2_Command" />
</ClientSettings>
<MasterTableView ClientDataKeyNames="OrderID">
<Columns>
<telerik:GridBoundColumn SortExpression="OrderID" DataField="OrderID" HeaderText="OrderID"
DataType="System.Int32" />
<telerik:GridBoundColumn SortExpression="OrderDate" DataField="OrderDate" HeaderText="OrderDate"
DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}" />
<telerik:GridBoundColumn SortExpression="ShipName" DataField="ShipName" HeaderText="ShipName" />
<telerik:GridBoundColumn SortExpression="ShipCity" DataField="ShipCity" HeaderText="ShipdgdfgdCity" />
<telerik:GridBoundColumn SortExpression="ShipCountry" DataField="ShipCountry" HeaderText="ShipCountry" />
</Columns>
</MasterTableView>
<PagerStyle AlwaysVisible="true" />
</telerik:RadGrid>
</asp:Panel>
</div>
</form>
</body>
</html>
script1.js
var commandName = "";
var tableView = null;
var ordersView = null;
var ordersCommandName = "";
function RadGrid1_Command(sender, args) {
args.set_cancel(true);
collapseItems(sender);
commandName = args.get_commandName();
WebService.GetCustomers(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(),
tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),
updateGrid);
}
function updateGrid(result) {
tableView.set_dataSource(result);
tableView.dataBind();
var dataItems = tableView.get_dataItems();
if (commandName == "Filter" || commandName == "Load") {
WebService.GetCustomersCount(updateVirtualItemCount);
}
}
function updateVirtualItemCount(result) {
tableView.set_virtualItemCount(result);
}
function collapseItems(sender) {
var dataItems = sender.get_masterTableView().get_dataItems();
for (var i = 0, length = dataItems.length; i < length; i++) {
var input = dataItems[i].get_element().cells[0].getElementsByTagName("input")[0];
if (input.className == "rgCollapse") {
input.click();
}
}
}
function RadGrid1_HierarchyExpanding(sender, args) {
collapseItems(sender);
var customerID = args.getDataKeyValue("CustomerID");
var nestedViewItem = args.get_nestedViewItem();
nestedViewItem.cells[1].appendChild($get("RadGrid2"));
ordersView = $find("RadGrid2").get_masterTableView();
ordersCommandName = "Load";
WebService.GetOrdersByCustomerID(customerID, ordersView.get_currentPageIndex() * ordersView.get_pageSize(), ordersView.get_pageSize(),
ordersView.get_sortExpressions().toString(), ordersView.get_filterExpressions().toDynamicLinq(),
updateOrdersGrid);
}
function updateOrdersGrid(result) {
ordersView.set_dataSource(result);
ordersView.dataBind();
if (ordersCommandName == "Filter" || ordersCommandName == "Load") {
WebService.GetOrdersByCustomerIDCount(updateOrdersVirtualItemCount);
}
}
function updateOrdersVirtualItemCount(result) {
ordersView.set_virtualItemCount(result);
}
function RadGrid2_Command(sender, args) {
ordersView = sender.get_masterTableView();
var nestedViewItem = sender.get_element().parentNode.parentNode;
var parentGridDataItem = $find(Telerik.Web.UI.Grid.GetNodePreviousSiblingByTagName(nestedViewItem, "tr").id);
var customerID = parentGridDataItem.getDataKeyValue("CustomerID");
args.set_cancel(true);
ordersCommandName = args.get_commandName();
WebService.GetOrdersByCustomerID(customerID, ordersView.get_currentPageIndex() * ordersView.get_pageSize(), ordersView.get_pageSize(),
ordersView.get_sortExpressions().toString(), ordersView.get_filterExpressions().toDynamicLinq(),
updateOrdersGrid);
}
please help me
downloaded sample file name is 102839_website
thanks and Regards
Srikanth.Narala
2 Answers, 1 is accepted
Rank 1
thanks and Regards
Srikanth.Narala
Basically, the control does not support a client side hierarchical structure out of the box. The sample in question relies on mimicing this structure by showing a second grid, depending on the expanded item in the first grid. Thus, having more than one item expanded, as in a standard hierarchy, is not supported.
You can consider using a standard server bound hierarchy to handle this setup.
I hope this information helps.
All the best,
Yavor
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.