Grid Controller Multiselect

7 posts, 1 answers
  1. Joel
    Joel avatar
    204 posts
    Member since:
    Jun 2018

    Posted 17 Mar 2020 Link to this post

    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

  2.
  3. Joel
    Joel avatar
    204 posts
    Member since:
    Jun 2018

    Posted 18 Mar 2020 in reply to Joel Link to this post

    Most importantly, on button click, how do I get the list of items that are selected in the Grid?
  5. Answer
    Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 19 Mar 2020 Link to this post

    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.
  7. Joel
    Joel avatar
    204 posts
    Member since:
    Jun 2018

    Posted 19 Mar 2020 in reply to Silviya Stoyanova Link to this post

    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, "&");
    }
  8.
  9. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 23 Mar 2020 Link to this post

    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.
  11. Joel
    Joel avatar
    204 posts
    Member since:
    Jun 2018

    Posted 23 Mar 2020 in reply to Silviya Stoyanova Link to this post

    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.
  13. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 25 Mar 2020 Link to this post

    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.
  14.
Back to Top