Expand by Row Click

[Mehmet]

Is there anyway to make the hierarchy grid to expand by mastertable row clicking? I've partially done this by the code below.

But when user clicks on the detailtable row, it fires a postback also. I want only mastertable to be active for row click.

And is there anyway to expand only one row at a time. I mean, if user expands a row, all other rows will be collapsed.

      <ClientSettings EnablePostBackOnRowClick="True">
       <Selecting AllowRowSelect="True" />
      </ClientSettings>

protected void grdAcademicYear_ItemCommand(object source, GridCommandEventArgs e)
  {
   if (e.CommandName == "ExpandCollapse")
   {
    e.Item.Selected = !e.Item.Expanded;
    this.CollapseAll();
    e.Item.Expanded = e.Item.Selected;
   }
}

[Shinu]

Hello,

Checkout the code library which demonstrates how to expand/collapse hierarchical grid with ajax request on row double-click (without page refresh). Feel free to modify the code logic to be executed on single click.

Also checkout the following code library.
Expand/collapse hierarchy client-side on double click

Hope this helps.
Shinu

[Mehmet]

Thank you so much for your quick reply.

[Martin Roussel]

Hi, Im also trying to expand my ajaxified grids (I have two grids on my page) by row clicking and cant get it exactly like I want.

By using the first code library posted by Shinu, it works, but both grids get postback when clicking the row of one of them. I also find it this method messy for such simple functionality.

<ClientSettings
                   <ClientEvents OnRowClick="RadGrid_OnRowClick"></ClientEvents>
</ClientSettings>

function RadGrid_OnRowClick(sender, args) {

            if (args.get_tableView().get_name() != "Detail") {
                var _args = "Expand|" + args.get_tableView().get_id() + "|" + args.get_itemIndexHierarchical();
                $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest(_args);
           }
}

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="mngRequestStarted" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

                        <AjaxSettings>

                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

                            <UpdatedControls>

                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

                            </UpdatedControls>

                        </telerik:AjaxSetting>

                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

                            <UpdatedControls>

                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />

                            </UpdatedControls>

                        </telerik:AjaxSetting>
                                 <telerik:AjaxSetting AjaxControlID="RadGrid1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadGrid2">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>


</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue" />

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    string[] postBackData = e.Argument.Split('|');
    switch (postBackData[0])
    {
        case "Expand":
            int index = postBackData[2].LastIndexOf('_');
            int tableIndex = int.Parse(postBackData[2].Substring(index + 1));

            GridDataItem item = null;
            BasePL.BasePL bpl = new BasePL.BasePL();

            switch (postBackData[1].Substring(0, postBackData[1].IndexOf("_")))
            {
                case "RadGrid1":
                    item = bpl.GetTableView(this.RadGrid1.MasterTableView, postBackData[1]).Items[tableIndex];
                    break;
                case "RadGrid2":
                    item = bpl.GetTableView(this.RadGrid2.MasterTableView, postBackData[1]).Items[tableIndex];
                    break;
            }

            if (item.Expanded)
            {
                item.Expanded = false;
            }
            else
            {
                item.Expanded = true;
            }
            break;
    }
}

public GridTableView GetTableView(GridTableView currTableView, string controlId)
{
    if (currTableView.ClientID == controlId)
    {
        return currTableView;
    }
    else
    {
        GridTableView tv = null;
        foreach (GridDataItem item in currTableView.Items)
        {
            if (item.HasChildItems)
            {
                foreach (GridTableView nestedView in item.ChildItem.NestedTableViews)
                {
                    object temp = GetTableView(nestedView, controlId);
                    if (temp != null)
                    {
                        tv = temp as GridTableView;
                        break;
                    }
                }
                if (tv != null)
                {
                    break;
                }
            }
        }
        return tv;
    }
}

I also tried another method that also kinda works, but the nested table view get postback when its rows are clicked which I dont want.

<ClientSettings EnablePostBackOnRowClick="True">
      <ClientEvents OnRowClick="OnRowClick"></ClientEvents>
 </ClientSettings>

<script type="text/javascript">
       function OnRowClick(sender, args) {
            var gridItem = args.get_item();
            gridItem.set_expanded(!gridItem.get_expanded());
        }

</script>

protected void RadGrid1_OnItemCommand(object o, Telerik.Web.UI.GridCommandEventArgs e)
        {

                  if (e.CommandName == "RowClick" && e.Item.OwnerTableView.Name != "Detail")
                  {
                      e.Item.Expanded = !e.Item.Expanded;
                  }

        }

Can someone help? TIA

[Martin Roussel]

anyone? I really would like to solve this once for good. Thanks.

[Eyup]

Hi Martin,

Could you please try the following approach?
  mark-up:

<telerik:RadGrid ... >
  <ClientSettings>
     <ClientEvents OnRowClick="rowClicked" />
  </ClientSettings>
  <MasterTableView ... Name="Master">

  JavaScript:

function rowClicked(sender, args) {
    var tableView = args.get_tableView();
    if (tableView.get_name() == "Master") {
        var index = args.get_itemIndexHierarchical();
        tableView.fireCommand("YourCommand", index);
    }
}

  C#:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "YourCommand")
    {
        GridDataItem dataItem = RadGrid1.MasterTableView.Items[int.Parse(e.CommandArgument.ToString())] as GridDataItem;
        dataItem.Expanded = !dataItem.Expanded;
    }
}

That should do the trick. Please give it a try and let me know about the result.

Kind regards,
Eyup
the Telerik team

[Martin Roussel]

It works! Huge thanks.

One last thing, If I would like to also disable the expanding (loading event) for rows that dont contain child rows. I know I must (and probably can) detect it client-side just before calling the tableView.fireCommand, but cant figure what property to use. In order words, how to detect if the clicked row has children?

I found this topic: TOPIC, which suggest a method, but im screwing up my grid when setting its HierarchyLoadMode to "Client".

Any other way?

Martin

[Eyup]

Hi Martin,

In order to cancel the expand command directly on client side, you will need to use HierarchyLoadMode="Client" as suggested in the mentioned thread.

In any other case, you will need to do that on server side, for example interrupting the ItemCommand event.

I hope the clarification was helpful.

Greetings,
Eyup
the Telerik team

[Martin Roussel]

Thanks, ive managed to make it work (no problem seen so far) with HierarchyLoadMode="Client".

Last last question, Is there a way to make all this work like using the leftmost expand arrow button (no ajax loading involved), looks like it is 100% done client side. Im just annoyed but the little waiting time it causes..compared to using the standard expanding.

Regards

[Eyup]

Hi Martin,

When using HierarchyLoadMoad set to Client, you could expand your row directly on the client:

function rowClicked(sender, args) {
    var tableView = args.get_tableView();
    if (tableView.get_name() == "Master") {
        var index = args.get_itemIndexHierarchical();
        args.get_item().set_expanded(!args.get_item().get_expanded());
    }
}

I hope this will prove helpful. Please give it a try and let me know about the result.

Kind regards,
Eyup
the Telerik team

[Martin Roussel]

Works great! Sorry to not have tried this after switching to "Client" mode.