Working With Ignite UI igGrid Selection Feature

Hey folks, let’s continue to explore Ignite UI igGrid features. Here’s the link of my previous article, where I've discussed how to get started with it. 

• Getting Started with Ignite UI igGrid 

Ignite UI igGrid control allows a number of the customizations. Following are the features, we can play around with: 

• Column Resizing: It allows the user to change the width of the grid’s columns. Resizing feature can be enabled at two levels – for the entire grid (default) and per column (not supported on the touch devices).
  
  
• Column Hiding: It gives an opportunity to hide the column(s) and is disabled by default.
  
  
• Column Summaries: It allows the igGrid to display a summary row for the data in the columns of the grid. There are predefined summary functions, but you can create the custom function to calculate the custom summaries. We will discuss this later.
  
  
• Row Selectors: It allows us to select the cell(s) or entire row(s) by clicking the row selector column, placed on the left of the first column of the grid.
  
  
• GroupBy: It enables the user to employ the data in one or more columns in a grid as a primary and secondary criteria respectively for organizing the records in the group.
  
  
• Tooltips: It provides the tool tips that allow the user to select and copy the text i.e. the tool tip container.
  
  
• Sorting: It enables single or multiple column sorting in an ascending or descending order.
  
  
• Filtering: It allows the users to do Excel-style filtering of the data.
  
  
• Paging: Paging feature allows you to divide your data in the pages.Thus, you can achieve better performance by retrieving only a predefined number of the records from your original data source.
  
  
• Selection: It enables the selection of the rows and the cells of the igGrid control. The behavior closely follows Microsoft Windows Explorer style.
  
  
• Updating: It includes three different interactions: updating, adding new rows and deleting the rows.
  
  
• jQuery templates: It allows substitution, using jQuery templating.
  
  
• Virtual Scrolling: Virtualization is a feature of the igGrid control, that reduces the number of the active in-memory DOM objects.

Let's start with the Selection feature and explore them one by one progressively. The Selection feature allows us to highlight the selected rows or cells. You can always intercept the selection of the events and do what your heart says with the selected rows/cells. As it highlights the selection, it adds certain CSS classes to the cells, which you can use to modify the theme at your will.

 

I am extending the sample code from my previous demo - Getting Started with Ignite UI igGrid to explain this feature. igGrid control's config object accepts an array of the objects (features), allowing the customization. To add or modify a feature, you need to add a feature object to this array. Every feature is identified by a name.

 

Please note, that the name of the feature starts with a capital letter.



 

The color/texture of the highlighted cells/rows will depend on the referenced theme. Another attribute you will see along with the feature name is "persist". It allows the grid control to persist the selected cells or the rows, after you've done some filtering or sorting on it. The attribute is true by default.

 

Selection can be set for cells or rows, using "mode" attribute of the selection feature. It is "rows" by default.

 

                         

 

 

 

 
Select Multiple Cells or Rows  

 

It also allows the selection of the multiple cells/rows. The attribute for it is "multipleSelection" and is disabled by default.

 

 

You get a Microsoft Windows Explorer type experience while selecting the multiple rows/cells. By pressing the CTRL key, clicking the different cells will select them. It toggles the selection, every time you click on a cell/row. You can also select a cell, press Shift key and select another cell. It will select all the cells / rows in between.



Select Multiple Cells/Rows by dragging the mouse 

 

You can also drag to select the multiple cells or rows at one go, using the mouse after you set "mouseDragSelect" to true. It is disabled by default.

 
Click and drag the mouse after you've set it to true and all the cells/rows across the range will be selected.

 

 

Select Fields using Arrow Keys

 

 

 

Ignite UI igGrid control allows the "activation" of keys. Setting the "activation" attribute to true will enable users to use their arrow keys for the selection of cells/rows. Works exactly like Microsoft Windows Explorer item selection.  By pressing SHIFT key and arrow key it will select continuous cells/rows. Keeping CTRL key pressed, using keys to move around other cells/rows and hitting SPACEBAR on desired cell/row will select that particular cell or row.

Drag and Select on Touch devices 

 

Set "touchDragSelect" to true to enable drag selection on touch enabled devices. touchDragSelect is limited to cells only.

 

Wrap Around 

 

This attribute works in conjunction with activation. If you have enabled "activation" for the grid control the selection goes seamlessly on key press. The selection will keep moving from cell to cell event if it reaches the last cell in the grid. It starts from the first cell after reaching the last every time. This is called wrap around. 

 

To prevent this and limit the keyboard selection at the first and last cell, set  the "wrapAround" attribute to false. It is enabled by default.

 

Modifying the theme

 

Below is a reference table if you want to customize the look and feel of the Selection feature. Add your styles and that's it!
 
Download the sample code for this post here at my github repo.

  

Well, that pretty much wraps up the Ignite UI igGrid selection feature. I'll be discussing selection events in a separate post. Hope you enjoyed reading. Please share your valuable feedback in the comments section.