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

WPF datagrid cell textbox change event

Entity/Class: public class FeesDetails : INotifyPropertyChanged { public int Id { get; set; } public string FeesName { get; set;} public string FeesDetailsName { get; set; } public int? PaidAmount { get; set; } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(System.String info) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); } } public int feesAmount { get; set; } public int FeesAmount { get { return this.feesAmount; } set { if (value != this.feesAmount) { this.feesAmount = value; NotifyPropertyChanged("FeesAmount"); } } } } XAML: <DataGrid AutoGenerateColumns="False" Height="21...
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

mvvm double click event in listview

If you want to get the double click event on a listview item you can try with this code; <ListView Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Width="250" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" AlternationCount="2" BorderBrush="#FFA8CC7B" ItemContainerStyle="{StaticResource alternatingStyle}" ItemsSource="{Binding FromPayerNameList}" SelectedItem="{Binding SelectedFromPayer, Mode=TwoWay}"> <ListView.ItemTemplate> <DataTemplate> <TextBlock Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}}" Text=...
Post a Comment
Read more