Vue 2 - Flexgrid: Check to see if column/rows values/strings match

Vue 2 - Flexgrid: Check to see if column/rows values/strings match

Posted by: eric.devwise on 10 March 2019, 11:41 pm EST

• 

  eric.devwise

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 March 2019, 11:41 pm EST

  I have a column of strings and I need to write a condition that says if the values(strings) match exactly then to change the color to green. If a string has no match then it will be red.

  I am aware I can use the formatItem event to change the color, but how would I run the check to see if any values match the current value(string) after being entered on cellEditEnded?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 March 2019, 12:21 am EST

  Hi Eric,

  We could simply use formatItem event and get the value of the cell using getCellData() method or the dataItem property on the row object. Format item will be call again after the cell edit is finished so the style will always be updated according to the new value. Please refer to the following sample demonstrating the same:
  
  https://codesandbox.io/s/q3z6kpn47w

  ~Sharad

• 

  eric.devwise

  • Post Options:
  • Link
    Copy

  Posted 11 March 2019, 10:32 pm EST

  This is a step in the right direction and I will have to use getCellData() as I’m interested in the value that has just been typed in and entered.

  How would I compare the value that has just been entered in the cell…to the other values already entered. A forEach maybe? Comparing getCellData() to row.dataItem? None of these values will be coming from the DB. They are live values that have not been saved to the DB yet.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 March 2019, 12:46 am EST

  row.dataItem represents the data for the row. So if you would like to compare it to other values you may simply do so like:

  let dataItem = row.dataItem;
  // compare value in col1 with value in col2
  if(dataItem['col1'] == dataItem['col2']){
  	// value in col1 and col2 are same for the current row
  }else{
  	// values are different
  }
  

  You may also refer to the following sample demonstrating the same:
  
  https://codesandbox.io/s/k0qm94jm7

• 

  eric.devwise

  • Post Options:
  • Link
    Copy

  Posted 12 March 2019, 10:28 pm EST

  This works if I know that I want ‘Japan’ to have a green background. However, in my case I don’t know what the user will type in. I am simply looking to see if what the user types in matches any other values in the same column.

  For instance, user types in test1 > ‘test1’ is red since there is no other cell in that column with ‘test1’. Then user goes to the next cell in the same column and types ‘test1’ again. Now that there are two of the same string ‘test1’…now ‘test1’ in both cells can turn green. There is a match made. And if the user types ‘test2’ in another cell, then it’s red until there is a match of 2 or more ‘test2’ strings…then both or all ‘test2’ cells turn green. And so on so forth.

  Sorry I didn’t explain this better earlier. Is this behavior posiible?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2019, 12:28 am EST

  Hi Eric,

  Thanks for the additional info. We could achieve this by iterating over each cell value in the column before applying the class but it would have some performance issues. A better alternative would be to define/mark a flag on the dataItem and then use that flag in the formatItem to add/remove the class. Flag needs to be updated inside cellEditEnded event. Please refer to the following sample demonstrating the same:
  
  https://codesandbox.io/s/pwy5914j67