ASP.NET

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.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Kendo UI Application</title>  
  5.     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
  6.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />  
  7.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />  
  8.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />  
  9.     <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />  
  10.     <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>  
  11.     <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>  
  12.     <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>  
  13.     <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>  
  14. </head>  
  15. <body>  
  16.     <header>  
  17.         <div class="content-wrapper">  
  18.             <div class="float-left">  
  19.                 <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>  
  20.             </div>  
  21.             <div class="float-right">  
  22.                 <nav>  
  23.                     <ul id="menu">  
  24.                         <li>@Html.ActionLink("Home", "Index", "Home")</li>  
  25.                         <li>@Html.ActionLink("About", "About", "Home")</li>  
  26.                         <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
  27.                     </ul>  
  28.                 </nav>  
  29.             </div>  
  30.         </div>  
  31.     </header>  
  32.     <div id="body">  
  33.         @RenderSection("featured", required: false)  
  34.         <section class="content-wrapper main-content clear-fix">  
  35.             @RenderBody()  
  36.         </section>  
  37.     </div>  
  38.     <footer>  
  39.         <div class="content-wrapper">  
  40.             <div class="float-left">  
  41.                 <p>© @DateTime.Now.Year - My Telerik MVC Application</p>  
  42.             </div>  
  43.         </div>  
  44.     </footer>  
  45. </body>  
  46. </html>  
Now, add HomeController in Controller. Add View by right clicking on Action Method Index. 
  1. public ActionResult Index()  
  2.      {  
  3.          return View();  
  4.      }  
  5.   
  6.      public ActionResult postData(Distributor objDistributor)  
  7.      {  
  8.          var distributorName = objDistributor.DistributorName;  
  9.          var productList = JsonConvert.DeserializeObject<DataTable>(objDistributor.ProductList[0]);  
  10.          // you can save this records into a tables  
  11.          return Content("Success");  
  12.      }  
Step 2

Create Model in "Models" folder and name it as Distributor.

Add properties into this Model as below. 
  1. public class Distributor  
  2.     {  
  3.         public string DistributorName { get; set; }  
  4.         public string ProductName { get; set; }  
  5.   
  6.         public int? Price { get; set; }  
  7.   
  8.         public string[] ProductList { get; set; }  
  9.     }  
Step 3: Now, in your View, add three Text boxes, two buttons and one Kendo Grid, as described below.
  1. @model Master_Detail_Entry.Models.Distributor    
  2. @using Kendo.Mvc.UI    
  3. @using Kendo.Mvc.Extensions    
  4. @{    
  5.     ViewBag.Title = "Index";    
  6.     Layout = "~/Views/Shared/_Layout.cshtml";    
  7. }    
  8.     
  9. @using (Html.BeginForm("postData", "Home", FormMethod.Post))    
  10. {    
  11.     @Html.HiddenFor(model => model.ProductList)    
  12.     <div class="row">    
  13.         <div style="text-align:left">    
  14.             Distributor Name : @(Html.Kendo().TextBoxFor(m => m.DistributorName)    
  15.                 .Name("DistributorName")    
  16.                 .HtmlAttributes(new { placeholder = "Distributor Name" })    
  17.             )    
  18.         </div>    
  19.     </div>    
  20.     
  21.     <div>    
  22.         <div style="text-align:left">    
  23.             Product Name : @(Html.Kendo().TextBoxFor(m => m.ProductName)    
  24.                 .Name("ProductName")    
  25.                 .HtmlAttributes(new { placeholder = "Product Name" })    
  26.             )    
  27.         </div>    
  28.         <div style="text-align:left">    
  29.             Product Price :  @(Html.Kendo().TextBoxFor(m => m.Price)    
  30.                 .Name("Price")    
  31.                 .HtmlAttributes(new { placeholder = "Product Price" })    
  32.             )    
  33.         </div>    
  34.     </div>    
  35.     <button type="button" id="btnSaveGrid">Add Product</button>    
  36.     <br />    
  37.     <br />    
  38.     <div id="divProductGrid">    
  39.         @(Html.Kendo().Grid<Master_Detail_Entry.Models.Distributor>()    
  40.                         .Name("grid")    
  41.                         .Columns(columns =>    
  42.                         {    
  43.                             columns.Bound(c => c.ProductName).Width(20);    
  44.                             columns.Bound(c => c.Price).Width(20);    
  45.                         })    
  46.                         .HtmlAttributes(new { style = "height: 350px; width: 280px;" })    
  47.                         .Scrollable()    
  48.                         .Sortable()    
  49.                         .Resizable(resizable => resizable.Columns(false))    
  50.                         .Pageable(pageable => pageable    
  51.                         .Refresh(true)    
  52.                         .PageSizes(true)    
  53.                         .ButtonCount(5))    
  54.                         .DataSource(dataSource => dataSource    
  55.                         .Ajax()    
  56.                         .PageSize(20)    
  57.                         )    
  58.         )    
  59.     </div>    
  60.     <input type="submit" value="Add To Database" />    
  61. }    
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. 
  1. <script>  
  2.     $("#btnSaveGrid").click(function () {  
  3.         var productName = $('#ProductName').val();  
  4.         var price = $('#Price').val();  
  5.         if (productName == "" || price == "") {  
  6.             alert("Please fill all input fields");  
  7.         }  
  8.         var grid = $("#grid").data("kendoGrid");  
  9.         var datasource = grid.dataSource;  
  10.         datasource.insert({ ProductName: productName, Price: price });  
  11.         var grid = $("#grid").data("kendoGrid");  
  12.         var currentData = grid.dataSource.data();  
  13.         var newRecords = [];  
  14.         for (var i = 0; i < currentData.length; i++) {  
  15.             newRecords.push(currentData[i].toJSON());  
  16.         }  
  17.         $("#ProductList").val(JSON.stringify(newRecords));  
  18.     });  
  19. </script>  
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.



 
 
Summary

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs