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

expand and collapse at client side in nestedviewTemplate Problem

2 Answers 131 Views
Grid
This is a migrated thread and some comments may be shown as answers.
nsrikanth 2009
Top achievements
Rank 1
nsrikanth 2009 asked on 19 May 2010, 07:34 AM

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

Sort by
0
nsrikanth 2009
Top achievements
Rank 1
answered on 20 May 2010, 11:57 AM
please help me....

thanks and Regards
Srikanth.Narala
0
Yavor
Telerik team
answered on 24 May 2010, 12:48 PM
Hi nsrikanth,

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.
Tags
Grid
Asked by
nsrikanth 2009
Top achievements
Rank 1
Answers by
nsrikanth 2009
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or