Piggybacking on ListView to edit a group of items

[Miguel]

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?

[Miguel]

Properly formatted example link

[Plamen]

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

[Miguel]

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.

[Plamen]

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

[Miguel]

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?

[Plamen]

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

[Plamen]

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

[Miguel]

Hi! Sorry for the delay.

After reading your reply what I ended up doing is ditching the ListView, using the DataSource directly, and just clearing and adding items to a container based on a template and kendo.bind on DataSource's "change" event.I didn't really needed the ListView since what I was doing was pretty basic:

dataSource.bind("change", function(e) {
  if (e.action) {

  // Any other kind of action wont rebind the items.
  return;
  }

  // Create buttons and bind them to the items.
  for (let i = 0; i < e.items.length; ++i) {
    const item = e.items[i];
    const $item= $(buttonTemplate(e.items[i]));
    $container.append($item);
    kendo.bind($item, item);
  }
});

 

Thanks!