This is a migrated thread and some comments may be shown as answers.

Focus lost

8 Answers 569 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Michiel
Top achievements
Rank 1
Michiel asked on 10 Jun 2013, 03:38 PM
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

8 Answers, 1 is accepted

Sort by
0
Michiel
Top achievements
Rank 1
answered on 11 Jun 2013, 12:45 PM
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.
0
Petur Subev
Telerik team
answered on 12 Jun 2013, 10:11 AM
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!
0
Michiel
Top achievements
Rank 1
answered on 13 Jun 2013, 11:14 AM
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. 
0
Michiel
Top achievements
Rank 1
answered on 14 Jun 2013, 11:49 AM
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.

0
Michiel
Top achievements
Rank 1
answered on 14 Jun 2013, 12:22 PM
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.
0
Petur Subev
Telerik team
answered on 17 Jun 2013, 07:54 AM
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!
0
nick001
Top achievements
Rank 1
answered on 07 May 2015, 04:53 AM
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.  
0
Petyo
Telerik team
answered on 11 May 2015, 07:22 AM
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!
 
Tags
MVVM
Asked by
Michiel
Top achievements
Rank 1
Answers by
Michiel
Top achievements
Rank 1
Petur Subev
Telerik team
nick001
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or