Here is a solution to create a linked column mostly in Kendo JavaScript:
(function(myPage, $, undefined) {
var IDS = {
...
myGrid: "#my-grid",
...
selectedMasterkey: "#selected-master-key",
selectedChildkey: "#selected-child-key",
};
var Grids = {
MyGrid: null,
};
function initMyGrid() {
$(IDS.myGrid).kendoGrid({
selectable: true,
scrolable: true,
sortable: true,
columns: [
{ field: "Key", title: "key", width: "60%" },
{ field: "Weight", title: "Weight", width: "20%" },
{ field: "Link", title: "Link", width: "20%", template:"<a href="../MyData.mvc/Index?key=#=KEY#">#=KEY#</a>"}
],
change: function() {
var selectedDataItem = this.dataItem(this.select());
if (PageState.Selected.ChildKey != selectedDataItem.KEY) {
PageState.Selected.ChildKey = selectedDataItem.KEY;
myGridSelectionChanged();
}
},
...
});
Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');
Grids.MyGrid .element.on("dblclick", "tbody>tr", "dblclick", function(e) {
var dbClickedKey = Grids.MyGrid .dataItem($(this)).KEY;
window.open('../MyData.mvc/Index?key='+dbClickedKey,'_blank');
});
bindMyGrid();
}
function bindMyGrid() {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "MyData",
dataType: "json"
},
parameterMap: function(data) {
return {
myDataId: getQueryStringParameterByName('mydataid')
}
}
},
schema: {
data: function(response) {
return response;
},
total: function(response) {
return response.length;
},
parse: function(response) {
var myDataList= [];
$.each(response, function(i, key) {
myDataList.push({ "KEY": key });
});
return myDataList;
},
},
});
dataSource.fetch();
dataSource.view();
Grids.MyGrid.setDataSource(dataSource);
}
...
myPage.initialize = function() {
initMyGrid();
}
}(window.myPage = window.myPage || {}, jQuery));
Try playing around with javascript here:
JSFiddle
HTH.