How To Insert Data Into Kendo Grid MVC From Input Control

0
97

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.

 

SHARE
Previous articleBind Menu And Sub Menu Dynamically In ASP.NET MVC From Database Using LINQ
Next articleMultiple Ways To Bind Data To Kendo Grid In MVC
Currently working as a Software Engineer in MNC company. Having working knowledge of technologies like ASP.NET, MVC 5.0, C#, Kendo UI, KnockOut.Js, JavaScript, SQL Server 2012, HTML5 etc. He had conducted more than 80 hands on Seminars, Workshops for College, Schools and Training Institutes. He blog at http://www.c-sharpcorner.com/members/rupesh-kahane2

LEAVE A REPLY

Please enter your comment!
Please enter your name here