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

The calling thread must be STA, because many UI components require this.

Using Thread: // Create a thread Thread newWindowThread = new Thread(new ThreadStart(() => { // You can use your code // Create and show the Window FaxImageLoad obj = new FaxImageLoad(destination); obj.Show(); // Start the Dispatcher Processing System.Windows.Threading.Dispatcher.Run(); })); // Set the apartment state newWindowThread.SetApartmentState(ApartmentState.STA); // Make the thread a background thread newWindowThread.IsBackground = true; // Start the thread newWindowThread.Start(); Using Task and Thread: // Creating Task Pool, Each task will work asyn and as an indivisual thread component Task[] tasks = new Task[3]; // Control drug data disc UI load optimize tasks[0] = Task.Run(() => { //This will handle the ui thread :The calling thread must be STA, because many U...
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

An error occurred while updating the entries. See the inner exception for details.

If you are using EF then you may get the error. This error is not specify where the error exactly occur in your table. To specify the error use this code & use debugger to see the exact error message. try { //Your code db = new FEDALIC_AGRI_DBEntities (); model.FarmerVillage = new Guid(village); model.FarmerThana = new Guid(thana); model.FarmerDistrict = new Guid(district); var _SET_FARMER_INFO = EMFermar.SetToModelObject(model); db.SET_FARMER_INFO.Add(_SET_FARMER_INFO); db.SaveChanges(); } catch (DbUpdateException e) { var innerEx = e.InnerException; while (innerEx.InnerException != null) innerEx = innerEx.InnerException; throw new Exception(innerEx.Message); } catch (DbEntityValidationException e...
Post a Comment
Read more