Piggybacking on ListView to edit a group of items

8 posts, 0 answers
  1. Miguel
    Miguel avatar
    20 posts
    Member since:
    Oct 2013

    Posted 19 Sep Link to this post

    Hi! I was wondering what would be a more "proper" way of doing this.

    I have a set of elements that have a boolean flag inside. What I was thinking is having a kendo window appear as popup, and having each element represented by a button, that can be toggled on or off by clicking it. Now, I don't want each click to issue an update request to the server, rather I'd like having a "batch" update of sorts where I have an "Ok" and "Cancel" button in the popup, much like the default Grid's popup editor.

    What I've come up with is using a ListView instance and using the (undocumented?) kendoEditable widget, like this: https://dojo.telerik.com/EnepI

    As you can see, it sort of works, but only once per item. The buttons get initialized with the k-state-disabled class if the model is disabled, and the toggle function gets called when you click on them. Now the thing is that the "change" event handler of the model tries to regenerate the HTML of the element, replaces the button for one that doesn't has the data-bind events bound. So further clicks don't call toggle, the k-state-disabled isn't toggled anymore and it doesn't produces notifications either.

    I'm not sure I'm going at this from a good angle, any suggestions?

  2. Miguel
    Miguel avatar
    20 posts
    Member since:
    Oct 2013
  3. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 21 Sep Link to this post

    Hello,

    You can try adding the event as delegate as for example in this dojo that worked correctly at my side.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Miguel
    Miguel avatar
    20 posts
    Member since:
    Oct 2013

    Posted 21 Sep in reply to Plamen Link to this post

    Well yeah, but it still breaks the data binding established in the template, given that if you toggle off some button, the binding that adds the k-state-disabled class never happens.

    I could just jQuery my way around it by adding the class on the 'toggle' function, but I wanted to preserve the data binding.

    Say, something like a grid inline editor keeps the inputs bound to the model even when you edit it, until you hit "save" and then it switches to the read only template. Is there a way to do that here? Or a way to rebind the template so "data-bind" doesn't gets lost after it redraws it.

  5. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 25 Sep Link to this post

    Hi,

    Unfortunately we don't have similar working scenario that uses kendoEditable so in such case we would rather recommend you to use jQuery.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Miguel
    Miguel avatar
    20 posts
    Member since:
    Oct 2013

    Posted 29 Sep in reply to Plamen Link to this post

    Okay, then how would I do this using normal kendo MVVM binding then? I didn't say I want to use kendoEditable exclusively, it's just that it seemed to do what I want (bind a bunch of inputs in the container to a model).

     

    What else would I use? Binding through model.bind like here http://docs.telerik.com/kendo-ui/framework/mvvm/overview? Foregoing ListView and doing the Kendo window content in a template myself? How would I make it so I have a DataSource object tracking the changes in the models then?

     

    I mean, you (Telerik) make it work just fine in a Kendo grid popup editor obviously, you can edit inputs and the binding doesn't breaks. What's different in this case then?

  7. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 03 Oct Link to this post

    Hi,

    I will need some time to inspect the issue deeper and will contact as soon as we have more information about it.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 04 Oct Link to this post

    Hello,

    I have inspected the issue once again and find out that in this case the item is both updated by the binder and the template of the ListView and that is why it was not displayed correctly. I would recommend to use only template in this case as for example in this dojo. As for the kendoEditable it is adding custom validation and other custom checks so in  your case I would rather just use kendo bind for the item as in the dojo.

    Hope this information will be helpful.

    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top