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>
<html>
<head>
<title>Kendo UI Application</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My Telerik MVC Application</p>
</div>
</div>
</footer>
</body>
</html>

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)
.Name("DistributorName")
.HtmlAttributes(new { placeholder = "Distributor Name" })
)
</div>
</div>
<div>
<div style="text-align:left">
Product Name : @(Html.Kendo().TextBoxFor(m => m.ProductName)
.Name("ProductName")
.HtmlAttributes(new { placeholder = "Product Name" })
)
</div>
<div style="text-align:left">
Product Price : @(Html.Kendo().TextBoxFor(m => m.Price)
.Name("Price")
.HtmlAttributes(new { placeholder = "Product Price" })
)
</div>
</div>
<button type="button" id="btnSaveGrid">Add Product</button>
<br />
<br />
<div id="divProductGrid">
@(Html.Kendo().Grid<Master_Detail_Entry.Models.Distributor>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ProductName).Width(20);
columns.Bound(c => c.Price).Width(20);
})
.HtmlAttributes(new { style = "height: 350px; width: 280px;" })
.Scrollable()
.Sortable()
.Resizable(resizable => resizable.Columns(false))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
)
)
</div>
<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.

<script>
$("#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 = grid.dataSource.data();
var newRecords = [];
for (var i = 0; i < currentData.length; i++) {
newRecords.push(currentData[i].toJSON());
}
$("#ProductList").val(JSON.stringify(newRecords));
});
</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.