How To Insert Data Into Kendo Grid MVC From Input Control

In this blog, you will learn 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.