Adding Form Validation to Dynamic Flexsheet Cells

Posted by: curiosichi on 20 November 2018, 7:20 am EST

  • Posted 20 November 2018, 7:20 am EST

    I am searching on ways to do cell validation, and found the following: https://demos.wijmo.com/5/Angular/GridValidation/GridValidation/

    That looks really great for my needs.

    -I want the ability to mark a cell as invalid (while the user is able to continue making changes by using validateEdits = false;)

    - I want the ability to add a tooltip to the corner of the cell displaying an error message to the user to assist in their solving of the error.

    The example provided by the above link does not work with how I use flexsheet, as I dynamically create my workbook from server data:


    // Dynamically creating bound sheets for the flexsheet control one by one
    this.ServerWorkbook.addBoundSheet(dataFromServer[i].SheetName, this.workbookData.WorkSheets[i]);


    I loop through all the sheets from the server and create a complete workbook on the client. I don't see a way to add or define getError(), or know how to use it exactly.

    I do have logic programmed for errors already, in addition to text validation on the cell. This logic might be cell values being equal to another cell, for example. At the core, I evaluate the input, and either add the cell to an array or cells in error {worksheetIndex, Col, Row} or it is not part of the error array.


    this.ServerWorkbook.cellEditEnded.addHandler((s, e: any) => {

    // in order to save time and keep grid responsive, i don't want to check errors unless the data entered is new
    const prevData = e.data;
    const curData = s.getCellData(e.row, e.col);

    if(prevData === curData){
    // no change return
    return;
    }

    // this is my custom logic to determine if there are errors. It keeps track of errors with an array of cells for displaying in custom UI
    // of note: this is more than just text validation, this also has logical checks against other data points.
    this.checkForErrors(e.row, e.col);
    });


    While I display a list of cells in error in my own custom UI, I would love the ability to display the cells in an error state in the grid (wj-state-invalid), display a tooltip on hover in the corner, and have the ability from my UI to click a button "go to error" which would change the active worksheet of the workbook to the proper sheet, scroll down to the row/col containing the error, and have the cursor active and editing the error cell using my error handlers array containing the cell's worksheet index/col/row.

    When the data is changed for a cell and cellEditEnded runs again and the error state is cleared, it's removed from the error array, and then the cell should return to normal state (wj-state-invalid class and tooltip removed) on the grid as well.

    Perhaps jumping to the cell on a button is better suited for a different question, but it is two features I would like for my error handling process.
  • Replied 20 November 2018, 8:27 pm EST

    Please refer to the following sample which demonstrates the required functionalities:
    https://stackblitz.com/edit/angular-f8mrag?file=app%2Fapp.component.ts

    Please let us know if the sample doesn't work for you.

    ~Sharad
  • Replied 18 April 2019, 10:32 am EST



    Hello, I am getting around to implementing this feature, and am having an issue referencing getError.

    I am using "wijmo": "^5.20183.568", so there is a version mismatch between what I am using and the example provided.

    I noticed there is a valid use of .getError if I reference the specific sheet in the grid, but not the wjcGridSheet.FlexSheet element as a whole:


    // this is valid code
    this.ServerWorkbook.sheets[0].grid.collectionView.getError = (item, property) => {
    switch (property) {
    . . .




    this.ServerWorkbook is the flexsheet reference:

        
    // references FlexSheet named 'ServerWorkbook' in the view
    @ViewChild('ServerWorkbook') ServerWorkbook: wjcGridSheet.FlexSheet;


    I haven't migrated all of this tutorial to my project, but figure I bring this to your attention now in case there were more differences between the example provided and the wijmo version released now.
  • Marked as Answer

    Replied 21 April 2019, 8:38 pm EST

    We are sorry but we were unable to replicate the issue at our end. The sample provided is working as expected in the latest version. Please refer to the above sample with the updated version of wijmo:

    https://stackblitz.com/edit/angular-ypl2db
  • Replied 23 April 2019, 9:48 am EST



    Is there something I am missing?

    The property getError doesn't exist on ICollectionView. I see a getError function on CollectionView (notice no I, not an interface), but on a wijmo flexsheet grid, collectionView is typed as the former, and therefore the code doesn't compile for me as is shown in the example.
  • Replied 23 April 2019, 7:29 pm EST

    Hi,

    ICollectionView interface doesn't have 'getError' property but CollectionView class have one and the actual instance which is assigned to a collectionView property of the FlexGrid is an object of CollectionView class.
    And since tsc works during the compile time and doesn't know that the actual instance would be an object of CollectionView class it shows the error.
    To fix the issue we could simply cast it like:
    (this.ServerWorkbook.collectionView as wjcCore.CollectionView).getError = myGetErrorFunction;


    ~Sharad
  • Replied 13 May 2019, 12:08 pm EST



    When removing a cell from the error list, the red css class is removed, but the tooltip remains. I tried removing attribute but it doesn't seem to work.

    What is a solution to remove the tool tip from the cell when hovering, correcting the issue in your example and photoed here.
  • Replied 13 May 2019, 6:10 pm EST

    The issue was arising because the tooltip was not removed from the error cell in the formatItem event of the sheet. Resetting the title if the cell is valid should fix the issue.
    Please refer to the following updated sample demonstrating the same:
    https://stackblitz.com/edit/angular-smjq4u
Need extra support?

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

Learn More

Forum Channels