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, 

public class EmployeeViewModel
    {
        public string Name { get; set; }

        public string Address { get; set; }
    }

Step 3

Add the below code to Index.cshtml, 

@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@model KendoUIApp3.ViewModel.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row">
    <div class="col-md-12">
        <div class="input-group">
           @Html.LabelFor(model => model.Name)
            @Html.EditorFor(model => model.Name)

            @Html.LabelFor(model => model.Address)
            @Html.TextBoxFor(model => model.Address)
        </div>
    </div>
    <br />
    <div class="col-md-6">
        <div class="input-group">
            <input type="button" value="submit" id="btnAddToGrid">
        </div>
    </div>
</div>
<br />
<div>
    @(Html.Kendo().Grid<KendoUIApp3.ViewModel.EmployeeViewModel>()
        .Name("MyKendoGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width(20);
            columns.Bound(c => c.Address).Width(20);
        })
        .HtmlAttributes(new { style = "height: 350px;width: 500px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
        )
    )
</div>

<script>
    $("#btnAddToGrid").click(function () {
        var name = $('#Name').val();
        var add = $('#Address').val();
        if (name == "" || add == "") {
            alert("Please fill all input fields");
        }
        var grid = $("#MyKendoGrid").data("kendoGrid");
        var datasource = grid.dataSource;
        datasource.insert({ Name: name, Address: add });
    });
</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.