Flexgrid: Prevent user selections, allow programmatic selections

Flexgrid: Prevent user selections, allow programmatic selections

Posted by: joe on 29 June 2018, 7:36 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 June 2018, 7:36 pm EST

  My requirement: using a usb barcode scanner, a user scans barcodes. If the barcode scanned is in the grid, programmatically select the item in the grid and continue scanning. The user must not be able to manually select items in the grid using the mouse or keyboard. The user must be able to scroll through the contents of the grid.

  I have everything working with the exception of preventing the user from making selections and allowing them to scroll. I don’t want to disable the grid entirely. I tried that. Not what I need. If i understand the grid’s selectionMode properly, there is no way to achieve this merely by setting the selection mode to 0 as that will also prevent programmatic selections.

  What’s a guy to do?

  Thanks!

  Joe

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2018, 7:16 am EST

  Hi,
  
  You can achieve the required functionality by setting selectionMode to none.
  
  But setting the selection mode to none stops the grid from adding wj-state-selected and wj-state-multi-selected classes to the selected range. If you want the user to show selection in selectionMode=‘None’ then you can use isSelected property of row to mark selectedRows and cssClass property to set ‘wj-state-selected’ class from selected rows.
  
  Please refer to following code snippet:

  /* set grid's SelectionMode to 'None' */ 
  grid.selectionMode=wijmo.grid.SelectionMode.None;
  
  /* select row programmatically */
  var val=rowIndexToSelect;
  grid.rows[val].isSelected=true;
  grid.rows[val].cssClass="wj-state-selected";
  

  Here is an example implementing the same:-
  
  https://stackblitz.com/edit/js-2wnqta?file=index.js

  ~Manish

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 2 July 2018, 8:09 am EST

  Thanks Manish!

  For the next trick, I want to programmatically sort the grid so the selected items are grouped at the top. My initial thought is to add a “selected” field to the data items but not include a header for that field. Will the grid sort like that? How? And I’m sure you have a better way…

  Thanks!

  Joe

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 3 July 2018, 5:30 am EST

  Hi,
  
  As you mentioned, adding a selected field to the dataItem can solve the problem if there is no problem with modifying the data structure.

  However, a better approach would be using inbuilt sort method by passing a comparer function.
  
  Please refer to following code snippet

  sortRows(grid.rows);
  function sortRows(rows){
  	rows.sort(rowComparer);
  }
  function rowComparer(row1,row2){
  	if(row1.isSelected&&!row2.isSelected){
  		return -1;
  	}else if(!row1.isSelected&&row2.isSelected){
  		return 1;
  	}else{
  		return 0;
  	}
  }
  

  Here is the updated sample implementing the same:- https://stackblitz.com/edit/js-tkpt6c?file=index.js

  Please let us know for any further queries.

  ~Manish

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 3 July 2018, 1:38 pm EST

  Perfection! Thank you, good sir!