1
Answer

Adding the dynamic row in ASP .net mvc jquery grid?

Photo of Singaravel Vela

Singaravel Vela
5y
2k
1
I  need to add the dynamic row in jquery datatable and in ajax success event. but i am getting the undefined method error. Please find the below code and help me to solve.
 
 
Controller:
  1. [HttpPost]  
  2.        public ActionResult SaveItems(Int32 customer, Int32 product, Int32 quantity, Int32 saleId)  
  3.        {  
  4.            if (saleId > 0)  
  5.            {  
  6.                TBL_Sale obj = new TBL_Sale();  
  7.                obj.CustomerId = customer;  
  8.                obj.CreatedBy = 1;  
  9.                obj.CreatedDate = DateTime.Now;  
  10.   
  11.                objDb.TBL_Sale.Add(obj);  
  12.                objDb.SaveChanges();  
  13.            }  
  14.   
  15.            TBL_SaleItems saleItemId = SaveIndividualItem(product, quantity, saleId);  
  16.            return View(saleItemId);  
  17.        }  
  18.   
  19.   
  20.        public TBL_SaleItems SaveIndividualItem(Int32 product, Int32 quantity, Int32 saleId)  
  21.        {  
  22.            TBL_Stock objStock = objDb.TBL_Stock.Where(w => w.ProductId == product).SingleOrDefault();  
  23.   
  24.            TBL_SaleItems obj = new TBL_SaleItems();  
  25.            obj.ProductId = product;  
  26.            obj.Qty = quantity;  
  27.            obj.SaleId = saleId;  
  28.            obj.PricePerQty = objStock.PricePerQty;  
  29.            obj.StockId = objStock.Id;  
  30.            obj.SuplierId = objStock.SupplierId;  
  31.            obj.Amount = objStock.PricePerQty * quantity;  
  32.            objDb.TBL_SaleItems.Add(obj);  
  33.            objDb.SaveChanges();  
  34.   
  35.            return obj;  
  36.        } 
 
 
 
 
 View Code:
  1. <style>  
  2.     /*.form-control{ 
  3.         width:70% !important; 
  4.     }*/  
  5. </style>  
  6.   
  7.   
  8.   
  9. @section Scripts {  
  10.   
  11.   
  12.     <script>  
  13.   
  14.   
  15.         var giCount = 1;  
  16.         var table = '';  
  17.   
  18.         $(function () {  
  19.   
  20.             table = $('#example').DataTable({  
  21.                 //responsive: true  
  22.             });  
  23.             debugger;  
  24.   
  25.             function fnClickAddRow() {  
  26.                 table.row.add([  
  27.                     giCount + ".1",  
  28.                     giCount + ".2",  
  29.                     giCount + ".3",  
  30.   
  31.                     giCount + ".4",  
  32.                     giCount + ".5",  
  33.                     giCount + ".6",  
  34.   
  35.                     giCount + ".7",  
  36.                     giCount + ".8",  
  37.                     giCount + ".9"  
  38.                 ]).draw(false);;  
  39.   
  40.                 giCount++;  
  41.             }  
  42.   
  43.            // new $.fn.dataTable.FixedHeader(table);  
  44.             //table.row.add([  
  45.             //      giCount + ".1",  
  46.             //      giCount + ".2",  
  47.             //      giCount + ".3",  
  48.   
  49.             //      giCount + ".4",  
  50.             //      giCount + ".5",  
  51.             //      giCount + ".6",  
  52.   
  53.             //      giCount + ".7",  
  54.             //      giCount + ".8",  
  55.             //      giCount + ".9"  
  56.             //]).draw(false);;  
  57.   
  58.              
  59.   
  60.   
  61.   
  62.             @*$('#txtSearch').typeahead({  
  63.                 hint: true,  
  64.                 highlight: true,  
  65.                 minLength: 1  
  66.                 , source: function (request, response) {  
  67.                     $.ajax({  
  68.                         url: '@Url.Action("New","Billing")',  
  69.                         data: "{ 'prefix': '" + request + "'}",  
  70.                         dataType: "json",  
  71.                         type: "POST",  
  72.                         contentType: "application/json; charset=utf-8",  
  73.                         success: function (data) {  
  74.                             debugger;  
  75.                             items = [];  
  76.                             map = {};  
  77.                             $.each(data.d, function (i, item) {  
  78.                                 var id = item.split('-')[1];  
  79.                                 var name = item.split('-')[0];  
  80.                                 map[name] = { id: id, name: name };  
  81.                                 items.push(name);  
  82.                             });  
  83.                             response(items);  
  84.                             $(".dropdown-menu").css("height", "auto");  
  85.                         },  
  86.                         error: function (response) {  
  87.                             alert(response.responseText);  
  88.                         },  
  89.                         failure: function (response) {  
  90.                             alert(response.responseText);  
  91.                         }  
  92.                     });  
  93.                 },  
  94.                 updater: function (item) {  
  95.                     $('[id*=hfCustomerId]').val(map[item].id);  
  96.                     return item;  
  97.                 }  
  98.             });*@  
  99.         });  
  100.          
  101.   
  102.   
  103.   
  104.         
  105.   
  106.         function SaveItems() {  
  107.             let customer = $('#txCustomer').val();  
  108.             let product = $('#txtProduct').val();  
  109.             let quantity = $('#txtQuantity').val();  
  110.   
  111.             let saleId = $('#hfSaleId').val();  
  112.   
  113.   
  114.             $.ajax({  
  115.                 url: '@Url.Action("SaveItems","Home")',  
  116.                 data: "{ 'customer': " + customer + ",'product':" + product + ",'quantity':" + quantity + ",'saleId':" + saleId + "}",  
  117.                 dataType: "json",  
  118.                 type: "POST",  
  119.                 contentType: "application/json; charset=utf-8",  
  120.                 success: function (data) {  
  121.                     fnClickAddRow();  
  122.                 },  
  123.                 error: function (response) {  
  124.                     alert(response.responseText);  
  125.                 }  
  126.             });  
  127.   
  128.   
  129.         }  
  130.   
  131.     </script>  
  132.   
  133. }  
  134.   
  135.   
  136. <style>  
  137.     #divTotal {  
  138.         font-size: 12px !important;  
  139.     }  
  140. </style>  
  141.   
  142.   
  143. <style type="text/css">  
  144.     .bs-example {  
  145.         font-family: sans-serif;  
  146.         position: relative;  
  147.         margin: 100px;  
  148.     }  
  149.   
  150.     .typeahead, .tt-query, .tt-hint {  
  151.         border: 2px solid #CCCCCC;  
  152.         border-radius: 8px;  
  153.         font-size: 22px; /* Set input font size */  
  154.         height: 30px;  
  155.         line-height: 30px;  
  156.         outline: medium none;  
  157.         padding: 8px 12px;  
  158.         width: 396px;  
  159.     }  
  160.   
  161.     .typeahead {  
  162.         background-color: #FFFFFF;  
  163.     }  
  164.   
  165.         .typeahead:focus {  
  166.             border: 2px solid #0097CF;  
  167.         }  
  168.   
  169.     .tt-query {  
  170.         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;  
  171.     }  
  172.   
  173.     .tt-hint {  
  174.         color: #999999;  
  175.     }  
  176.   
  177.     .tt-menu {  
  178.         background-color: #FFFFFF;  
  179.         border: 1px solid rgba(0, 0, 0, 0.2);  
  180.         border-radius: 8px;  
  181.         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  
  182.         margin-top: 12px;  
  183.         padding: 8px 0;  
  184.         width: 422px;  
  185.     }  
  186.   
  187.     .tt-suggestion {  
  188.         font-size: 22px; /* Set suggestion dropdown font size */  
  189.         padding: 3px 20px;  
  190.     }  
  191.   
  192.         .tt-suggestion:hover {  
  193.             cursor: pointer;  
  194.             background-color: #0097CF;  
  195.             color: #FFFFFF;  
  196.         }  
  197.   
  198.         .tt-suggestion p {  
  199.             margin: 0;  
  200.         }  
  201. </style>  
  202.   
  203. <script type="text/javascript">  
  204.   
  205.   
  206.   
  207.   
  208.   
  209.   
  210. </script>  
  211.   
  212.   
  213.   
  214.   
  215. <div class="container">  
  216.   
  217.     <form class="form-horizontal" action="/action_page.php">  
  218.         <br />  
  219.   
  220.         <div class="form-group">  
  221.   
  222.             <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">  
  223.   
  224.             <label class="control-label col-sm-1" for="txCustomer">Customer</label>  
  225.             <div class="col-md-8">  
  226.                 <input type="text" class="form-control" id="txCustomer" placeholder="Customer" name="Customer">  
  227.             </div>  
  228.             <div class="col-md-2">  
  229.                 <button type="submit" class="btn btn-default">Submit</button>  
  230.             </div>  
  231.   
  232.         </div>  
  233.         <div class="form-group">  
  234.   
  235.             <label class="control-label col-sm-1" for="txtProduct">Product</label>  
  236.   
  237.             <div class="col-md-2">  
  238.                 <input type="text" class="form-control" id="txtProduct" placeholder="Product Name" name="Product">  
  239.             </div>  
  240.   
  241.   
  242.             <label class="control-label col-sm-1" for="txtProductCode">Product</label>  
  243.   
  244.             <div class="col-md-2">  
  245.                 <input type="text" class="form-control" id="txtProductCode" placeholder="Product Code" name="ProductCode">  
  246.             </div>  
  247.   
  248.   
  249.             <label class="control-label col-sm-1" for="txtQuantity">Quantity</label>  
  250.   
  251.             <div class="col-md-2">  
  252.                 <input type="text" class="form-control" id="txtQuantity" placeholder="Quantity" name="Quantity">  
  253.             </div>  
  254.   
  255.             <div class="col-md-1">  
  256.                 <button type="button" onclick="return fnClickAddRow();" class="btn btn-default">Submit</button>  
  257.             </div>  
  258.         </div>  
  259.   
  260.     </form>  
  261.   
  262.     <div class="row">  
  263.         @Html.Partial("_BillingGrid")  
  264.     </div>  
  265.     <br />  
  266.   
  267.     <div class="row" id="divTotal">  
  268.   
  269.         <form class="form-horizontal" action="/action_page.php">  
  270.             <br />  
  271.   
  272.   
  273.             <div class="form-group">  
  274.   
  275.                 <label class="control-label col-sm-1" for="txtProduct">Cash Type</label>  
  276.   
  277.                 <div class="col-md-3">  
  278.                     <select class="form-control"></select>  
  279.                 </div>  
  280.   
  281.   
  282.                 <label class="control-label col-sm-1" for="txtProduct">Discount(%)</label>  
  283.   
  284.                 <div class="col-md-2">  
  285.                     <select class="form-control"></select>  
  286.                 </div>  
  287.   
  288.                 <label class="control-label col-sm-1" for="txtProductCode">Discount</label>  
  289.   
  290.                 <div class="col-md-1">  
  291.                     <input type="text" class="form-control" id="txtProductCode" placeholder="Product Code" name="ProductCode">  
  292.                 </div>  
  293.   
  294.                 <div class="col-md-1">  
  295.                     <button type="button" class="btn btn-default">Print</button>  
  296.                 </div>  
  297.   
  298.             </div>  
  299.             <div class="form-group">  
  300.   
  301.                 <label class="control-label col-sm-1" for="txtQuantity">Quantity</label>  
  302.   
  303.                 <div class="col-md-3">  
  304.                     <input type="text" class="form-control" id="txtQuantity" placeholder="Quantity" name="Quantity">  
  305.                 </div>  
  306.   
  307.                 <label class="control-label col-sm-1" for="txtItems">Items</label>  
  308.   
  309.                 <div class="col-md-2">  
  310.                     <input type="text" class="form-control" id="txtItems" placeholder="Items" name="Items">  
  311.                 </div>  
  312.   
  313.                 <label class="control-label col-sm-1" for="txtAmount">Amount</label>  
  314.   
  315.                 <div class="col-md-1">  
  316.                     <input type="text" class="form-control" id="txtAmount" placeholder="Total Amount" name="Total Amount">  
  317.                 </div>  
  318.   
  319.                 <div class="col-md-1">  
  320.                     <button type="button" class="btn btn-default">Cancel</button>  
  321.                 </div>  
  322.             </div>  
  323.   
  324.         </form>  
  325.   
  326.   
  327.     </div>  
  328.   
  329. </div>  

Answers (1)

Next Recommended Forum