As pictured, I have 2 grids next to each other. On the left, I have a list of people who are in a group. On the right, I have a list of people who are not in the group but instead are candidates that could be added. I need to add people to the group by selecting one or multiple on the right grid then, on button press, all users should be should be added to the group. In the same way, those who are members of the group should be selectable in the same way and on button press, I should be able to remove all selected members.
Do you have a working example of this type of behavior? Where do I put the Add/Delete buttons? Must they be a custom button built into the grid or can they be separate from the grid? Must I perform a round-trip refresh after an Add/Delete action or can the control remain in play on the client?
Thanks in advance for your help,
Joel
6 Answers, 1 is accepted
Rank 1
Hello, Joel,
I have prepared a dojo example, where you could see transferring items from one grid to another on a button click.
To take the selected items you can use the selectedKeyNames() method of the Grid, which returns an array with the ids of the selected rows.
Then pass them as a parameter to the get() method of the Datasource to receive the items itself.
Insert items to the dataSource of the second grid and remove them from the current grid dataSource.
You also need to clear the selection with clearSelection() method of the Grid.
I hope this a working solution for your project.
Kind Regards, Silviya Stoyanova Progress Telerik
Rank 1
Thanks for the reply. I did stick with this long enough to come up with something similar. I use ASP.NET Core MVC so I need to fire an action and pass the selected personIds back to the controller. I then refresh the grids. If you have a better way to hand this off to the controller I'd like to see it as well as a way to ensure I get the and (&) in the entire url instead of (%amp;) The obvious fix using Html.Raw() didn't seem to help.
This is what I came up with:
function onAddClick(e) { // get the rows that are selected from the addGrid var rows = addGrid.select(); // populate an array with the selected PersonIds var selectedIds = []; rows.each(function(e) { var dataItem = addGrid.dataItem(this); selectedIds.push(dataItem.Id); }); // create a url entry for each selected id var urlIds = selectedIds.join("&personId="); // append the personIds with the model url values and create a complete action url var url = '@Url.Action("CreateBatch", "PersonGroups")?personId=' + urlIds + '@Model.GetUrlParameters()'; // submit the url to trigger the action window.location.href = url.replace(/&/g, "&");}Hello, Joel,
I assumed that the CRUD operations in your grids are set by using its transport->create/update/destroy settings. To enable batch editing operations set batch configuration to true.
I would like to point that by using add() ( or insert() ) and remove() methods the DataSource change event gets triggered. When DataSource.sync() method is called all data item changes are saved.
With the mentioned configuration and by using dataSource methods all changes are handled through the datasource. There is no need to change the location and refresh the grid manually.
If you need to use action links you could check the following article:
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq?#how-can-i-use-action-links
Kind Regards, Silviya Stoyanova Progress Telerik
Rank 1
Hello,
You could give a try to the kendo htmlEncode() method.
kendo.htmlEncode(selectedId.join("&personId=")Kind Regards, Silviya Stoyanova Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.