I need to manage group membership. I'll select the group then I'll need a grid on the left that represents all people currently in the group. I then need a grid on the right representing all people available that are not in the group. In this middle, I need an Add and Remove button. The add button shouldn't be enabled unless the grid on the right has focus and a user is selected. The remove button should not be enabled unless the left grid has focus and a user is selected.
If you have an example of this type of functionality, can you please post a link. If not, some feedback on how I would go about this using a ASP.NET Core 2.2 components would be appreciated.
1 Answer, 1 is accepted
0
Hi Joel,
Thank you for describing the scenario. Based on that I would suggest adding three Grids to the page. The first and third one will have their AutoBind option set to false - this is because the data in them would depend on the selection in the second Grid.
Then handle the change event for the second Grid that will be raised when the users select an item. In the event handler call the read() method for the first and third Grid. Here you can pass the ID of the selected item via the Data() method for the Read action. The approach is described in the article below:
Once that information is available in the Controller the respective Read ActionMethods for the first and third grid can use the selected id and return the relevant items.
About the Add button - you can add a custom button to the Grid toolbar and make it disabled by default (add .k-state-disabled CSS class). For enabling the button use the change event for the third Grid. Setting the Remove button would be similar, only it will be enabled when an item in the first Grid is made.
Give the approach a try and let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
Thank you for describing the scenario. Based on that I would suggest adding three Grids to the page. The first and third one will have their AutoBind option set to false - this is because the data in them would depend on the selection in the second Grid.
Then handle the change event for the second Grid that will be raised when the users select an item. In the event handler call the read() method for the first and third Grid. Here you can pass the ID of the selected item via the Data() method for the Read action. The approach is described in the article below:
Once that information is available in the Controller the respective Read ActionMethods for the first and third grid can use the selected id and return the relevant items.
About the Add button - you can add a custom button to the Grid toolbar and make it disabled by default (add .k-state-disabled CSS class). For enabling the button use the change event for the third Grid. Setting the Remove button would be similar, only it will be enabled when an item in the first Grid is made.
Give the approach a try and let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.