Grid Controller Multiselect

[Joel]

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

[Joel]

Most importantly, on button click, how do I get the list of items that are selected in the Grid?

[Silviya Stoyanova]

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

[Joel]

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, "&");
}

[Silviya Stoyanova]

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

[Joel]

No as pictured, there is only one button on each Grid.  This click event works for me.  I was just looking for a way to eliminate the hokey line at the bottom of the script where I have to pull the [&amp] out of the routing url.

[Silviya Stoyanova]

Hello,

You could give a try to the kendo htmlEncode() method.

kendo.htmlEncode(selectedId.join("&personId=")

Kind Regards, Silviya Stoyanova Progress Telerik