Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here



Google

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


Share with WhatsApp


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.



If you enjoyed this post take 5 seconds to share it! Be Socialable. :-)

Share with WhatsApp

Posts To Read Next

How to hide hours in month view of kendo UI Scheduler

Hide Hours and show business hours button in Month View of Kendo Scheduler by setting configuration attribute or using jQuery on databound event.


Typewriter - Automatic TypeScript Template generation from C# classes in Visual Studio

Typewriter, an extension for visual studio that generates TypeScript files from C# code files using TypeScript templates. Convert your C# model classes to TypeScript automatically.


Assembla - Free and private repository to manage your source code online with SVN subversion hosting

With Assembla you can share source code with others online. Free & Private source code repository with SVN Subversion, Git & Perforce Hosting.


Swagger - Powerful Opensource Framework for RESTful API

With a Swagger-enabled API, you get interactive documentation, client SDK generation and discoverability. Swagger Editor allows you to generate code, documentation with ease.


How to call click or any event only once in jQuery

Know how to execute an click event or any event only once for any element in jQuery. Perform action only once and even not required to unbind event.


Your opinion is valuable for us! Comments, suggetions are welcome.


Submit your Email Id to stay updated with us and get notified with our new posts. It's FREE!
Vu 32'' TV Vu 24'' TV
We know this popup is disturbing you!
But We would greatly appreciate if you share us with your friends below!

It will not take more than 2 seconds but will motivate us greatly to write more,share more!

x