Kendo Mvc Grid Custom Binding Read Again

• 
• Updated date Dec 04, 2020

• 235k
• 4

In this article, we will learn how to bind information to Kendo Grid in MVC using multiple ways.

Introduction

Many times, while working with Grid, nosotros need to testify the event into a GridView in different situations.

What is Kendo Filigree?

The Kendo UI Filigree is a powerful widget that allows y'all to visualize and edit information via its table representation. It provides many options, such as paging, sorting, filtering, grouping, and editing, which decide the way data is presented and manipulated.

The Filigree can be leap to local or remote data by using the Kendo UI DataSource component.

Scenario I Bind data to Kendo Filigree by using AJAX Read action method.

Scenario II Alter the datasource on change result of any HTML controls.

Scenario I

Unremarkably, a developer can bind the data to Grid past using AJAX Read method.

This read method is ActionResult method in MVC which volition return JSON DataSourceResult & direclty bind the data to Grid.

Note

As well, the programmer can pass parameters to this read method. Suppose below is our read method.

1. Read(read => read.Action( "BindGrid" , "Home" ).Data( "SortByCompanyId" ))

In the above line, my JavaScript part proper name is SortByCompanyId which volition return company id. On that footing, nosotros can pass parameter to our action method in Controller.

1. public  ActionResult BindGrid([DataSourceRequest]DataSourceRequest request, string  companyId)
2. {
4. }

Our JavaScript role is like the following.

1. <script type= "text/javascript" >
2. function  SortByCompanyId() {
3. var  cId = 25;
4. render  {
5.             companyId: cId
6.         }
7.     }
8. </script>

Step 1Create a Model, give it a name as Company, and declare some backdrop into it.

1. public class  Company
2. {
3. public int  Id { get ; set ; }
4. public string  Proper name { get ; set ; }
5. public int ? CompanyId { get ; gear up ; }
6. }

Step 2Now, create a Controller, give it name every bit HomeController. In this, create a action method as Alphabetize() which will return a View. On this View, write some code to bind data into the Grid View past using the above Model.

1. @model Grid.Models.Visitor
2. @using System.Web.Optimization
3. @using Kendo.Mvc.UI
4. @using Kendo.Mvc.Extensions
5. @{
6. Layout  = "~/Views/Shared/_Layout.cshtml" ;
7. }
8. < div way = "width:lx%;height:100%" >
9.     @(Html.Kendo().Grid< Grid.Models.Company > ()
10.         .Proper noun("BindGridUsingRead")
11.         .Columns(columns  = >
12.         {
13.             columns.Bound(p  = >  p.Id).Width(15).Championship("Sr. No.").Filterable(false);
14.             columns.Bound(p  = >  p.Name).Title("Proper name").Width(30).Filterable(false);
15.             columns.Bound(p  = >  p.CompanyId).Championship("Visitor Id").Width(15).Filterable(faux);
16.             })
17.            .Scrollable()
18.            .Pageable(ten  = >  10.PageSizes(new Listing < object >  { 10, twenty, 100, 200, 500, "all" }).Refresh(true))
19.             .Filterable(ftp  = >  ftp.Way(GridFilterMode.Row))
20.             .Resizable(resize  = >  resize.Columns(true))
21.             .HtmlAttributes(new {mode  = "height: 100%"  })
22.             .Selectable()
23.             .DataSource(dataSource  = >  dataSource
24.             .Ajax()
25.             .Model(model  = >  model.Id( p  = >  p.Id))
26.             .ServerOperation(simulated)
27.             .Read(read  = >  read.Activity("BindGrid", "Habitation"))
28.      )
29.     )
30. </ div >

Pace 3In Controller, write method which will bind the data to Grid by using Ajax Read activeness method. At present, write some action methods named equally BindGrid (to demark the JSON data to Grid). I am going to bind some difficult coded values by using action method GetGridData() using Company model which will render IEnumerable List.

1. public  ActionResult Index()
2. {
3. return  View();
4. }
6. public  ActionResult BindGrid([DataSourceRequest]DataSourceRequest request)
7. {
8. try
9.     {
10. decimal  companyId = 0;
11.         List<Models.Company> lst =new  Listing<Models.Company>();
12.         lst = GetGridData(Convert.ToInt32(companyId)).ToList();
13.         DataSourceResult result = lst.ToDataSourceResult(asking, p =>new  Models.Visitor
14.         {
15.             Id = p.Id,
16.             Name = p.Name,
17.             CompanyId = p.CompanyId,
18.         });
19. return  Json(result, JsonRequestBehavior.AllowGet);
20.     }
21. catch  (Exception ex)
22.     {
23.         var errorMsg = ex.Bulletin.ToString();
24. return  Json(errorMsg, JsonRequestBehavior.AllowGet);
25.     }
26. }
27. public  IEnumerable<Models.Company> GetGridData( decimal  companyId)
28. {
29.     List<Models.Company> objCmp =new  List<Models.Company>();
30.     List<Models.Company> listCompany =new  List<Models.Company>();
31.     objCmp.Add together(new  Models.Company() { Id = 1, Name = "Rupesh Kahane" , CompanyId = xx });
32.     objCmp.Add together(new  Models.Company() { Id = 2, Name = "Vithal Wadje" , CompanyId = 40 });
33.     objCmp.Add together(new  Models.Company() { Id = three, Name = "Jeetendra Gund" , CompanyId = 30 });
34.     objCmp.Add(new  Models.Company() { Id = iv, Name = "Ashish Mane" , CompanyId = 15 });
35.     objCmp.Add(new  Models.Company() { Id = 5, Name = "Rinku Kulkarni" , CompanyId = 18 });
36.     objCmp.Add(new  Models.Company() { Id = six, Name = "Priyanka Jain" , CompanyId = 22 });
37. if (companyId > 0)
38.     {
39.         listCompany = objCmp.ToList().Where(a => a.CompanyId <= companyId).ToList();
40. render  listCompany.AsEnumerable();
41.     }
42. render  objCmp.ToList().AsEnumerable();
43. }

Step 4Here is the outcome after running our solution.

Scenario II

While working with html controls or forms, there are some situations, like we need to bind the data to Filigree on modify event of controls or we need to apply some custom filters, on search push button click event, we are applying these filters that change the datasource on modify event of any html control.

Note

There is a congenital-in functionality every bit well to filter Grid information from column values. Hither, we are using custom filters.

Suppose, the user entered some integer value & we need the data where company id is less than input value in on alter event of control. So we take i textbox & volition write on change event lawmaking into a javascript by using transport.options.read method. We are passing read method URL & input value to out action method.

Step 1Equally I explained in scenario I, we are adding but one textbox &JS file which contains change event function to our View. Add together some JavaScript lawmaking above this which will incorporate bind grid method as -

1. <script type= "text/javascript" >
2. var  gridObject;
3. var  readURL = new  Array();
4.     readURL[0] ="/Habitation/BindGrid" ;
5.     readURL[1] ="/Habitation/BindGridOnSearch?companyId=" ;
6. </script>

Now, our View page will expect similar the post-obit.

1. @model Grid.Models.Company
2. @using Organization.Spider web.Optimization
3. @using Kendo.Mvc.UI
4. @using Kendo.Mvc.Extensions
5. @{
6. Layout  = "~/Views/Shared/_Layout.cshtml" ;
7. }
8. < script blazon = "text/javascript" >
9.     var gridObject;
10.     varreadURL  = new  Array();
11.     readURL[0] = "/Home/BindGrid";
12.     readURL[ane] = "/Home/BindGridOnSearch?companyId =";
13. </ script >
14. < div >
15. < div class = "box-header with-border" >
16. < div course = "col-xs-12" >
17. < div class = "col-xs-4 martop" way = "text-align:right;width:22%" >
18.                 @(Html.Kendo().TextBoxFor(model  = >  model.CompanyId)
19.                     .Proper noun("CompanyId")
20.                     .HtmlAttributes(new {placeholder  = "Search By Company Id" , @ autocomplete  = "off" , @ form  = "col-sm-12" , style  = "width:100%" , maxlength  = 200  })
21.                 )
22. </ div >
23. </ div >
24. </ div >
25. </ div >
26. < br />
28. < div style = "width:60%;tiptop:100%" >
29.     @(Html.Kendo().Grid< Filigree.Models.Company > ()
30.         .Name("BindGridUsingRead")
31.         .Columns(columns  = >
32.         {
33.             columns.Bound(p  = >  p.Id).Width(15).Championship("Sr. No.").Filterable(fake);
34.             columns.Bound(p  = >  p.Name).Title("Proper name").Width(30).Filterable(false);
35.             columns.Leap(p  = >  p.CompanyId).Title("Visitor Id").Width(xv).Filterable(false);
36.             })
37.            .Scrollable()
38.            .Pageable(x  = >  x.PageSizes(new Listing < object >  { 10, 20, 100, 200, 500, "all" }).Refresh(true))
39.             .Filterable(ftp  = >  ftp.Mode(GridFilterMode.Row))
40.             .Resizable(resize  = >  resize.Columns(true))
41.             .HtmlAttributes(new {style  = "height: 100%"  })
42.             .Selectable()
43.             .DataSource(dataSource  = >  dataSource
44.             .Ajax()
45.             .Model(model  = >  model.Id( p  = >  p.Id))
46.             .ServerOperation(fake)
47.             .Read(read  = >  read.Activity("BindGrid", "Dwelling house"))
48.      )
49.     )
50. </ div >
51. < script src = "~/Scripts/Custom/Home.js" > </ script >

Step 2Now, write lawmaking on change event of textbox into JavaScript Home.js file. In our JS file on windows.load method, we tin get data of Filigree into a our global variable.

1. $(window).load( role  () {
2.     gridObject = $("#BindGridUsingRead" ).information( "kendoGrid" );
3. });
5. $(certificate).set(function  () {
6.     $('#CompanyId' ).on( 'change' , part  () {
8. var  cmpId = $( "input[id='CompanyId']" ).val();
9.         gridObject.dataSource.ship.options.read.url = readURL[1] + cmpId;
10.         gridObject.dataSource.read();
11.     });
12. });

Step iiiWrite some code into Controller confronting these read methods.

1. public  ActionResult BindGridOnSearch([DataSourceRequest]DataSourceRequest request, string  companyId)
2. {
3. try
4.     {
5.         Listing<Models.Company> list =new  List<Models.Visitor>();
6.         list = GetGridData(Catechumen.ToInt32(companyId)).ToList();
7.         DataSourceResult result = listing.ToDataSourceResult(request, p =>new  Models.Visitor
8.         {
9.             Id = p.Id,
10.             Name = p.Name,
11.             CompanyId = p.CompanyId,
12.         });
13. return  Json(issue, JsonRequestBehavior.AllowGet);
14.     }
15. catch  (Exception ex)
16.     {
17.         var errorMsg = ex.Message.ToString();
18. return  Json(errorMsg, JsonRequestBehavior.AllowGet);
19.     }
20. }

Pace 4Here is the result after running our solution (if we enter 25 into input box).

Summary

In this article, you learned the basics of how to bind information to Kendo Grid in MVC using multiple methods.

johnsonroppin.blogspot.com

Source: https://www.c-sharpcorner.com/article/multiple-ways-to-bind-data-to-kendo-grid-in-mvc/

Share this post