Focus lost

9 posts, 0 answers
  1. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 10 Jun 2013 Link to this post

    Hi,

    Trying to use MVVM with a datasource and a list. Rendering works great, but there is a strange issue with the dropdown lists. When you tab between them it works fine, but when you set the value of a dropdown, it loses it focus.

    See the jsfiddle here: http://jsfiddle.net/mivano/zNLNy/638/

    However, that behaves differently than the example located here: http://demos.kendoui.com/web/mvvm/widgets.html

    Go to the dropdownlist, use the arrow keys to select an item and see that the focus is indeed in the dropdownlist.
    Try the same thing in the jsfiddle and the focus is lost.

    BTW, this does not only apply to the dropdownlist, but it is more clearly visible. Anytime a set is executed, the template redraws. That might be intended, but not what I want.

    So what is the best way to deal with this?

    thanks Michiel

  2. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 11 Jun 2013 Link to this post

    And to add to this; when I do a datasource.sync, this will also trigger and redraw the other templates. So I have a list view with templates, each template has an editor. I change the value of one and in the background I do a datasource.sync. When done, it will also update the other data fields. So if I was in the middle of changing a value, it will be set back to the original one. 

    Basically, I dont want the refresh of the templates, but I do not know if it is suppose to work like this, or I'm doing something wrong.
  3. Kendo UI is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Jun 2013 Link to this post

    Hello Michiel,

    Indeed the template is redrawn each time the underlying model has changed and because of this the focus is lost, since the whole div element is reconstructed.

    I am afraid that this is the expected behavior and as long as you are using value binding you cannot avoid this from happening. After all this is what the goal of MVVM is, to update the markup when the model is changed and vice-versa.


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 13 Jun 2013 Link to this post

    Thanks for the reply. I was hoping that the binding would only apply to the controls and not to the whole template. I have a binding on the input or select box, so when setting the value it does not need to redraw the template it is currently in. We also lose any other stuff we changed using jquery to the specific item. Much of this can be faked using the binding and model (like the expand/collapse state of a panel inside the template), but losing the focus for example is not acceptable for out business (they want to use keyboard). 

    I will see if I can decouple the two way binding and simply use the template to render a list and not data bind the model. Unfortunately because I liked the simplicity. 
  6. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 14 Jun 2013 Link to this post

    And I still dont get it. I changed my code, I removed the view, so I only have the model and the data source. There is no binding (at least I hope).

    See http://jsfiddle.net/mivano/MFgRG/2/

    Now select any value from the dropdown and you will see that it renders that row again. If you remove the line  

    ds.get(id).set("name", v); 

    Then it wont change the row. So why is this happening? It updates the underlying datasource, but why should that trigger a refresh on the row and a redraw of the template? There is no two way model binding. All the other nice stuff like data-bind does not work, but still it reacts to changes in the datasource.

    Can I skip the list view? I just want a list of items based on a template to be rendered and I want to be in control of what is being changed.

  7. Michiel
    Michiel avatar
    18 posts
    Member since:
    Oct 2010

    Posted 14 Jun 2013 Link to this post

    It is probably the listview then. I now switched to just use the template and use that to render html. I will update the datasource manually so I can save it back.
  8. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Jun 2013 Link to this post

    Hello Michiel,

    As I tried to explain, the widgets that are using the dataSource such as TreeView, Grid are listening for the change event of the dataSource and they refresh when the event is triggered.

    http://docs.kendoui.com/api/framework/datasource#events-change


    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. nick001
    nick001 avatar
    4 posts
    Member since:
    Jan 2015

    Posted 06 May 2015 Link to this post

    Is there a work around to this issue?  it seems minor, but users have been complaining about odd and in consistent tabbing between controls on a grid...very annoying.  
  10. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 May 2015 Link to this post

    Hi,

    You may try preventing the dataBinding event in certain cases - however, this will disable the grid automatic refresh. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready