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

MVVM KendoGrid and 1-D arrays

7 Answers 158 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dr.YSG
Top achievements
Rank 2
Dr.YSG asked on 10 Jun 2013, 07:06 PM
I have created an online CodePen Demo: http://codepen.io/DrYSG/pen/wnDxL where I have a Grid bound to a KendoObservable 1-D array. The Array is meant to be (Item, Value) pairs. There are a number of clumsy things here that I would like to clean up.

1. I would love it if you supported Grid's that had Vertical Orientation, so that I could just have display 1-D array, and use the Column Headings for each item: see: http://www.kendoui.com/forums/ui/general-discussions/vertical-grid-property-grid.aspx
2. Doing the lookup for the value and changing it involves hard constants (stateTable[1].Value = foo. Do I have to have a use an index table that translates integers to keys. I.e. var StatusKey = 0, TileCountKey = 1, etc.  (then it would be stateTable[TileCountKey] = 2) Still seems clumsy.
3. This would be especially fragile, if the user could add and delete rows. (batch editing).
4. The KendoObservable.set() is not working for this example. So I am doing a manual trigger, which I saw in a post by Alexander Valchev, but I don't see documentation for trigger() anywhere., is this a hidden (unsupported feature?) This also feels a bit clumsy.
Why is there a scroll bar on my Grid?

Bottom line. It works now, but I want to know if there is something in KendoUI today, that would make this cleaner, and if not, do you have anything in UserVoice planned to fix this up?

7 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 11 Jun 2013, 06:12 AM
Hello,

 Up to your questions:

1. No, the Kendo UI grid doesn't support vertical orientation.
2. If you want to update the first item from an array then yes you need to use its index. We are not aware of any other way to update the n-th array item without using its index.
4. The set method isn't working because the grid doesn't use data-bind expressions by default. You need to set the row template of the grid and use data-bind to bind the table cells to current item properties. 
5. There is a scrollbar because scrolling is enabled by default. More info can be found in the API reference.

I have updated your demo to show you how to use the row template and disable scrolling: http://codepen.io/seraphzz/pen/iEnGg

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Dr.YSG
Top achievements
Rank 2
answered on 11 Jun 2013, 03:45 PM
Excellent.

One small informational question: As you can see I am doing the data binding to a JSON object. That is because I find it easier to update JSON objects (arrays). But I assume that if I have a great deal of data, then i should use the MVVM data-bind but with a kendo.DataSource().

What are the relative trade-offs between using MVVM with JSON as the data versus a Kendo.DataSource()
0
Atanas Korchev
Telerik team
answered on 12 Jun 2013, 06:20 AM
Hello,

 The only difference is that you need to use the data source methods to access the data items. Here is your updated demo: http://codepen.io/seraphzz/pen/calvu 

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 12 Jun 2013, 04:55 PM
duplicate
0
Accepted
Dr.YSG
Top achievements
Rank 2
answered on 12 Jun 2013, 04:56 PM
A couple of final points

1. Is kendo.observable.trigger() an undocumented function? 
Alexander Valchev  
mentions it in this forum, but I have not seen it anywhere else. Does
that mean we cannot rely on it? It seems useful to me, if there is no
performance issues over .set() and .get()

2.  I like shorter, simpler, and less code for maintenance and
upkeep. So I find creating row-templates, and relying on magic numbers
outside the VM fragile, creating issues for code maintenance.

3. Take a look at my latest update to my codePen: http://codepen.io/DrYSG/pen/wnDxL  and
tell me what I am doing is that much more expensive by using
.trigger()  instead of set() and get() and row-templates.  I am not
dogmatic (too old and experienced for that), just curious, but I want to
make sure the design paradigm I am using is not doing massive re-layout
and other nasty side effects, especially if the table grows to hundreds
of rows.
0
Accepted
Atanas Korchev
Telerik team
answered on 13 Jun 2013, 08:24 AM
Hello,

 The ObservableObject inherits from Observable which has the trigger function. I recommend checking the API reference of those two classes. You can also check the getting started help topic for observable object and Kendo MVVM.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dr.YSG
Top achievements
Rank 2
answered on 13 Jun 2013, 01:48 PM
Thank you. This has been a very informative thread.
Tags
Grid
Asked by
Dr.YSG
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Dr.YSG
Top achievements
Rank 2
Share this question
or