Kendo UI - Tab control

In this tutorial, we will discuss about getting records for Kendo Grid and displaying them. Will also see, how to retrieve a specific column value on click of a row event.

I had written a sample Kendo Grid Html, which will display four columns, namely Employee ID, Name, Join Date and Comments

Data definition for this grid resides in DemoNamespace.Models.TestData, which is nothing but defining properties of the above columns. Once defined, make sure your controller method returns JSON data to be bound to the grid....

In the above, while binding the columns, you could define their width and title attributes as shown.

  .Read will invoke the call to Home Controller -> GetTestData method and returns a result set to be tied up with the grid.

   On selection of a row, the code will start executing the method "recordselected" as indicated. Below is the code where it defines the method and gives an alert of the selected Employee Name.

Few changes are required in controller, before we could run and test it. Here is a sample code of, how the  action method should be defined...

While returning the json result set, it should have .ToDataSourceResult(request), else the grid will not be bound with the returned data... Also parameters must contain [DataSourceRequestAttribute] DataSourceRequest request as the first parameter and other parameters should follow....

Happy coding....