[flexsheet] Checkbox in rowheader

[flexsheet] Checkbox in rowheader

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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 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 i[/i] 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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  chetan.shetty

  • Post Options:
  • Link
    Copy

  Posted 11 May 2021, 9:35 pm EST

  Hey Ashwin,
  
  Thank you for your response. In your example, the aggregate row is getting displayed after the preferences are saved but in my case, the aggregate column will be displayed throughout and the values need to be changed if either the rows are disabled/enabled or the value of any particular row is changed.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 May 2021, 8:05 pm EST

  Hi Chetan,

  Please refer to the sample link below and let me know if this fulfills your requirements completely:

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

  I have also added an event handler for the pasted event so that the aggregate can be updated when values are pasted.

  ~regards