1
Reply

Insert Input Control,Grid Values on button click in Kendo UI

Rupesh Kahane

Rupesh Kahane

Dec 28 2016 6:48 AM
464
I have a small application created using Kendo UI MVC .
 
I have following UI as like
 
 
There are some fields on above UI. Some suppliers are supplying material.
Single supplier can supply n number of material.
 
When I click on Add to Kendo Grid then only product details are storing into a grid with foreign key reference of Supplier Master.
 
So how can I post whole data into two different tables on click event of Insert Into Database  as like
 
 
Bellow is my code
  1. @using Kendo.Mvc.UI  
  2. @using Kendo.Mvc.Extensions  
  3. @model KendoUIApp3.ViewModel.ProductViewModel  
  4. @{  
  5.     ViewBag.Title = "Index";  
  6.     Layout = "~/Views/Shared/_Layout.cshtml";  
  7. }  
  8. <div class="row">  
  9.     <div class="col-md-12">  
  10.         <div class="input-group">  
  11.             @Html.LabelFor(model => model.Id)  
  12.             @Html.EditorFor(model => model.Id)  
  13.   
  14.             @Html.LabelFor(model => model.Name)  
  15.             @Html.EditorFor(model => model.Name)  
  16.   
  17.             @Html.LabelFor(model => model.Mobile)  
  18.             @Html.EditorFor(model => model.Mobile)  
  19.   
  20.             @Html.LabelFor(model => model.City)  
  21.             @Html.EditorFor(model => model.City)  
  22.         </div>  
  23.         <br />  
  24.         <div class="col-md-12">  
  25.             <div class="input-group">  
  26.                 @Html.LabelFor(model => model.Product_Name)  
  27.                 @Html.EditorFor(model => model.Product_Name)  
  28.   
  29.                 @Html.LabelFor(model => model.Price)  
  30.                 @Html.EditorFor(model => model.Price)  
  31.   
  32.                 @Html.LabelFor(model => model.Quantity)  
  33.                 @Html.EditorFor(model => model.Quantity)  
  34.   
  35.                 @Html.LabelFor(model => model.Total)  
  36.                 @Html.EditorFor(model => model.Total)  
  37.             </div>  
  38.         </div>  
  39.     <br />  
  40.     <div class="col-md-6">  
  41.         <div class="input-group">  
  42.             <input type="button" value="submit" id="btnAddToGrid">  
  43.         </div>  
  44.     </div>  
  45. </div>  
  46. <br />  
  47.     <button name="btnSaveGrid" id="btnSaveGrid">Insert Into Database</button>  
  48.     <br />  
  49.     <br />  
  50. <div>  
  51.     @(Html.Kendo().Grid<KendoUIApp3.ViewModel.ProductViewModel>()  
  52.         .Name("Grid")  
  53.         .Columns(columns =>  
  54.         {  
  55.             columns.Bound(c => c.Id).Width(20);  
  56.             columns.Bound(c => c.Product_Name).Width(30);  
  57.             columns.Bound(c => c.Price).Width(20);  
  58.             columns.Bound(c => c.Quantity).Width(20);  
  59.             columns.Bound(c => c.Total).Width(20);  
  60.         })  
  61.         .HtmlAttributes(new { style = "height: 350px;width: 800px;" })  
  62.         .Scrollable()  
  63.         .Groupable()  
  64.         .Sortable()  
  65.         .Pageable(pageable => pageable  
  66.             .Refresh(true)  
  67.             .PageSizes(true)  
  68.             .ButtonCount(5))  
  69.         .DataSource(dataSource => dataSource  
  70.             .Ajax()  
  71.             .PageSize(20)  
  72.         )  
  73.     )  
  74. </div>  
  75. </div>     
  76.   
  77. <script>  
  78.     $("#btnAddToGrid").click(function () {  
  79.         var id = $('#Id').val();  
  80.         var name = $('#Name').val();  
  81.         var pName = $('#Product_Name').val();  
  82.         var price = $('#Price').val();  
  83.         var qty = $('#Quantity').val();  
  84.         var total = $('#Total').val();  
  85.         if (name == "" || pName == "") {  
  86.             alert("Please fill all input fields");  
  87.         }  
  88.         var grid = $("#Grid").data("kendoGrid");  
  89.         var datasource = grid.dataSource;  
  90.         datasource.insert({ Id:id,Name: name, Product_Name: pName, Price: price, Quantity: qty, Total: total });  
  91.     });  
  92. </script>  
 My Model is 
  1. public class ProductViewModel  
  2.     {  
  3.         public int Id { getset; }  
  4.         public string Name { getset; }  
  5.         public string Mobile { getset; }  
  6.         public string City { getset; }  
  7.   
  8.         [Display(Name= "Product Name")]  
  9.         public string Product_Name { getset; }  
  10.         public string Price { getset; }  
  11.         public string Quantity { getset; }  
  12.         public string Total { getset; }  
  13.     }  
Please give me some suggestion
 
 

Answers (1)