This is a migrated thread and some comments may be shown as answers.

Grid Controller Multiselect

6 Answers 9 Views
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 17 Mar 2020, 11:21 PM

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

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 18 Mar 2020, 02:29 PM
Most importantly, on button click, how do I get the list of items that are selected in the Grid?
0
Accepted
Silviya Stoyanova
Telerik team
answered on 19 Mar 2020, 04:50 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 19 Mar 2020, 07:12 PM

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, "&");
}
0
Silviya Stoyanova
Telerik team
answered on 23 Mar 2020, 11:15 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 23 Mar 2020, 02:16 PM
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.
0
Silviya Stoyanova
Telerik team
answered on 25 Mar 2020, 02:23 PM

Hello,

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

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

Kind Regards, Silviya Stoyanova Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Silviya Stoyanova
Telerik team
Share this question
or