Kendo Web Extensions for ASP.NET MVC -Grid Control - jQuery Code for mostly used functionality

Hello friend, recently I have started to use Kendo Web Extensions for ASP.NET MVC Version (2013.3.1324.340) controls in one of my project.

I was totally new in using KendoUI controls in MVC therefor initially I faced no.of problems in achieving small small functionality but at the end I found solution for almost all functionality which I have implemented in my project but while doing so I was totally depended on google and specially stackoverflow site where I found most of these solutions.

I have implemented this code in my project but it took lots of reaserch and development as founded code is not always the same which you want. So I made the no.of changes to that code and at the end made it working but defenitely credit goes to all those developers who has shared their on stackoverflow and other sites.

But as all this code is scattered all over the web I thought better to share it at one place cause of which I am writing this post.

Here are mostly required functionality of KendoUI Grid with jQuery.

1) Find KendoUI Grid by id in jquery

var grid = $('#gridId').data().kendoGrid;
OR
var grid = $("#gridId'").data("kendoGrid");

2) To find a grid data item row by id field.

Suppose we have set “EmployeeId” field of binded model like below…

……………
.DataSource(ds => ds.Ajax().Model(model =>
 	{  
model.Id(m => m.EmployeeId);
})
.Read(read => read.Action("ControllerMethodToReadData","ControllerName")
.Type(HttpVerbs.Post)))
……………

Then we can get a data item row by this id i.e. “EmployeeId” in jQuery by following.

var grid = $('#gridFields').data().kendoGrid;

var empRow = grid.dataSource.get(9);

After this we will get all item data of employee whose having employee id = 9 in “empRow” and suppose we want his salary then we can get it by following.

var EmpSalary = empRow.salary

3) To call read method from jQuery.

$("#gridId").data().kendoGrid.dataSource.read();

4) To call read method with parameters from jQuery.

$("#gridId").data().kendoGrid.dataSource.read({ empId:$("#ddlEmployeeId").val() });

Note:The name of parameter e.g. “empid” must be exactly same as parameter name of controllers read method.

public ActionResult ReadEmployeeData([DataSourceRequest] DataSourceRequest request, intempId = 0) { .... }

5) Function to scroll kendoUigrid at selected row

function scrollToSelectedRowOfGridEmployee() {
//find a grid
var grid = $('#gridEmployee').data().kendoGrid;

//calculate scroll position
var topOfGridBofy = grid.table.find("tbody").offset().top;
var topOfSelectedRow = grid.select().offset().top;
var scrollAtTop = topOfSelectedRow - topOfGridBofy;

//scroll
        $("#gridEmployee .k-grid-content").animate({
scrollTop: scrollAtTop
        }, 300);
}

6) If you are doing a task in which after clicking on a particular row you do some operations with it after which row is getting deselected but you want to keep it selected then you can use its data-uid to reselect it like below.

var grid = $('#gridEmployee').data().kendoGrid;
var uid = grid.select().data("uid");
grid.select(grid.table.find('tr[data-uid="' + uid + '"]'));

7) Show alert on Update button click in InLine Edit mode of grid.

To show a confirmation message on update click we need to bind a client side function to grid’s update like below.

.Editable(e =>e.Mode(GridEditMode.InLine)).Events(events =>events.Save("showConfirmation"))

Client side javascript function will be like below :

function showConfirmation(e) {

var r = confirm("Do you want to continue?");
if (r == true) {
return true;
}
else {			
e.preventDefault();
return false;
}

}

And if you want to show confirm message only on update case not while adding new item then your function will be like below.

function showConfirmation(e) {  
if (e.model.dirty && e.model.id > 0) {
var r = confirm("Do you want to continue?");
if (r == true) {
return true;
            }
else {			
e.preventDefault();
return false;
            }
   }
 }

8) By default you can show empty message to kendogrid when its paging is on but to show “No Records found” message while paging is not enabled.

First we need to bind a client side OnDataBound function to grid like below.

.Events(e =>e.DataBound("OnDataBound"))

And Client side function will be like below

function GridOnDataBound(e) {
    if (e.sender.dataSource.data().length <= 0) {
        alert("No Records Found");//here you can set span text too.
    }
}

9) To send all rows of KendoGrid as parameter through ajax.

function SaveGridData() {

//find a grid
var grid = $("#gridid").data().kendoGrid;
//check it has data and send it as json
if (grid.dataItem != null) {

 $.ajax({
url: 'ControllerName/MethodName',
data: JSON.stringify(grid.dataSource.view()),
type: "post",
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false,
success: function (success) {
alert("saved");
                    },
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError); 
 }
});
}
}

10) To pass other controls value as parameter to the controller method.

E.g. You are having one method which accepts department which is dropdown and not a column of grid, then you need to pass it like below.

First you need to bind “data” method to grid.

.Read(r=>r.Action("Method","ControllerName").Data("OnDataGrid").Type(HttpVerbs.Post))

And client side function will be like below.

function OnDataGrid() {
return {departmentId: $("#ddlDepartmentId").val()}
}

Hope you have benefited from this post and it has saved your some valuable time.

Let me know if you are facing any problem in using any of above code.

Also if possible share the code implemented by you regarding KendoUI Grid in comment section below so we can maitain a single startup repository in the form of this post for all developers like us.