Skip to main content

Kendo UI adding row at Runtime(Client Side)


You can easily add item in you kendo grid in client side.

In your button or other control:


  <table style="clear: left">  
        <tr>  
         <td>  
           @Html.LabelFor(model => model.JV_ACCOUNT_CODE)  
         </td>  
         <td>  
           @Html.TextBoxFor(model => model.JV_ACCOUNT_CODE)  
           @Html.ValidationMessageFor(model => model.JV_ACCOUNT_CODE)  
         </td>  
         <td>  
           @Html.LabelFor(model => model.JV_CurrentBalance)  
         </td>  
         <td>  
            @Html.TextBoxFor(model => model.JV_CurrentBalance)  
           @Html.ValidationMessageFor(model => model.JV_CurrentBalance)  
         </td>  
       </tr>  
     </table>  
     <br />   
     <table>  
        <tr>  
         <td>  
           @Html.LabelFor(model => model.JV_NOTES)  
       </td>  
       <td>  
         @Html.TextBoxFor(model => model.JV_NOTES)  
         @Html.ValidationMessageFor(model => model.JV_NOTES)  
       </td>  
       <td>  
         @Html.LabelFor(model => model.JV_DATE)  
       </td>  
       <td>  
         @Html.EditorFor(model => model.JV_DATE)  
       @Html.ValidationMessageFor(model => model.JV_DATE)  
     </td>  
     </tr>  
          <tr>  
         <td>  
           @Html.LabelFor(model => model.JV_AMOUNT)  
       </td>  
       <td>  
         @Html.TextBoxFor(model => model.JV_AMOUNT)  
         @Html.ValidationMessageFor(model => model.JV_AMOUNT)  
       </td>  
       <td>  
          @Html.DropDownList("JV_Transaction_TYPE", Model.ddlTransactionTypeType, new { @style = "width:150px" })  
           @Html.ValidationMessageFor(model => model.JV_Transaction_TYPE)  
           @Html.HiddenFor(model => model.JV_Transaction_TYPE)  
       </td>  
       <td>  
         <a class="btn btn-mini btn-primary" id="lnkAddToGrid" href='#' >  
           <i class="icon-plus"></i>Add   
         </a>  
     </td>  
     </tr>  
     </table>  
     <div id="CustomerPackageChannelKendoGridAdd" >  
         </div>

Id Change event will add item in to grid


  var currentId = 0;  



  $("#lnkAddToGrid").click(function (e) {  
     e.preventDefault();  
           // Get the Kendo Grid  
     var dataSource = $("#CustomerPackageChannelKendoGridAdd").data("kendoGrid").dataSource;  
           // Get value from another field  
     var _JV_ACCOUNT_ID = $('#JV_ACCOUNT_ID').val();  
     var _JV_ACCOUNT_NAME = $('#JV_ACCOUNT_NAME').val();  
     var _JV_ACCOUNT_CODE = $('#JV_ACCOUNT_CODE').val();  
     var _JV_NOTES = $('#JV_NOTES').val();  
     var _JV_DATE = $('#JV_DATE').val();  
     var type = $('#JV_Transaction_TYPE').val();  
    // You can set condition if required for you  
     if (CheckExistingData(gridDataAdd, _JV_ACCOUNT_ID) == false) {  
       currentId += 1;  
       dataSource.add(  
         {  
            id: currentId,  
            JV_ACCOUNT_ID: _JV_ACCOUNT_ID,  
            JV_ACCOUNT_NAME: _JV_ACCOUNT_NAME  
           , JV_ACCOUNT_CODE: _JV_ACCOUNT_CODE  
           , JV_NOTES: _JV_NOTES  
           , JV_DATE: _JV_DATE  
           , JV_DEBIT_AMOUNT: _JV_DEBIT_AMOUNT  
           , JV_CREDIT_AMOUNT: _JV_CREDIT_AMOUNT  
         });  
     }  
           // (Optional: If you want to sum any specific grid column value & set it another textbox field)  
     var dataSource1 = $("#CustomerPackageChannelKendoGridAdd").data("kendoGrid").dataSource.data();  
     var dataSource2 = $("#CustomerPackageChannelKendoGridAdd").data("kendoGrid").dataSource.data();  
     var totaldebit = 0;  
     var v;  
     for (var i = 0; i < dataSource1.length; i++) {  
       v = parseFloat(dataSource1[i].JV_DEBIT_AMOUNT);  
       if (!isNaN(v)) totaldebit += v;  
     }  
     document.getElementById('JV_TOTAL_DEBIT_AMOUNT').value = totaldebit;  
   });

Grid Script:

 <script>  
   $("#CustomerPackageChannelKendoGridAdd").kendoGrid({  
     dataSource:  
     {  
       schema:  
       {  
         model:  
         {  
           fields:  
           {  
             JV_ID: { type: "string" },  
             JV_ACCOUNT_ID: { type: "string" },  
             JV_ACCOUNT_NAME: { type: "string" },  
             JV_ACCOUNT_CODE: { type: "string" },  
             JV_NOTES: { type: "string" },  
             JV_DATE: { type: "string" },  
             JV_DEBIT_AMOUNT: { type: "string" },  
             JV_CREDIT_AMOUNT: { type: "string" },  
             JV_BANK_REMARK: { type: "string" }  
           }  
         }  
       },  
       pageSize: 20,  
       serverPaging: false,  
       serverFiltering: false,  
       serverSorting: false  
     },  
     height: 200,  
     filterable: true,  
     groupable: true,  
     sortable: true,  
     resizable: true,  
     editable: true,  
     selectable: true,  
     pageable:  
     {  
       refresh: false,  
       pageSizes: [20, 40, 60, 80, 100]  
     },  
     columns:  
     [  
       { field: "JV_ID", title: "JV_ID", hidden: true, filterable: false, sortable: false },  
       { field: "JV_ACCOUNT_ID", title: "JV_ACCOUNT_ID", hidden: true, filterable: false, sortable: false },  
       { field: "JV_ACCOUNT_NAME", title: "Account Name", width: "20%" },  
       { field: "JV_ACCOUNT_CODE", title: "Account Code", width: "20%" },  
       { field: "JV_NOTES", title: "JV_NOTES", hidden: true, filterable: false, sortable: false },  
       { field: "JV_DATE", title: "JV_DATE", hidden: true, filterable: false, sortable: false },  
       { field: "JV_DEBIT_AMOUNT", title: "Dr", width: "20%" },  
       { field: "JV_CREDIT_AMOUNT", title: "Cr", width: "20%" },  
       {  
         command:  
         [  
           {  
             name: "Del", imageClass: "k-icon k-i-close", click: function (e) {  
               e.preventDefault();  
               var dataItem = this.dataItem($(e.target).closest("tr"));  
               //if (confirm('Do you want to delete record?')) {  
               var dataSource = $("#CustomerPackageChannelKendoGridAdd").data("kendoGrid").dataSource;  
               dataSource.remove(dataItem);  
               dataSource.sync();  
               //}  
             }  
           }  
         ], title: "&nbsp;", width: "15%"  
       }  
     ]  
   });  
 </script>







Labels:

Comments

Post a Comment

Popular posts from this blog

C# run powershell script as administrator

Recently I was fetching a problem that I need to run a PowerShell script that will change TFS user Display name and SID. I was trying to run that script from C# that was not working due to TFS security update and TLS certificate. Using this code block I resolve the Issue. var newProcessInfo = new System.Diagnostics.ProcessStartInfo(); newProcessInfo.FileName = @"C:\Windows\SysWOW64\WindowsPowerShell\v1.0\powershell.exe"; newProcessInfo.Verb = "runas"; // Define Run as administrator newProcessInfo.Arguments = script; //Define your powershell script newProcessInfo.UseShellExecute = false; newProcessInfo.RedirectStandardOutput = true; // This will enable to read Powershell run output newProcessInfo.RedirectStandardError = true; Process proces = System.Diagnostics.Process.Start(newProcessInfo); proces.WaitForExit(); // I want to read the output string from powershell window StringBuilder output = new StringBuilder(); output.Append("Started"); while (!proces.St
Post a Comment
Read more

ASP.NET MVC razor SAP Crystal report

Crete a new project: Add a aspx Master Page Create a new folder Reports and 2 sub folder crystal & crystalviewer Now add a web form page in crystalviewer  folder. Add the master page namespace in your web form page. MasterPageFile ="~/Views/Shared/ReportSite.Master" Replace your web form by this code < asp : Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" runat ="server">      </ asp : Content > Now go to design mode of your web form drag & drop the crystal report viewer in your web form. After that your page will be look look like this. Replace the code: < CR : CrystalReportViewer ID ="EmployeeList" runat ="server"   HasCrystalLogo ="False"     AutoDataBind ="True"   Height ="50px"   EnableParameterPrompt ="false" EnableDatabaseLogonPrompt
Post a Comment
Read more

mvc razor textboxfor change event change another textboxfor value

Based on value of Weight, Rate , CNF & AWB it will change the value of Freight , TTLCNF anfd TTLFright . Freight= Weight*Rate; TTLCNF  = Weight*CNF; TTLFright=  Freight+ TTLCNF  + AWB; @Html.TextBoxFor(model => model.Weight, new { onChange="return GetWight(this);"}) @Html.TextBoxFor(model => model.Rate, new { onChange="return GetWight(this);"})/Kg @Html.TextBoxFor(model => model.Freight, new {disabled = "disabled" , @readonly = "readonly" ,onChange="return GetTTLFright(this);"}) @Html.TextBoxFor(model => model.CNFPK, new { onChange="return GetCNFPK(this);"}) @Html.TextBoxFor(model => model.TTLCNF, new {disabled = "disabled" , @readonly = "readonly",onChange="return GetTTLFright(this);" }) @Html.TextBoxFor(model => model.AWB, new { onChange="return GetTTLFright(this);"}) and script <script> function GetW
Post a Comment
Read more