Controls within a Grid using MVVM

[Steven]

I am trying to create a grid that has a row template with controls in them using MVVM.  There are two problems I am struggling with:

1)  It seems that the grid does not know how to deal with row templates that have controls in them.   There are several problems here:
     a)  In IE, the column headers do not align with the rows, but it seems to work in Chrome.
     b)  In both browsers, it does not seem to know what size the controls are and cannot properly size the grid.   The dropdowns get chopped, and the unfortunate part, is I need them to auto-size because I don't know in advance what the size of the dropdown will be.

2)  I am not sure how to get the drop downs to use MVVM when inside of the grid.    The content of the dropdown needs to be bound to a property within the view model, not a property within the products list.  Essentially, I do not want to embed within the products the list for each item.

See this fiddle for effectively what I am attempting to do:

http://jsfiddle.net/blackhawk/xFLfZ/4/

[Atanas Korchev]

Hi, 

I have updated your JS fiddle to make it work: http://jsfiddle.net/korchev/xFLfZ/5/  

 The following changes were made:

1. The row template defined only three columns whereas the grid was configured to have four. I added the delete button to the row template.
2. The destroy command was used by the grid was not editable. I added that.
3. The dropdownlist was bound to "items" which however is not a property of product. Kendo MVVM currently does not crawl up the view-model hierarchy when binding templates. I added an "items" field to each "product".
4. The default width of the dropdownlist is wider than the width of the column. Increasing the width of the column will show the whole dropdownlist.

Regards,
Atanas Korchev
the Telerik team

[Steven]

Doh!   Total brain fade on the missing delete column.

As far as the drop downs, when I bring up your fiddle, they seem to work in Chrome, but not IE 9.

For the width of the columns, is there a way to make them auto size to the content?   I don't have control over how wide the drop down is, since it will be coming from a data source.

[Steven]

Ok, now we are getting to the essence of what I was trying to test out, which is basically performance of a grid with MVVM using dropdowns with lots of elements.   This is a common scenario we run into for our applications and it is usually problemmatic to implement.

In the fiddle below, you can see what I am trying to test out.
http://jsfiddle.net/blackhawk/FM55G/2/

At 400 rows the page loads very slowly.   At 1000 rows it is unbearable.   I need to get to 50,000+ rows with dropdowns that have 3,000+ elements.   I think paging or virtualization would work here, but I can't find examples of where this is being done.

For that matter, I cannot seem to find any documentation on what all the different options are for the data-roles, i.e. is there a data-pageable?   Where can I find all the roles and their appropriate options?

Thanks for all your help

[Steven]

Ok, after actually looking at the source code for kendo, I realized that you are using all of the standard UI widgets in MVVM, just keying them off data- attributes.   So I was able to figure out how to do the data binding and paging and such.   Here is my fiddle on this:

http://jsfiddle.net/blackhawk/FM55G/4/

The performance is certainly better with paging, but not where I was hoping.   Any performance suggestions?

[Atanas Korchev]

Hi,

 You are now having 20 rows with 20 dropdowns each of it having 1000 items. This makes 20000 items. Do you really want to have that many items in your dropdownlists? Reducing the number of items in the dropdownlists will improve performance. 

Regards,
Atanas Korchev
the Telerik team

[Steven]

That is correct, and where the problem comes in.   Doing this in HTML/ASP.NET is a royal pain for this very reason, in that instead of referencing the same data, it is duplicated for each row.   Silverlight does it nicely because it doesn't have to generate HTML.

I am trying to do this in Kendo to see if we can transition our Silverlight apps to Kendo, but this is critical.

Our primary grid in Silverlight behaves like an excel sheet in that the user can tab around to all the cell.   Some of the cells have in-lin combo boxes (and date pickers etc) to aid the user with their data entry.    In doing so, we run into this situation and the number of items in the drop down can sometimes be very large.

I need to figure out how to do this without getting a major performance hit.

BTW: Doing a "edit row" button is not acceptable solution.

[Atanas Korchev]

Hi,

 I guess you need the grid editing feature which is demoed here: http://demos.kendoui.com/web/grid/editing-custom.html

Kind regards,
Atanas Korchev
the Telerik team

[Steven]

Atanas,

Yeah, that is what it looks like i need.   Plus, I need to combine it with Batch Editing.    Once I get all this together, I will post a sample so that others who are trying to do this can see how to combine everything together.   I Love Kendo!!

Thanks for all your assistance.

[Steven]

Atanas,

What is the context of the function for the custom editor when in MVVM?   Global?  Within the view model or record?

Also, how should this be defined in the data-columns attribute?

This seems to work, but when you click in the field to edit the content, you get a "string is not a function" error.

data-columns='[{"field": "Name", "title":"Name of Product", "width": 250, "editor": "itemEditor" }, "price", "unitsInStock" ]'

When you try it this way, you get an "Unexpected token i" error.

data-columns='[{"field": "Name", "title":"Name of Product", "width": 250, "editor": itemEditor }, "price", "unitsInStock" ]'

Here is my fiddle:

http://jsfiddle.net/blackhawk/FM55G/5/

[Atanas Korchev]

Hello Steven,

 Currently setting the editor declaratively is not supported. The JSON parser can't find global functions and this is why it fails. When you set it as string everything seems initially ok but the grid expects "editor" to be a function not a string. Hence the error.

 As a workaround I can suggest to initialize the grid from code. Here is the updated fiddle: http://jsfiddle.net/korchev/dEg4G/2/ 

All the best,
Atanas Korchev
the Telerik team

[Steven]

Atanas,

This is great and the performance is outstanding, even with 80,000 rows and a drop downs of 3,000 elements.   Fantastic! 

I didn't realize you could combine MVVM and programmatic creation of the widgets.   I think I might even prefer this method because it allows me to change the column headers dynamically yet still keep the declarative binding on the row templates.

There are two last items to resolve:

1)    This does not seem to work in IE 9.   Is there a fix for this?
2)    With batch editing turned on, I would have expected the tab key to be able to be used to go between columns.  

In my particular case, the datasource cannot be created using crud data operations because the web service doesn't support it in that way.   What I need to do is capture each row being changed and log it to an array then write the changes back separately, however, I still want to be able to tab between columns and rows.  Is this supported?

[Atanas Korchev]

Hello,

 I have updated the code to work with keyboard navigation. However I had to change the dropdownlist to a combobox because there are a couple of issues that prevent the keyboard navigation from working properly when there is a dropdownlist involved. We are looking into solving this issues.

 As for the IE9 issues it seems to be caused by an exception in jQuery animate which is probably due to the jsFiddle implementation. The code should work nicely outside of jsFiddle.

Regards,
Atanas Korchev
the Telerik team

[Steven]

Atanas,

I think in most cases, a combo box is preferred anyway, but having it work with a drop down list would be great.   I will keep an eye on the updates.

Thank you for all your help.   I owe you a beer.

Cheers!

[Atanas Korchev]

Hi,

 It seems that I have forgotten to include the updated jsfiddle url. Here it is: http://jsfiddle.net/korchev/dEg4G/4/ 

Regards,
Atanas Korchev
the Telerik team

[Steven]

Yeah, I guessed at it.   I saw that  v3 was still using the drop down list, so I tried v4.

Thanks again.