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

Open DetailTable via code

3 Answers 65 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sean
Top achievements
Rank 1
sean asked on 07 Apr 2017, 06:39 PM

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?

 

3 Answers, 1 is accepted

Sort by
0
sean
Top achievements
Rank 1
answered on 10 Apr 2017, 06:40 PM
Answer: CommandName="ExpandCollapse" on the link or button I want
0
sean
Top achievements
Rank 1
answered on 10 Apr 2017, 06:41 PM
as long as the button or link is part of the grid template
0
Viktor Tachev
Telerik team
answered on 12 Apr 2017, 12:06 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
sean
Top achievements
Rank 1
Answers by
sean
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or