Cell Value Validation in Wijmo Grid

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

  • Posted 6 June 2021, 5:20 pm 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.
  • Replied 7 June 2021, 9:21 pm EST

    Hi,

    Can you please provide solution.

    Thank You.
  • Replied 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
  • Replied 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
  • Replied 10 June 2021, 3:52 pm EST

    Hi,

    Can you please provide a solution.

    Thank You.
  • Replied 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
  • Replied 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 => {

    if (this.totalSections.indexOf(s.selectedValue) > -1) {
    console.log('Display Error');
    // append inline error message
    }

    }
    });
    e.cell.innerHTML = '';
    e.cell.appendChild(host);
    }
    });


    Can you please provide a solution for this.

    Thank you
  • Replied 13 June 2021, 2:59 pm EST

    Hi,

    Can you please us with the solution.

    Thank you.
  • Replied 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
  • Replied 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,
  • Replied 14 June 2021, 2:55 pm EST

    Hi Ashwin,

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

    Regards,
  • Replied 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
  • Replied 14 June 2021, 5:06 pm 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.
  • Replied 15 June 2021, 5:08 pm EST

    Hi Ashwin,

    Can you please provide solution for this.

    Thank you.
  • Replied 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
  • Replied 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
  • Replied 16 June 2021, 3:11 pm EST

    Hi Ashwin,

    Can you please look into this and provide solution.

    Thank you.
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels