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

Expand Row on Cell Click having hyperlink

6 Answers 330 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bhupendra
Top achievements
Rank 1
Bhupendra asked on 21 May 2014, 06:58 AM
Hi,

We are using kendo grid and in one of the row cells, we have a hyperlink. We want to expand the row on click of this hyperlink and display detailTemplate (i.e. child band of the row). Can you please let us know how shall we go about it.

Also in the grid, in the extreme left we have the arrow for expanding and collapsing the detail row. Is it possible to show a different Detail row template (aka child band) if the user expands by clicking this arrow icons and show a different detail template when user clicks the cell's hyperlink.

Can you please let us know how shall we go about it. I've been looking for a solution on kendo forums etc, but no luck so far.

If you need more information, please let us know.

Thanks!

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 21 May 2014, 02:14 PM
Hello Bhupendra,


Regarding the first requirement, you could bind to the click event of the link and use the expandRow method of the Grid API to expand the current row. This is demonstrated in the example below.

As for the second requirement, it could be achieved with some limitations. You could use a boolean flag variable to indicate which one was clicked - arrow or link and use conditional logic in the template to display the correct content.
E.g.
//link column template
"<a href='\\#' class='myLink'>Expand</a>"
<script>
    var flag = false;
    $("#grid").on("mousedown", ".myLink", function () {
        flag = true;
        $("#grid").data("kendoGrid").expandRow($(this).closest("tr"));
        flag = false;
    });
</script>
 
<script id="template" type="text/kendo-tmpl">
    #if(flag){#
        <p>Opened from link</p>
    #}else{#
        <p>Opened from arrow</p>
    #}#
</script>

The limitation in the current case is that the detail templates are rendered only once, the first time when the row is expanded. This means that if the row was expanded via link click, then collapsed and expanded via arrow click, the same template will be shown as the first time.

I hope this information helps. Have a great day!

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bhupendra
Top achievements
Rank 1
answered on 22 May 2014, 07:00 AM
That information helped us a lot.. thanks a ton. If we have any further queries regarding the same, we'll let you know.

Many thanks!
0
Bhupendra
Top achievements
Rank 1
answered on 22 May 2014, 07:01 AM
Many thanks for  you reply, that has helped us a lot.
0
Dimiter Madjarov
Telerik team
answered on 22 May 2014, 07:09 AM
Hi Bhupendra,


I am glad that the information was helpful. Do not hesitate to contact us again if you experience further issues.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shrilakshmi
Top achievements
Rank 1
answered on 24 Feb 2017, 12:47 PM
Can you brief me with an example please
0
Alex Hajigeorgieva
Telerik team
answered on 28 Feb 2017, 09:30 AM
Hi Shrilakshmi,

My colleague  has provided an example of one way to accomplish expanding and collapsing detail rows.

If you are looking for a different option to meet the same requirement, you could toggle the visibility of the detail row. Here is what needs to be taken care of if you choose this approach:

- check if the detail row has been initialized (it is next to the master row)

$(e).closest(".k-master-row").next(".k-detail-row");

- the expand and collapse arrows will not change automatically so you should either hide them or swap them programmatically

.k-i-expand, .k-i-collapse{
 visibility: hidden;
}

For your convenience, here is a runnable demo illustrating this approach:

http://dojo.telerik.com/AjOPUH

Regards,
Alex Hajigeorgieva
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 (charts) and form elements.
Tags
Grid
Asked by
Bhupendra
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Bhupendra
Top achievements
Rank 1
Shrilakshmi
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or