MVVM KendoGrid and 1-D arrays

8 posts, 4 answers
  1. Answer
    Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 10 Jun 2013 Link to this post

    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?

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 11 Jun 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 11 Jun 2013 Link to this post

    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()
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Jun 2013 Link to this post

    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!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 12 Jun 2013 Link to this post

    duplicate
  7. Answer
    Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 12 Jun 2013 Link to this post

    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.
  8. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Jun 2013 Link to this post

    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!
  9. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Jun 2013 Link to this post

    Thank you. This has been a very informative thread.
Back to Top
Kendo UI is VS 2017 Ready