Cell Value Validation in Wijmo Grid

Cell Value Validation in Wijmo Grid

Posted by: technical.store.technical on 6 June 2021, 5:20 pm EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 June 2021, 5:20 pm EST - Updated 3 October 2022, 4:25 am EST

  Hi,

  I’m trying to achieve the cell value validation in wijmo Grid.

  In the below image, when i add a new row , in that if i enter name as ‘a’ and section as ‘A’ then it should show user already exist with the same section as an inline error message on the section column cell

  I want to enable cell validation on section column which will filter the data according to the name in order to check if user with same name and entered section already exists or not.

  Also how to use filter property of wijmo grid for doing the above filtering ?

  Snippet of the above code -
  
  https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

  Please help us with the solution.

  Thank you.

  

  1915×937 73.1 KB

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 7 June 2021, 9:21 pm EST

  Hi,

  Can you please provide solution.

  Thank You.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 June 2021, 4:40 pm EST

  Hi,

  I am sorry for the delay in response.

  The filter property will not be used for validation. The CollectionView provides in-built validation by using the getError property. This property takes a function with 2 parameters, the current item being validated and the property on which it is being validated, and returns the error message (if any). I have updated the sample to use this getError property.

  As I said, filter property will not be a good solution. But if you are curious to know how it can be used, you can follow the demo below:

  https://www.grapecity.com/wijmo/demos/Core/CollectionView/CreatingViews/Filtering/Overview/angular

  https://www.grapecity.com/wijmo/demos/Core/CollectionView/CreatingViews/Filtering/MultipleFilters/angular

  Regarding the change event, you can use the selectedIndexChanged event but it will not be fired for the initial selection because technically, a new value is being selected or you can say, the selection is not changed. I have updated your selectedIndexChanged event to remove the filter (which is to be used with getError) and also to update the bound value of the grid.

  Sample: https://stackblitz.com/edit/angular-9kwfpr

  Let me know if this helps.

  Regards,
  
  Ashwin

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 9 June 2021, 6:06 pm EST

  Hi Ashwin,

  While adding a new row if I add A value from section column again then the red message should appear below the cell.
  
  the red message should appear for the row that I have added below the cell value and on change event instead of hover.
  
  As of now, in your snippet, the validation message appears for the previous row which has the same value.
  
  Example - A from section column.

  Thank You

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 10 June 2021, 3:52 pm EST

  Hi,

  Can you please provide a solution.

  Thank You.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 10 June 2021, 4:08 pm EST

  Hi,

  This functionality can is a little tricky to implement. Initially, the getError method did not return an error for the first element only. To implement this in a way where only the last edited item displays the error, then we will need to save the timestamp of the last edited item.
  
  Please refer to the sample below that demonstrates the same:

  https://stackblitz.com/edit/angular-9kwfpr

  In this sample, I have updated the selectedIndexChanged event of the ComboBox to save the last updated time of the item. I have also updated the getError callback. Now it will compare the timestamps and will not return an error for the earliest edited item except for all other items.

  Regarding the hover part, I am afraid this cannot be changed. CollectionView uses Tooltip to display error messages and tooltips are only displayed when the mouse hovers over it.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 10 June 2021, 5:23 pm EST

  Hi Ashwin,

  We don’t want this functionality. Can you help us with below -

  On addition of new row, if I select ‘A’ value from a section column and if that ‘A’ value exists in the grid list then we will just have to append a div to that particular cell as per the cell’s position.
  
  How can we add this div on the OnChange Event of the cell.

  Snippet -
  
  https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

  
   if (col.binding === 'section') {
          const item = row.dataItem;
          const host = document.createElement('div');
          wjcCore.addClass(host, 'combo-box');
          let multiSel = new wjcInput.ComboBox(host, {
            itemsSource: this.totalSections,
            isDroppedDown: this.isDroppedDown,
            isRequired: false,
            selectedItem: item.section,
            selectedIndexChanged: s => {
             
              [b]if (this.totalSections.indexOf(s.selectedValue) > -1) {
                console.log('Display Error');
                // append inline error message
              }[/b]
            }
          });
          e.cell.innerHTML = '';
          e.cell.appendChild(host);
        }
      });
  
  

  Can you please provide a solution for this.

  Thank you

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 2:59 pm EST

  Hi,

  Can you please us with the solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 6:26 pm EST

  Hi

  From what I understand, your requirement is to add custom validation to the grid’s cell. Can you let me know what exactly is your use case to add custom validation? Is there a specific reason why you do not wish to use the grid’s built-in validation?
  
  If you wish to use custom validation, then we will need to cover the initial scenario first (displaying error when data is first loaded) and then handle the editing scenarios (adding new rows, editing data, etc) and it may become tedious.

  If it is absolutely necessary, then you can fetch the current cell element using the getCellElement method and append the div there:

  if (this.totalSections.indexOf(s.selectedValue) > -1) {
                console.log('Display Error');
                // append inline error message
                var ele = this.grid.cells.getCellElement(e.row, e.col);
                ele.append('** the div **');
              }
  

  Note that if the cell is not currently in the view, then getCellElement will return null.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 7:31 pm EST

  Hi Ashwin,

  Above code is not working for us.

  https://stackblitz.com/edit/angular-mat-form-validation-eg?file=app/input-error-state-matcher-example.html

  We want this type( angular mat) of validation in which the message will appear after onChange event below that particular cell. Please refer UI from the above link.

  Is this possible in wijmo grid ?

  Snippet -
  
  https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

  Can you please provide solution asap.

  Regards,

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 14 June 2021, 2:55 pm EST

  Hi Ashwin,

  Is it possible to have above kind of mentioned validation in Wijmo ?

  Regards,

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 14 June 2021, 3:12 pm EST

  Hi,

  This code is not working because you are appending a string to the cell and not a div element. Also, the width of the column was too small to display the error div. I have updated this sample accordingly. Also, I’ve modified the error CSS class so that the div is displayed without breaking the line.

  https://stackblitz.com/edit/angular-j9k4eb

  Note that material validation will not be possible because it works on the template side but in your case, you are validating on the TS side and there is no way to initialize a component on the TS side.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 14 June 2021, 5:06 pm EST - Updated 3 October 2022, 4:26 am EST

  Hi Ashwin,

  Thank you for replying.
  
  We don’t want code in html file but can’t we show a div (red error message div) below the cell for which we are validating. And this message should appear after OnChange event that is when validation condition fails otherwise message should be hidden.

  On UI, the message should look like -
  
  

  Can you please provide solution for this.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 15 June 2021, 5:08 pm EST

  Hi Ashwin,

  Can you please provide solution for this.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 June 2021, 6:02 pm EST

  Hi,

  I have updated the sample according to your requirements:

  https://stackblitz.com/edit/angular-e4efiy

  Refer to the selectedIndexChanged event of ComboBox and lines 225-240 in app.component.ts.

  Let me know if this fulfills your requirements.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 15 June 2021, 7:18 pm EST

  Hi Ashwin,

  This is fine (UI) but in this validation the message is appearing for previously existing column cell not for current newly added row or cell.
  
  Can you please suggest a solution in which we should be able to show error message for current new row/cell not for previous data in table.

  Eg If I add a new row and try to select ‘A’ from section column then the message should appear for the current new cell of newly added row.

  Regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 16 June 2021, 3:11 pm EST

  Hi Ashwin,

  Can you please look into this and provide solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 16 June 2021, 5:32 pm EST

  Hi,

  Then you can use the _lastUpdated method that I previously suggested. Refer to the updated sample link below:

  https://stackblitz.com/edit/angular-mun7kz

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 4:40 pm EST

  Hi Ashwin,

  Thank you for replying.
  
  we are referring to this https://stackblitz.com/edit/angular-9kwfpr?file=src/app/app.component.ts from your previous response .

  
  view.sourceCollection.forEach(c => (c._lastUpdated = new Date().valueOf()));
  
  

  In this case, the above code works as you have readily available data but in our case we are fetching data from server because of which _lastUpdated is not getting applied on all the collection values. It is only getting applied on the new row.
  
  I have reproduced the same issue on the snippet using setTimeout function, in which it is applying validation on existing data instead of new row.
  
  Snippet of above sample -
  
  https://stackblitz.com/edit/angular-am4gcu?file=src/app/app.component.ts

  Please provide solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 24 June 2021, 7:28 pm EST

  Then you can handle the sourceCollectionChanged event of the CollectionView to update the list:

  view.sourceCollectionChanged.addHandler(() => {
        view.sourceCollection.forEach(
          c => (c._lastUpdated = new Date().valueOf())
        );
      });
  

  Note that in this case you have updated the sourceCollection of the CollectionView. If you will update the source of the FlexGrid, then you will need to use the itemsSourceChanged event of the FlexGrid.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 27 June 2021, 3:19 pm EST

  Hi Ashwin,

  We tried the above thing in the below but there is one issue. After adding a new row, validation shifts to the previous row.
  
  Example :
  
  Add a new row with name = ‘a’ and section = ‘A’ - validation appears correctly. Then Add a new row again, validation message gets shifted.

  https://stackblitz.com/edit/angular-am4gcu?file=src/app/app.component.ts

  Please provide solution asap.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 28 June 2021, 3:27 pm EST

  Hi team,

  Can you please provide solution for the above issue.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2021, 3:20 pm EST

  Hi,

  This is happening because whenever a new row is added, the sourceCollection is updated, and the sourceCollectionChanged event runs. Due to this, the _lastUpdated is updated for all the values. To resolve this, add a check in the event handler to not update the _lastUpdated if it is already present:

  view.sourceCollection.forEach(c => {
          if (!c._lastUpdated) {
            c._lastUpdated = new Date().valueOf();
          }
        });
  

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 30 June 2021, 4:52 pm EST

  Hi Ashwin,

  Error works fine but error red tick only appears when we Click outside of the table.
  
  Example : select name= ‘b’ and section =‘B’ , but tick appear when we click outside of the table. After selection of the section , if we click directly on the subjects column, the error red tick doesn’t appear.

  https://stackblitz.com/edit/angular-am4gcu?file=src/app/app.component.ts

  Please provide solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 1 July 2021, 5:17 pm EST

  Hi,

  I have updated the sample. Let me know if this works for you:

  https://stackblitz.com/edit/angular-rmqucj

  PS: Please create a new thread for this as this ticket is bigger and harder to maintain.

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 1 July 2021, 10:42 pm EST

  Hi Ashwin,

  Creating a new thread because this is not our requirement.
  
  Regards