visible/enable bindings in nested forms (fields within fieldsets within tabs)

4 posts, 0 answers
  1. Wolfgang
    Wolfgang avatar
    8 posts
    Member since:
    Oct 2011

    Posted 17 Jul 2012 Link to this post

    I want to use the visible and editable bindings in a complex, nested form. it consists of tabs, with <fieldsets> as child elements. the fieldsets itself host the individual form fields (e.g. <input>,<select>). what i want to is to apply visible or enable bindings to entire fieldsets or tabs. If the enable property is set on a tab, it should still be possible to open it, but all form fields on it should be disabled.

    any idea how i could accomplish this with kendoui mvvm? i'm aware that i might have to write my own custom mvvm binders for that, since the enable binding is limited to form fields.

    kind regards,

    Franz
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Jul 2012 Link to this post

    Hello Franz,

    The visible binding should work out of the box, while the enabled binding needs a custom binder. For convenience I prepared a small example which illustrates such approach in action.

     

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Wolfgang
    Wolfgang avatar
    8 posts
    Member since:
    Oct 2011

    Posted 23 Jul 2012 Link to this post

    Hi Illiana,

    thanks for the solution! Meanwhile I was able to solve my solution using a similar approach with a custom binder. The only difference is that you apply the editable state via jQuery/DOM, while i use the MVVM field models for this (each group knows of its contained field models and sets the editable property on them),

    The only thing I am struggeling are tabStrips. What I want to do is to enable/disable individual tabs based on binding values. As there is no example in the docs that demonstrates a tabStrip binding, I don't know in which node (tabStrip or tab?) i should put the data-bind attribute so that it gets evaluated. Also the structure of the bindings is unclear to me.

    Knockout-kendo.js already does what I want  (http://rniemeyer.github.com/knockout-kendo/web/TabStrip.html, Tab "Additional Options"), but this type of binding doesn't seem to exist in Kendo MVVM.
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Jul 2012 Link to this post

    Hi Wolfgang,

     I created a small demo showing how to achieve similar behavior with Kendo MVVM: http://jsbin.com/ujujez/1/edit 

    I hope this helps,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top