Pass detailrow reference in kendo grid template funciton - kendo-ui

Question

Hi is there any way to pass detailRow reference to a function using kendo grid template column?
Here is my trail.
function detailInit(e) {
detailRow = e.detailRow;
detailRow.find("#mygrid").kendoGrid({
dataSource: {
data: empModel,
},
columns: [
{
field: "empId",
title: "Emp ID",
template: '<a href="\\#" onclick="showEmpDetails(\'#= detailRow #\')"> }
]
});
});

Answer 1

Try to place every detailRow you retrieve at the detailInit into globally located array, then pass this index to your click method (or some sort of key - could be dictionary, rows has uid) and then make the method to read the row details from your array/collection based on the id you have passed in. (Ideally read the row details directly from your datasource by the uid, no need to duplicate the data.) Please refer to below code as pseudo code, I didn't have a chance to run it.
var rows = new Array();
$('.clickable').click(function () {
// get the id for your detail
var detailId = this.attr('detailId');
// pass it further
showEmpDetails(detailId);
});
function detailInit(e) {
detailRow = e.detailRow;
// add roe to your (cache) collection
rows[rows.legth] = detailRow ;
detailRow.find("#mygrid").kendoGrid({
dataSource: {data: empModel},
columns: [
{
field: "empId",
title: "Emp ID",
// add attribute onto your a tag
template: '<a href="\\#" detailId = "#= rows.legth #" class="clickable">'
}
]
});
});
function showEmpDetails(id) {
// read from your collection and do what you need
console.log(rows[id]);
}