How To Insert Data Into Kendo Grid MVC From Input Control

Introduction

In this blog you will learn how to insert data from input controls into Kendo Grid MVC
 
Step 1

Create a new project in VS 2015 using Kendo UI ASP.NET MVC 5 Application

Step 2

You will get folder structure and Kendo UI reference into _Layout.cshtml. Now create a new controller. For Action method Index, add new view.
 
Now create a View Model as to get set data from input controls, 
  1. public class EmployeeViewModel  
  2.     {  
  3.         public string Name { getset; }  
  4.   
  5.         public string Address { getset; }  
  6.     }  
Step 3

Add the below code to Index.cshtml, 
  1. @using Kendo.Mvc.UI  
  2. @using Kendo.Mvc.Extensions  
  3. @model KendoUIApp3.ViewModel.EmployeeViewModel  
  4. @{  
  5.     ViewBag.Title = "Index";  
  6.     Layout = "~/Views/Shared/_Layout.cshtml";  
  7. }  
  8.   
  9. <div class="row">  
  10.     <div class="col-md-12">  
  11.         <div class="input-group">  
  12.            @Html.LabelFor(model => model.Name)  
  13.             @Html.EditorFor(model => model.Name)  
  14.   
  15.             @Html.LabelFor(model => model.Address)  
  16.             @Html.TextBoxFor(model => model.Address)  
  17.         </div>  
  18.     </div>  
  19.     <br />  
  20.     <div class="col-md-6">  
  21.         <div class="input-group">  
  22.             <input type="button" value="submit" id="btnAddToGrid">  
  23.         </div>  
  24.     </div>  
  25. </div>  
  26. <br />  
  27. <div>  
  28.     @(Html.Kendo().Grid<KendoUIApp3.ViewModel.EmployeeViewModel>()  
  29.         .Name("MyKendoGrid")  
  30.         .Columns(columns =>  
  31.         {  
  32.             columns.Bound(c => c.Name).Width(20);  
  33.             columns.Bound(c => c.Address).Width(20);  
  34.         })  
  35.         .HtmlAttributes(new { style = "height: 350px;width: 500px;" })  
  36.         .Scrollable()  
  37.         .Groupable()  
  38.         .Sortable()  
  39.         .Pageable(pageable => pageable  
  40.             .Refresh(true)  
  41.             .PageSizes(true)  
  42.             .ButtonCount(5))  
  43.         .DataSource(dataSource => dataSource  
  44.             .Ajax()  
  45.             .PageSize(20)  
  46.         )  
  47.     )  
  48. </div>  
  49.   
  50. <script>  
  51.     $("#btnAddToGrid").click(function () {  
  52.         var name = $('#Name').val();  
  53.         var add = $('#Address').val();  
  54.         if (name == "" || add == "") {  
  55.             alert("Please fill all input fields");  
  56.         }  
  57.         var grid = $("#MyKendoGrid").data("kendoGrid");  
  58.         var datasource = grid.dataSource;  
  59.         datasource.insert({ Name: name, Address: add });  
  60.     });  
  61. </script>  
I have taken input fields values in Javascript code and added those values to Kendo Grid

Step 4

Run this application and you will see,

 
I hope you have enjoyed this blog.
Ebook Download
View all
Learn
View all