kendo incell editable grid column template issues on tab navigation

11 posts, 1 answers
  1. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 30 Aug 2018 Link to this post

    Hi,

    I am using kendo v2018.1.221. I have column template in kendo incell editable grid. On keyboard navigation the template column changes and doesn't persist the template on focusing of the cell. I wanted to keep the column template as it is on navigation event. I couldn't skip the cell since i have some calculations based on the changed value. 

    I have created the sample in this below url, 

    https://dojo.telerik.com/AxUyacus

    Unit Price column contains the template on load of the screen but it changes to normal input box on navigation event.
  2.
  3. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 03 Sep 2018 Link to this post

    Hello, Paulraj,

    Thank you for the example.

    I noticed that the template is making an input using some of the NumericTextBox attributes. Please have in mind that this is a visual template that is used only for representing the data. When the data should be editable, the editor has to be used when the cell is clicked.

    Could you please share the desired end result, so we can suggest the recommended approach to achieve it. The current approach is interfering with the Grid internal logic as its "presentation" mode is used with a custom editor.

    I will be expecting the additional details and gladly assist further.

    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 03 Sep 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your reply. I have applied numerictextbox attributes inside column template because i wanted to always display the input box on grid loading and similarly i wanted to display dropdownbox and checkboxes sometimes. 

    If i dont apply the column templates and use editor feature, when i try to use grid's addrow method to create new row, then grid's dirty fields are lost their changes. I wanted to retain the changes of the grid before creating new row. My desired end results are,

    * Grid should always display the editable input textboxes (and/or dropdownbox, combobox, checkboxes).

    * When i use addrow method to create new row, the dirty fields should not loose its changes.

    I have tried below forum posts to fix the issues but didnt help.

    https://www.telerik.com/forums/inserting-rows-to-grid-does-not-set-the-dirty-flag-to-true

    https://www.telerik.com/forums/grid-editing-issue-with-template-columns

    Thanks.

  7. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 03 Sep 2018 Link to this post

    Hello, Paulraj,

    Thank you for the clarification.

    If the desired result is to have aways visible editors and to handle the binding programmatically. I can suggest setting the column editable to false, to ensure that both editings will not create a conflict:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editable

    https://dojo.telerik.com/AxUyacus/2

    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
  9. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 03 Sep 2018 in reply to Stefan Link to this post

    Hi Stefan,

    The grid looks fine, but still it doesn't solve my issues. 

    * The navigation event doesn't focus on the input box (Unit price) rather it focuses on the td element.

    * Grid is rebinding on change of the input field (I accept since the datasource needs to be updated), but how do i focus on the next element post rebind of the grid from editable field. Right now onchange of the input loses its focus to next element and the focus goes to start cell of the grid. 

    Any fixes for this ?

    Thanks.

  11. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Sep 2018 Link to this post

    Hello, Paulraj,

    Both issues will require an additional code to be resolved.

    1) The navigation event doesn't focus on the input box (Unit price) rather it focuses on the td element. - This will require attaching an event listener to the td element on the dataBound event. Once the element is focused, the input inside has to be programmatically clicked(focused).

    2) The reference to the current edit cell has to be saved and on re-bind to be focused again. This will be required keeping the row and column index of the cell and setting that cell in edit once the Grid is rebound.

    I do understand that this requires additional code, but the Grid has a built-in edit mode, and combining the built-in editing with a custom edit requires a lot of additional code as the developer has to handle all of the cases that are internally handled by the Grid.

    If you need more details on this, we will be happy to assist.


    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 04 Sep 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for the response. Since the above conditions are required for my requirement, Can you provide me with some examples achieving this ?

     

  14.
  15. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 05 Sep 2018 Link to this post

    Hello, Paulraj,

    I looked at the example and try to make modifications in order to cover the listed requirements:

    1) The editor is a client template, that will stay after tab. I noticed that the editor is bound in the dataBound event. If the same logic is used on the cellClose event than the editor will stay after tab.

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/cellclose

    cellClose: function() {
      var rows = this.tbody.children();
      var dataItems = this.dataSource.view();
      setTimeout(function(e){
        for (var i = 0; i < dataItems.length; i++)  {
          kendo.bind(rows[i], dataItems[i]);     
        }
      })
    }

    2) Tap to the next cell instead of the first - as we know which column has the editor, we automatically know the cell index. We can take the row index by attaching an event listener on the input. Then on the dataBound event, we set the next cell in edit using the editCell method based on the index:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/editcell

    dataBound: function(e) {
      var rows = this.tbody.children();
      var dataItems = this.dataSource.view();
     
      for (var i = 0; i < dataItems.length; i++)  {
        kendo.bind(rows[i], dataItems[i]);     
      }
     
      if(isUnitPriceEdited){
        var cell = $("tr:eq(" +(currentRowIndex + 1) +") td:eq(" + currentCellIndex +")")
        isUnitPriceEdited = false
        setTimeout(function(e){
          $(cell).click()
        })
      }
    },

    This is the full example:

    https://dojo.telerik.com/AxUyacus/11

    Please have in mind that this is an additional functionality, which may behave differently in the real application.

    If you need further assistance in implementing this in the application I can recommend our Professional Service team as they can assist with making the feature to work in the exact real case as required:

    https://www.progress.com/services/outsourcing/feature-customization

    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  17. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 05 Sep 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for the examples. I will try implementing the same in my application. One last question, How do i remove spinners in the editable numerictextbox cell upon editing ?

  19. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 06 Sep 2018 Link to this post

    Hello, Paulraj,

    In order to remove the spinner or change any of the options of the NumericTextBox a custom editor has to be used as this allows changing the editor widget options:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.editor

    The editor has to be made a NumericTextBox with the spinners option set to false.

    Regards,
    Stefan
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  20.
  21. Paulraj
    Paulraj avatar
    17 posts
    Member since:
    Oct 2017

    Posted 06 Sep 2018 in reply to Stefan Link to this post

    Hi Stefan,

    I will try this. Thanks.

Back to Top