Master Details View Using Telerik Grid For ASP.NET MVC


Step 1

Create a new MVC Empty Project using Visual Studio. This example shows that one distributor can supply multiple products and we are passing all the information from View to Controller so we can store the master and details entry into different tables.

Add new Layout.cshtml into shared folder. Add references of Kendo, CSS, and JavaScript into this Layout.cshtml.

<!DOCTYPE html>  
    <title>Kendo UI Application</title>  
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
    <link href="" rel="stylesheet" type="text/css" />  
    <link href="" rel="stylesheet" type="text/css" />  
    <link href="" rel="stylesheet" type="text/css" />  
    <link href="" rel="stylesheet" type="text/css" />  
    <script src=""></script>  
    <script src=""></script>  
    <script src=""></script>  
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>  
        <div class="content-wrapper">  
            <div class="float-left">  
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>  
            <div class="float-right">  
                    <ul id="menu">  
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>  
                        <li>@Html.ActionLink("About", "About", "Home")</li>  
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
    <div id="body">  
        @RenderSection("featured", required: false)  
        <section class="content-wrapper main-content clear-fix">  
        <div class="content-wrapper">  
            <div class="float-left">  
                <p>© @DateTime.Now.Year - My Telerik MVC Application</p>  
Now, add HomeController in Controller. Add View by right clicking on Action Method Index.
public ActionResult Index()  
         return View();  
     public ActionResult postData(Distributor objDistributor)  
         var distributorName = objDistributor.DistributorName;  
         var productList = JsonConvert.DeserializeObject<DataTable>(objDistributor.ProductList[0]);  
         // you can save this records into a tables  
         return Content("Success");  

Step 2

Create Model in “Models” folder and name it as Distributor.

Add properties into this Model as below.

public class Distributor  
        public string DistributorName { get; set; }  
        public string ProductName { get; set; }  
        public int? Price { get; set; }  
        public string[] ProductList { get; set; }  


Step 3: Now, in your View, add three Text boxes, two buttons and one Kendo Grid, as described below.

@model Master_Detail_Entry.Models.Distributor    
@using Kendo.Mvc.UI    
@using Kendo.Mvc.Extensions    
    ViewBag.Title = "Index";    
    Layout = "~/Views/Shared/_Layout.cshtml";    
@using (Html.BeginForm("postData", "Home", FormMethod.Post))    
    @Html.HiddenFor(model => model.ProductList)    
    <div class="row">    
        <div style="text-align:left">    
            Distributor Name : @(Html.Kendo().TextBoxFor(m => m.DistributorName)    
                .HtmlAttributes(new { placeholder = "Distributor Name" })    
        <div style="text-align:left">    
            Product Name : @(Html.Kendo().TextBoxFor(m => m.ProductName)    
                .HtmlAttributes(new { placeholder = "Product Name" })    
        <div style="text-align:left">    
            Product Price :  @(Html.Kendo().TextBoxFor(m => m.Price)    
                .HtmlAttributes(new { placeholder = "Product Price" })    
    <button type="button" id="btnSaveGrid">Add Product</button>    
    <br />    
    <br />    
    <div id="divProductGrid">    
                        .Columns(columns =>    
                            columns.Bound(c => c.ProductName).Width(20);    
                            columns.Bound(c => c.Price).Width(20);    
                        .HtmlAttributes(new { style = "height: 350px; width: 280px;" })    
                        .Resizable(resizable => resizable.Columns(false))    
                        .Pageable(pageable => pageable    
                        .DataSource(dataSource => dataSource    
    <input type="submit" value="Add To Database" />    


Step 4

Write JavaScript code to add multiple records into Grid so that on submit button click, we can pass this list of products to Controller using Model.

In JavaScript, here, we are going to create array and add each entry into this.

    $("#btnSaveGrid").click(function () {  
        var productName = $('#ProductName').val();  
        var price = $('#Price').val();  
        if (productName == "" || price == "") {  
            alert("Please fill all input fields");  
        var grid = $("#grid").data("kendoGrid");  
        var datasource = grid.dataSource;  
        datasource.insert({ ProductName: productName, Price: price });  
        var grid = $("#grid").data("kendoGrid");  
        var currentData =;  
        var newRecords = [];  
        for (var i = 0; i < currentData.length; i++) {  


Step 5

Now, run the application. Enter some information and click on “Submit”. If we put debugger into Controller, we will get the records as below.


In this article, you learned the basics of how to get Master Details View entries from View to Controller using Telerik Grid in ASP.NET MVC.


Previous articleASP.NET MVC Ajax.BeginForm AjaxOptions OnSuccess, OnFailure
Next articleDate Time Formats Used in C# 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


Please enter your comment!
Please enter your name here