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 { get; set; }
  5. public string Address { get; set; }
  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. }
  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)
  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>
  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.