Editing in Grid with remote dataSource for multiSelect widget

[Ed]

In my grid (inline editable), I have a column that, when edited will become a multi-select. The dataSource for the multi-select will be retrieved from the server and will be in the form id/text, where id is an int, and text is a string. The mult-select works great and retrieves the data great from the server. The issue becomes when I want to display the selected items to the user when the user is finished editing. The DB wants the selections as a CSV of IDs. The UI wants the selections presented to the user as a CSV of Text.

When I add a new row, the multi-select works great because there are no items to pre-select.

When I edit a row that already has selections that need to be pre-selected, how can I do this since there may be duplicate Text, but never duplicate IDs

So, 2 main issues:

1. When finished editing a row, how do I get the UI to present CSV of Text, but send a CSV of IDs to the DB

2. When populating the grid, the DB is currently sending the CSV of Text, which isn't in a good form to edit in a multi-select. I'm thinking I should include another member in the Schema / Model that is simple the CSV of IDs. How do I present to the user the CSV of Text, but when editing, use the CSV of IDs to pre-select the control?

Thanks,

--Ed

[Ed]

Note, I've been trying to find a site where I can create a demo but our access to those sites (jsbin, jsfiddle, plunkr, dojo) is prevented by the company.

I'm now trying to put together a small project I can zip up. The problem is the complexity of the system and the confidentiality of the data/type of data. There are very strict rules regarding anything that leaves the network.

This applies to the other posts I've put up that are related to this one (all surrounding editing in the grid)

What do you suggest?

[Ed]

I got an exception from the IT dept for a limited time. Woo Hoo.

I've created a small example here: http://dojo.telerik.com/@evsinek/ILOQA/7

take a look at the function: destroyValueEditorControls() - I tried approach 1, which is to simply do a kendo.destroy, but that didn't work since there were still lots of html created by kendo remaining. approach 2 seems to work better, but then I lose the data binding since I needed to remove that element from the DOM and re-insert it.

Also, when I try to save the row, it isn't saving. Any ideas?

Thanks,

--Ed

 

[Boyan Dimitrov]

Hello Ed,

 

When the widget is destroyed and its HTML element is cleared the MVVM binding will not work as expected. Using this approach you have to update the model explicitly from the change event of the editor widget (in your case the multi select). I modified your http://dojo.telerik.com/IReVI example in order to demonstrate the approach in action. Please note that I implemented it only for the MultiSelect widget. When the "Save Row" button is clicked the model is updated.  

 

Regards,
Boyan Dimitrov
Telerik