[Solved] Close/collapse NestedViewTeplate pressing ESC key

[Zlatko Rusev]

Hello

I use RadGrid with NestedViewTemplate inside MasterTable. Inside NestedViewTemplate I put Panel control with RadTabstipControl.
My question is when I expand a column and work with NestedViewTable content, I wish when press ESC key, to collapse expanded RadGrid's rows and close NestedViewTemplate.

Thank you for your effort answer me

Best regards
Z. Rusev

[Veli]

Hello Zlatko,

Collapsing parent items with the ESC key can be implemented using RadGrid's client API. Note that the scenario is only supported when HierarchyLoadMode="Client". We use RadGrid's OnKeyPress client event to loop over all grid items and their nested items and check if any of these contain the target element for which the keypress event has fired. If we find the element, we collapse the parent item we are currently searching in. The javascript:

var grid;
var master;
var items;

function gridKeyPress(sender, args)
{
    if (args.get_keyCode() == 27)
    {
        grid = grid || $find('<%= RadGrid1.ClientID %>');
        master = master || grid.get_masterTableView();
        items = items || master.get_dataItems();

        var target = args.get_domEvent().target;

        for (var i = 0, length = items.length; i < length; i++)
        {
            if ($telerik.isDescendantOrSelf(items[i].get_element(), target))
            {
                items[i].set_expanded(false);
                break;
            }

            if (items[i].get_expanded())
            {
                var nestedItem = items[i].get_element().nextSibling;

                if ($telerik.isDescendantOrSelf(nestedItem, target))
                {
                    items[i].set_expanded(false);
                    break;
                }
            }
        }
    }
}

Also attaching the sample page you can run locally.

Best wishes,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Zlatko Rusev]

Hi,  thank you for your answer, is there any decion if work in HierarchyLoadMode="ServerOnDemand" ?

Z. Rusev

[Veli]

Hi Zlatko,

By default, RadGrid does not support expand/collapse with keypress using server-on-demand hierarchy loading. Nevertheless, this can be implemented under certain conditions without the RadGrid API.

Particularly for your case, you have a Panel in your NestedViewTemplate. You can put an invisible button inside the panel. The button's server-side Click event handler collapses the parent data item. On the client, you can attach an event handler to the onkepress event of the panel. In the event handler, you can simply check if the ESC key is pressed, and postback from the hidden button.

Attaching a modified project.

Regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.