How to Develop Custom Kendo UI Grid with Sub-grid in MVC

Steps for how to use Kendo UI in MVC

Aegis’s asp.net development team is sharing this technical document to explain how to use Kendo grid with sub-grid using Kendo UI framework in mvc based application. Keno UI is latest jquey based platform that helps in designing modern web apps and data binding. This is a step by step guide that will make you familiar with a framework so that you can use it during asp.net development without making any errors.

Here we explain how to use Kendo grid with sub-grid using Kendo UI framework in mvc based application. Keno UI is an HTML5, jQuery-based framework for building modern web application. Kendo UI grid is used for binding data. Below are the steps for how to use Kendo UI in MVC.

1. Download the Kendo UI Javascript :-

Download Trial version of Kendo javascript and CSS, for download click here.

2. Add Kendo UI JavaScript and CSS References :-

To give the Kendo UI reference of javascript and CSS we need to write below code in mvc view. Set reference of Kendo UI javascript in mvc view and then call the Html Kendo grid () function where we need it. Show the javascript code as per below.

As per above code we can give the reference for Kendo.all.min.js and CSS from project location.

3. Kendo UI Grid Binding code in view :-

After completing the process of adding kendo UI reference we use that for data banding. So for that we have used HTML kendo grid function of Kendo UI javascript in our view and pass the model data in Grid function. Also give the required value parameter Like Name, Columns that we have to bind in grid with specific title or client template with particular url and parameter. And set the configuration for grid like we have to display or Enable-disable paging, sorting, scrolling, and filtering in grid. For that set pageable (), sortable (), scrollable () and filterable () property of grid. If we also want to show sub grid then set the clientdetailtemplete in kendo UI grid. For data operations and manipulation datasource is used in kendo grid. If we want to perform operation in server side then we have to give ServerOperation true for the Kendo UI grid. In kendo UI grid we set the custom format for date or set custom size for columns or give the link to other pages using client template. Here Implement the kendo UI grid as per given below code.

< div id="clientsDb" > @(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Template(@< text >< /text >).ClientTemplate("< a name='ajaxa' onclick='checkDateValidity(#= Num #, \"#= Order #\", #= NumRef #, event)' data-ajax-update='\\#divBody' data-ajax='true' data-ajax-method='GET' data-ajax-mode='replace' href(='") + Url.Content("#=RedirectUrl#") + "?Num =#=Num#&Order=#=Order#&NumRef=#=NumRef#&TypeDocumentSap=#=TypeDocumentSap#' data-ajax-loading='\\#ajax-loader' >#=ClientName#< /a >"); columns.Bound(e => e.Num).Title(@Resource.num); columns.Bound(e => e.Order).Title(@Resource.order); columns.Bound(e => e.ClientCode).Title(@Resource.codeClient); columns.Bound(e => e.ClientName).Title(@Resource.clientName); columns.Bound(e => e.Date).ClientTemplate("#= kendo.toString(Date, \"dd/MM/yyyy\") #").Title(@Resource.date); columns.Bound(e => e.Qta).Title(@Resource.quantity); columns.Bound(e => e.Status).Title(@Resource.status); }) .Pageable() .Sortable() .ClientDetailTemplateId("template") .Scrollable(scr => scr.Height(430)) .Filterable(s=>s.Enabled(false)) .DataSource(dataSource => dataSource .Ajax() .PageSize(sqlsession.PageSize) .Read(read => read .Action("LoadData", "Search") // Set the action method which will return the data in JSON format .Data("additionalData") ) .ServerOperation(true) ) ) </ div >

In above code LoadData action is called in search controller and which parameter is passed by Data property of grid using javascript function as per below code, Here we define the additionalData function for passing the data for parameter to load the grid.

function additionalData() { return { num: $('#num').val(), date: $('#date').val(), clientName: $('#clientName').val(), codeClient: $('#codeClient').val(), brand: $('#brand').val(), order: $('#order').val(), Status: $('#Status :selected').val() }; }

4. Script Code for Client Detail Temple (Sub Grid) :-

For display sub grid (client detail temple) based on above data of grid we have to write below script and call for Kendo ().grid () function and pass the model to fetch the data. Also give the name, columns and Data source with page size properties and read action as per above grid to the client Template as per below Code.

< script id="template" type="text/kendo-tmpl" > @(Html.Kendo().Grid<ContractSap>() .Name("grid_#=Num##=Order#") .Columns(columns => { columns.Bound(o => o.Quantity); columns.Bound(o => o.Brand); columns.Bound(o => o.Num); columns.Bound(o => o.Order); }) .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Read(read => read.Action("BindBrands", "Search", new { Num "#=Num#", Order = "#=Order#" })) ) .ToClientTemplate() ) </ script >

Here in above sub grid we fill the data from contractsap model with reference to the above grid data. For that we need BindBrands action method in search controller with parameter as per above code.

5. Controller Action method for fill data in Grid and Sub Grid (Client Detail Template):-

Below are the Controller action methods for fill the data in grid, for fill the main grid LoadData action method is called and for fill sub grid Bindbrands method is called in search controller as shown in below code.

/// < summary > /// For Load data in grid /// < /summary > /// < param name="request">is data request</ param > /// < param name="num">is num</ param > /// < param name="date">is date</ param > /// < param name="clientName">is clientname</ param > /// < param name="codeClient">is codeclient</ param > /// < param name="brand">is brand</ param > /// < param name="order">is order</ param > /// < param name="Status">is status</ param > /// < returns >List of ContractSap</ returns > public ActionResult LoadData([DataSourceRequest]DataSourceRequest request, string num, string date, string clientName, string codeClient, string brand, string order, string Status) { List< ContractSap > list = new List< ContractSap >(); try { DateTime? dt = null; if (!string.IsNullOrEmpty(date)) { dt = CommonUtil.Converter.Conversions.ToDateTime(date); } int count = 0; count = ContractSap.GetFilterContractSapNumAuthCount(num, clientName, codeClient, brand, order, Status, dt); list = ContractSap.GetFilterContractSapNumAuth(num, clientName, codeClient, brand, order, Status, dt, request.Page, request.PageSize); if (list == null) list = new List< ContractSap >(); var result = new DataSourceResult() { Data = list, Total = count }; return Json(result, JsonRequestBehavior.AllowGet); } catch (Exception ex) { if (log.IsErrorEnabled) log.Error(ex.Message, ex); return Json(list, JsonRequestBehavior.AllowGet); } }

Here In above action method, we got the list of contractsap data in List that convert into Json format that pass in view, result display as per below screenshots.

/// < summary > /// for Bind Brands /// < /summary > /// < param name="request">is data request</ param > /// < param name="Num">is num</ param > /// < param name="Order">is Order</ param > /// < returns >list of ContractPosSap </ returns > public ActionResult BindBrands([DataSourceRequest]DataSourceRequest request, string Num, string Order) { List< ContractPosSap > list = new List< ContractPosSap >(); try { list = ContractPosSap.GetBrandQuantityByKey(Num, Order); if (list == null) list = new List< ContractPosSap >(); DataSourceResult result = list.ToDataSourceResult(request); return Json(result, JsonRequestBehavior.AllowGet); } catch (Exception ex) { if (log.IsErrorEnabled) log.Error(ex.Message, ex); return Json(list, JsonRequestBehavior.AllowGet); } }

As per above controller action call method we got the sub grid result from contractpossap data based on num and order parameter in main grid. Here we create custom Sub grid using client Detail template in kendo UI grid.

6. Result of the Kendo Grid:

1: Kendo UI Grid Data Load:-

2: Sub Grid (Client Detail Template):-

7. Advantages of Kendo Grid.

1. Ultimate performance gives to UI with minimum resources and easy to use in MVC based application.

2. Here In Kendo UI we use DataSource component is an abstraction for using local (arrays of JavaScript objects) or remote (XML, JSON, JSONP) data. It fully supports CRUD (create, read, update, delete) data operations and provides both local and server-side support for sorting, paging, filtering, grouping, and aggregates.

Conclusion

Our expert .net developers team has designed this technical document after deep research and practical work experience. We are 100 percent sure it will help global .net users and .net communities who are seeking valuable information on .net platform. In case, you still face any issues then you can freely contact our asp.net development & Java development company for further assistance. At Aegis, we are putting maximum effort during designing of any technical document so that it can help .net users prominently

For further information, mail us at [email protected]