How to create a checkbox all that effect to other checked-status'checkbox

How to create a checkbox all that effect to other checked-status'checkbox

Posted by: nguyenvu.work on 18 June 2023, 11:09 pm EST

• 

  nguyenvu.work

  • Post Options:
  • Link
    Copy

  Posted 18 June 2023, 11:09 pm EST - Updated 11 January 2024, 2:40 pm EST

  • I am using spreadjs in Nextjs, I need to create a table that have a column which allow user can choose the records by click to the checkbox control. I want a checkbox (all) on the column name that I can select or deselect all the records on table. How can I do that with spreadjs ? And how to put checkbox on Worksheet > Column?
• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2023, 7:15 am EST

  Hello,

  As I can understand, you want to use checkboxes in a table column to select the records(rows) from the table.
  
  For this use case, you can create a table with TableColumn object and set its cell type to Checkbox. You can bind the TableColumn objects using table.bind() or table.bindColumns() methods. When you click on the checkboxes, the data source value also changes for the clicked cell. You can find which record(row) is selected or not from the data source. Also, you can add a button to select or unselect all the records of the table.

  Please refer to the attached sample.
  
  sample: Hello,
  
  As I can understand, you want to use checkboxes in a table column to select the records(rows) from the table.
  
  For this use case, you can create a table with TableColumn object and set its cell type to Checkbox. You can bind the TableColumn objects using table.bind() or table.bindColumns() methods. When you click on the checkboxes, the data source value also changes for the clicked cell. You can find which record(row) is selected or not from the data source. Also, you can add a button to select or unselect all the records of the table.
  
  Please refer to the attached sample.
  
  sample: spread_react_typescript.zip
  
  Please unzip the file and use the commands “npm i” and “npm run dev” to install dependencies and run the sample respectively.
  
  Please let us know if you still face any issues. Also, please describe your use case so that we could tailor it to your requirements.
  
  Doc reference

  TableColumn class:https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Tables.TableColumn#class-tablecolumn

  ButtonClicked event:https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#buttonclicked

  Table class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Tables.Table
  
  Please unzip the file and use the commands “npm i” and “npm run dev” to install dependencies and run the sample respectively.
  
  Please let us know if you still face any issues. Also, please describe your use case so that we could tailor it to your requirements.
  
  Doc reference

  TableColumn class:https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Tables.TableColumn#class-tablecolumn

  ButtonClicked event:https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#buttonclicked

  Table class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Tables.Table

  regards,
  
  Avinashspread_react_typescript (1).zip

• 

  yayex11019

  • Post Options:
  • Link
    Copy

  Posted 20 June 2023, 3:50 pm EST

  Create a table using the TableColumn object and set the cell type to Checkbox for this use case. The table.bind() and table.bindColumns() methods can be used to bind TableColumn objects. The data source value for the selected cell also changes as you click on the checkboxes. From the data source, you may determine if a record (row) is picked or not. Additionally, a button to select or deselect all of the table’s records can be included.

• 

  nguyenvu.work

  • Post Options:
  • Link
    Copy

  Posted 21 June 2023, 12:05 am EST

  • Thank you so much, I resolved my case @avinash.pathak @yayex11019
• 

  dobedev855

  • Post Options:
  • Link
    Copy

  Posted 3 July 2023, 12:50 am EST

  To create a “Check All” checkbox that affects the checked status of other checkboxes, you can use JavaScript to handle the functionality. Here’s an example of how you can achieve this:

  HTML:

  html
  
  Copy code
  
  Check All
  
  
  
  Option 1
  
  
  
  Option 2
  
  
  
  Option 3
  
  
  
  JavaScript:

  javascript
  
  Copy code
  
  // Get the “Check All” checkbox and all the checkboxes to be affected
  
  const checkAll = document.getElementById(“checkAll”).