Open DetailTable via code

[sean]

Instead of the built in arrow to open a details table view for a row (like in attachment 1)

We want to do it with a button but not in the same location we will have an extra column for the button (somewhat like attachment 2). We are trying to match an existing UI.

The Master/Details grid is bound via code and that is all working properly.

 

How or what event should I use?

 

[sean]

Answer: CommandName="ExpandCollapse" on the link or button I want

[sean]

as long as the button or link is part of the grid template

[Viktor Tachev]

Hi Sean,

Would you elaborate on what suite are you using? Are you using UI for ASP.NET AJAX or UI for ASP.NET Core.

If you are using the RadGrid control for ASP.NET AJAX you should add a button column that would look like below:

<telerik:GridButtonColumn Text="CustomButton" CommandName="ExpandCollapse"></telerik:GridButtonColumn>

In case you are using the Grid component for ASP.NET Core you should use a custom command.

columns.Command(c => c.Custom("Custom expand").Click("customClick").HtmlAttributes(new {@class="collapsed" }));

The JavaScript Click handler would look similar to the following:

function customClick(e) {
        var btn = $(e.currentTarget);

        if (btn.hasClass("expanded")) {
            btn.removeClass("expanded");
            btn.addClass("collapsed");
            this.collapseRow($(e.currentTarget).closest("tr"));
        } else {
            btn.removeClass("collapsed");
            btn.addClass("expanded");
            this.expandRow($(e.currentTarget).closest("tr"));
        }
    }

Regards,
Viktor Tachev
Telerik by Progress