tabbing to new row goes to first required field

14 posts, 1 answers
  1. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 18 Nov 2016 Link to this post

    Using this as a template: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/add-row-when-tabbed-out-of-last-row

    I have made it so I can tab into the next row. But I noticed that it will always select the first required column based on data annotation, instead of the first column. Is this by design, or is there a way to set it to so that it goes to the first column always?

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1568 posts

    Posted 22 Nov 2016 Link to this post

    Hi Alex,

    I tested the behavior in the sample and noticed that the second in the new row was edited initially. The reason for that is that the Tab key press executed at the same time as adding the new row.

    Please check out the modified sample below that works as expected on my end. It opens the first cell in the new row by default. Let me know how it works for you.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 09 Dec 2016 Link to this post

    I made a small change so that it only goes to the next row when you hit Enter or Tab, as I want them to be able to enter a value in the last column. But, when I tab to the new row the value is lost and just reverts to the default value (Today's date).

    Do I need to somehow save the data before I create the new row or something?

     

     

  4. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 13 Dec 2016 Link to this post

    Hello,

    No, saving data prior to creating a new row is not necessary.
    Can you share in a dojo example the small change that you made so we can investigate the problem on our side? I'm not able to replicate the issue in this dojo: http://dojo.telerik.com/OPuGe

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 13 Dec 2016 in reply to Marin Link to this post

    I updated the example(below) so that it only goes to the next line if you press enter or tab. If while in the last column, you change the default data, and then press tab or enter, or will just use the default value for the last column.

    http://dojo.telerik.com/ucaNA

  6. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 14 Dec 2016 Link to this post

    Hello,

    The data is saved automatically but it happens on the blur event of the input editor. So if you call grid.addRow() before the blur is triggered the editor will not have a chance to persist the new value.
    That's why I would suggest calling .addRow on blur of the input editor to see if this will improve the behavior and bring the desired result.

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 14 Dec 2016 in reply to Marin Link to this post

    Is there a blur event for just the cell? I don't have any direct access to the editor control for that specific cell.
  8. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 15 Dec 2016 Link to this post

    Hi,

    You can use the edit event which gives access to the cell (in e.container) from where you can access the editor:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 15 Dec 2016 in reply to Marin Link to this post

    I don't think that helps me too much, because even with access to the cell, which I did have before, but in an indirect way I don't know how to attach the event to the editor via the cell, unless I know exactly what kind of editor I'm looking for.

    I want to do something like

     

    cell.editor.on('blur',function(e){
        grid.addRow();       
    });

     

    But the editor might be a textbox, it might be a numeric editor, or any other type of kendo control. IS there a way to just get whatever editor is there and attach the event without knowing exactly what I'm looking for?

  10. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 19 Dec 2016 Link to this post

    Hello,

    I'm afraid there is no universal way to attach the blur event to any kind of editor.
    All kendo widgets do expose a common API providing access to the HTML element on which the widget is built, so you can use this a starting point to attach the event.
    http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 19 Dec 2016 in reply to Marin Link to this post

    I've decided to just brute force this (try getting the editor for every single type of kendo control I might have on the grid, i.e. textbox, numeric textbox, dropdown, etc), but still need your help:

     

    I want to do something like

    var cell = $(e.target).closest('td');
    var numericTextBox = cell.data("kendoNumericTextBox");
                     
    var winElement4 = cell.element;
    var winWrapper2 = cell.wrapper; // returns div.k-window as a jQuery object
     
    var cell2 = $(e.target).closest('td.k-widget');      
    var numericTextBox = cell2.data("kendoNumericTextBox");
     
     
    numericTextBox.bind("blur", function(e){
        alert("happening")                  
    });

     

    but trying to use the kendo javascript objects just shows as undefined. Is there something I'm doing wrong

  12. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 21 Dec 2016 Link to this post

    Hello,

    You have to access the correct element for which the widget is initialized - normally it has a name attribute with the name of the column and a specific role attribute (for example role="numerictextbox", name="UnitPrice"). This is an inner input element inside the .k-widget span. If you call .data("kendoNumericTextBox") on this input element you will get the correct widget instance.

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Alex
    Alex avatar
    37 posts
    Member since:
    May 2015

    Posted 21 Dec 2016 in reply to Marin Link to this post

    the blur event is never firing. I tab to the last column, change the value there and try tabbing off and it just never tabs off.

    http://dojo.telerik.com/OMIKO

    Can you please provide a working sample of how I can make an edit in the last column, tab off of it, create a new line and save my changes. I feel this is a reasonable request.

  14. Answer
    Marin
    Admin
    Marin avatar
    1057 posts

    Posted 23 Dec 2016 Link to this post

    Hi,

    Instead of calling
      e.preventDefault();
              e.stopPropagation();

    which also prevents the keypress event of the grid to fire properly and save the current entered value (which causes the issue)

    We can simply call addRow with a timeout to resolve the problem:
    setTimeout(function () {
    grid.addRow();
    }, 0);

    Here is the dojo: http://dojo.telerik.com/ulOdU

    Regards,
    Marin
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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