Expand Row on Cell Click having hyperlink

[Bhupendra]

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!

[Dimiter Madjarov]

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

 

 

[Bhupendra]

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!

[Bhupendra]

Many thanks for  you reply, that has helped us a lot.

[Dimiter Madjarov]

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

 

 

[Shrilakshmi]

Can you brief me with an example please

[Alex Hajigeorgieva]

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