Archive | August 2012

Kendo UI MVC Grid Extention

Kendo UI MVC Grid Extention

Didn’t like how the MVC Destroy() method worked so I wired up my own. This is a simple function to help you get the row’s data when you fire off the custom event.

Essential “e” is the event that is fired from the custom command event in your Kendo UI grid. It takes the target and turns it into a JQuery object. It grabs the uid of the row and then matches it with the uid in the data. Its very quick and works nicely. Sure there are other ways to skin this cat but this seemed to be very smooth. Seems to me there should be a JQuery data object for the row but all I saw was the uid hence this function below. Anyway thought I’d share.

   function getRowData(e) {
        var target, grid, uid, row, data;
        target = $(;
        uid = target.parent().parent().data().uid;      
        grid = $('#Grid').data('kendoGrid');        
        row = grid._data;
        for (var i = 0; i < row.length; i++) {
            if (row[i].uid == uid) {
                data = row[i];
        return data;

What you’ll get is your data for the row as an object so you can simple do:
// note below assumes you have a custom column command that on .click() is attached to the “deleteRow” function “e” is the event that the click event will pass in.

function deleteRow(e){
	var data = getRowData(e);
	var name = data.full_name // where full_name is a column in your grid. 
	alert('Are you sure you want to delete ' + name);
	// TODO: wire up your delete event passing in an id or something
	$.post('/your/path', {}, function (result) {
			// load your UI or whatever

The getRowData function you can copy/paste but the above “deleteRow” is just an example you’ll need to modify to your needs.