[flexsheet] Checkbox in rowheader

Posted by: chetan.shetty on 5 August 2020, 12:32 am EST

  • Posted 5 August 2020, 12:32 am EST

    Hi,
    I need to know how to add checkbox to each row in its rowheader. I tried with wjFlexGridCellTemplate but it isn't working. If possible, can you show a jsfiddle example of a working one. Thanks!
  • Replied 5 August 2020, 7:09 pm EST

    Hi Chetan,

    The wjFlexGridCellTemplate is not compatible with FlexSheet. If you need to add a checkbox in the row headers, then you will need to use the formatItem event of FlexSheet. Please refer to the sample link below for reference:

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

    Regards,
    Ashwin
  • Replied 5 August 2020, 9:39 pm EST

    Hi Ashwin,
    is this solution compatible with the version 5.20183.568 ??
    as we cannot upgrade the version as of now.

    Regards.
  • Replied 5 August 2020, 9:56 pm EST

    Hi,

    In 5.20183.568 version, the formatItem event cannot be used correctly with FlexSheet. You will need to use the CellFactory's updateCell method. Please refer to the updated sample link below:

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

    ~regards
  • Replied 23 April 2021, 12:51 am EST

    Hi Ashwin,
    Thank you for your help. I am able to implement row header checkboxes in my wijmo flexsheet application. I have a couple of issues that I am facing after the implementation.

    1. I am unable to un-check more than one row header as the cellFactory.updateCell method in your above example keeps getting called and it keeps adding the checkbox with the server value that was used on load. (I am using your above code inside of (loadedRows) method)

    2. How do I disable the row on checkbox uncheck? I am currently using the value and updating the isReadOnly value of the row and using disabled cssClass for visual representation. Is there another better way to do it because the user can check/uncheck the checkbox selection multiple times and the sheet must update without any hiccups?
  • Replied 26 April 2021, 7:12 pm EST

    Hi Chetan,

    I apologize for the delay in response. I am afraid I was unable to understand your first issue. What are you exactly trying to achieve? Are you sending the selection state to the server every time a checkbox is checked/unchecked?

    Regarding 2, in the click event of the FlexSheet, you can manually update the row's read-only and other properties instead of using the loadedRows event.

    Please refer to the sample below for reference:

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

    ~regards
  • Replied 28 April 2021, 1:03 am EST

    Hey Ashwin,
    Thank you for your response. My use case is that when the user loads the grid the first time, he will have the option to check/uncheck any rows that he wants. But once the user saves his preference for the grid then the checkboxes should be disabled but visible, showing the user's selected preference and also the row should be read-only or not based on the checkbox value.
    The issue I am facing right now is that when the user is on the grid for the first time, he is only able to check/uncheck one row as the formatSheet.cellFactory.updateCell() function keeps getting called and updates the other checkboxes to their default value so only one row is getting unchecked and then the check/uncheck stops working for all other rows.

    Another problem is that when the user enters values in a checked row and then if he double clicks on the unchecked row, it gets enabled and gets out of read-only mode.

    P.S. I have copied the implementation exactly as you have directed.
  • Replied 28 April 2021, 6:34 pm EST

    Hi Chetan,

    Please refer to the sample link below. I have updated it according to your requirements:

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

    ~regards
  • Replied 2 May 2021, 10:36 pm EST

    Hi Ashwin,
    Thank you so much once again. This has helped a lot. I have one added requirement where I have an aggregate column in the grid which needs to skip these unchecked rows' values. Is that possible?
  • Replied 4 May 2021, 10:43 pm EST

    Hi Chetan,

    I apologize for the delay in response.

    For this, we can use the getAggregate method of the wijmo module. We can create a method that will filter out the not-selected items and return the aggregates of the remaining items.
    You can call this method initially after saving the preferences and in the cellEditEnded handler so that the aggregate is updated accordingly.

    You may refer to the sample link below for reference:

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

    ~regards
Need extra support?

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

Learn More

Forum Channels