KendoGrid - tab out issue with validation

2 posts, 0 answers
  1. Avish
    Avish avatar
    7 posts
    Member since:
    Jan 2018

    Posted 16 Jan 2018 Link to this post

    Hi , i have only one editable column in my grid and i have included couple of validation on that column at model field level . which is working fine.

    Now i am planning to include tab-out event so that on press of TAB and SHIFT+TAB  focus will move to next/previous editable column ( in my case only one column is editable so it should go to next/previuos row same column). but TAB out event is called instantaneously so its creating some conflict with VALIDATION , so even if the validation fails focus is moving to next row which i dont want as it should TAB out only in case of validation is successful. i think its because TAB is called before the VALIDATION .

     

    $("#tgrid_name .k-grid-content").on('keydown', function(e) {  // TAB OUT LOGIC ON KEYDOWN EVENT

          if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {

    ...

     

    i need your suggestion on how to address this concern , i tried adding TAB out logic in closeCell instead  in KEYDOWN event but there i am not able to capture the key value. could you please provide me any pointers to implement this . 

     

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 18 Jan 2018 Link to this post

    Hello, Avish,

    Thank you for the details.

    In this scenario, I can suggest to attach the tab handler on the edit event of the Grid and to re-attach it on the closeCell event. The inside the edit event to programmatically trigger the cell validation and only if it passes to move to the next cell using the editCell method of the Grid:

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

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

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

    https://docs.telerik.com/kendo-ui/api/javascript/ui/validator#methods-validate

    I made an example demonstrating this:

    http://dojo.telerik.com/OyaLuN/9

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top