Select Item

The Select Item component is used to add and remove items from a record (For example, add/remove roles from a User). The component contains two grids and two buttons in between the grids. The left grid will list all the possible items that can be assigned, the right grid will list all the items currently assigned to the record. The two buttons are used to either add or remove the selected items indicated by their arrows.

• ➡ = Add the selected items from the left grid to the grid on the right
• ⬅ = Remove the selected items from the right grid to the grid on the left

Stored Procedures

To properly use the component the fields in its field definition must be populated. It requires 3 stored procedures at minimum.

1. Load Possible Options – Returns a list of items that could be assigned, does not show any items already assigned
2. Load Selected Options – Returns a list of all the items currently assigned
3. Add/Remove Stored Procedure – A procedure that either adds or removes the selected items

The stored procedure that adds or removes selected items must accept an input string parameter that can only be “A” for add or “R” for remove. The input string is populated depending on which arrow button was selected by the user.

• ➡ = A
• ⬅ = R

Below are templates for all three stored procedures that need to be created followed by their parameter list:

• ListPossibleOptions
  • SessionGUID
  • UserGUID
  • CurrentInstanceGUID
  • TargetInstanceGUID
• ListSelectedOptions
  • SessionGUID
  • UserGUID
  • CurrentInstanceGUID
  • TargetInstanceGUID
• AddRemove
  • SessionGUID
  • UserGUID
  • CurrentInstanceGUID
  • TargetInstanceGUID
  • InputString

To download the templates, visit the attached files section at the bottom of the article.

Component code

The code for this component is broken up into various regions to aide in navigation and to follow this documentation.

Inside the code the left grid has an ID of 1 and related variables/methods contain the keyword Available. The right grid has an ID of 2 and related variables/methods contain the keyword Selected.

Variables

This region contains all the variables used for the component. Variables are separated by comments to indicate what they’re used for.

Initialization

OnParametersSetAsync()

This method is called when the component is initialized and when the parent component is updated. Its purpose is to assign variables their values and to refresh the grids if the component is being loaded because of a tab change.

Grids Data

ReadItemsAvailable(GridReadEventArgs args)

This is the method that’s called when any CUD (Create, Update, Delete) operation is performed on grid 1 (left). This allows us to have more control over the grid by performing manual data source operations.

This method is used to capture the Request from the GridReadEventArgs object then call GetData(int gridID) and pass the gridID of 1.

Following that call the Data and Total properties of the grid are assigned and displayed on the grid. 

Follow this link to view Telerik’s official documentation that dives into the lower-level functions of the OnRead event and the different CUD operations.

ReadItemsSelected(GridReadEventArgs args)

This is the method that’s called when any CUD (Create, Update, Delete) operation is performed on grid 2 (right). This allows us to have more control over the grid by performing manual data source operations.

This method is used to capture the Request from the GridReadEventArgs object then call GetData(int gridID) and pass the gridID of 2.

Follow this link to view Telerik’s official documentation that dives into the lower-level functions of the OnRead event and the different CUD operations.

GetData(int gridID)

This method is responsible for calling the stored procedure to get data for the specified grid based on the gridID argument.

The appropriate stored procedure is called and the based on the gridID the appropriate list is updated to contain the returned data and is displayed in the grid.

After updating the data the respective SelectedItems list is also updated to reselect items that were previously selected if they’re still in the new data that was returned. This is useful if the grid is refreshed and you had multiple items selected, they will be reselected automatically when the data has finished refreshing.

Button Click Handlers

RefreshButtonOnClickHandler(int gridID)

When the Refresh button is selected on one of the grids this method is called. Depending on the passed gridID the corresponding grid will have its state reset, triggering a data refresh on that specific grid. 

Upon a successful refresh a notification will be displayed to the user.

AddRemoveButtonClicked(string inputString)

This method is called when one of the arrow buttons between the grids are selected.

All the items selected to be added or removed are then processed and the corresponding stored procedure specified in the field definition is called for each selected item.

After all the calls have finished being made, the selectedItemsAvailable and selectedItemsSelected enumerations are re initialized and both grids are refreshed.