1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dynamic show the checkbox of the tree grid

Dynamic show the checkbox of the tree grid

Hi,

I need to do a function: I set the treegrid checkbox column visibility is hidden by default,  when I hover a row, the current row's checkbox is showed.
when I click any one row's checkbox in the treegrid, then all the rows's checkbox column showed up,  

Now I have a problem, the refreshColumns function also do refresh the treegrid, and the selected checkbox is lost after refresh grid. I don't know why.
Can you help me ?

9 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 28, 2020 04:08 PM UTC

Hi lorryl, 

Thanks for contacting Syncfusion Support. 

Query#:- the refreshColumns function also do refresh the treegrid, and the selected checkbox is lost after refresh grid. I don't know why. 
Can you help me ? 
 
By default, while using refreshColumns method, TreeGrid refreshes the columns with new changes. But using refreshColumns doesn’t affect the checkbox changes. It remains persist on button Click. 

In the below Demo, we have shown the demo about refreshColumns doesn’t affect the Checkbox state with ButtonClick. 

We need some more additional details to find the cause of the issue. Share us the following details. 

  1. Complete TreeGrid code example.
  2. Share us the details about how you have hide and show the checkbox column on Hovering the rows.
  3. If possible replicate the issue in the above sample and revert us back.
  4. Video Demo to replicate the issue.

Regards, 
Farveen sulthana T 


LO lorryl August 31, 2020 01:25 AM UTC

In the below Demo, if follow the picture, refreshColumns will affect the Checkbox state with ButtonClick. Can you tell me why?


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team August 31, 2020 02:50 PM UTC

Hi lorryl, 

Query#:- refreshColumns will affect the Checkbox state with ButtonClick 

We are able to replicate the problem at our end with type checkbox column. 
Before proceeding this we need to provide short description about autoCheckHierarchy and checkboxSelection. 

Checkbox column:- While using checkbox column , when we click on any parent record checkbox then the child record checkboxes will get selected and parent record checkbox will get selected while checking all of its child items. The main purpose of this property is to render checkboxes in existing column.  
 
CheckboxSelection:-  Using “type” as “checkbox”, enables to perform multiple selection on clicking the checkbox. The main purpose of this is to perform selection. 

In the previous update we have use autoCheckHierarchy, so it remains persist on refreshing the columns. In your code example you have used type checkbox column. 

By default Selection won’t get persist on performing TreeGrid actions as well as refreshing the column using refreshColumns method. In order to persist the selection on performing operations we need to set persistSelection of selectionSettings  property as true  

Refer to the code example:- 

App.Component.html 
<ejs-treegrid #treegrid  [dataSource] = 'data'  allowPaging = 'true' childMapping = 'subtasks'[treeColumnIndex] = '1'[selectionSettings] = 'selectionsettings' > 
            <e-columns> 
                <e-column type='checkbox' width='50'></e-column> 
                <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='70' textAlign='Right'></e-column> 
                 .    .    . 
            </e-columns> 
</ejs-treegrid> 
 
App.component.ts 
         ngOnInit(): void { 
            this.data = sampleData; 
            this.selectionsettings = { persistSelection: true }; 
        } 
Refer to the API Link:- 

After following the above solution still faced issue, share us the following details. 

  1. Complete TreeGrid code example.
  2. Share us the details about how you have handled show/hide checkbox on Hovering.
 
Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T  


LO lorryl replied to lorryl September 7, 2020 08:57 AM UTC

In the below Demo, if follow the picture, refreshColumns will affect the Checkbox state with ButtonClick. Can you tell me why?


I am using the CheckboxSelection in the tree grid, and the selection setting is   
"public selectionSettings: any = { cellSelectionMode: 'Box', mode: 'Cell' };"

When I clicked some row's checkbox, how can I get the grid's checked rows?

I cannot get the checked rows by calling grid's self method. 
Eg. the "this.grid.getSelectedRows()" not working.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 8, 2020 02:38 PM UTC

 
Hi lorryl, 

Further analyzing your code example, you have used Cell Selection for type checkbox column(i.e checkbox selection). The main purpose of checkbox selection is to select Multiple rows by check/uncheck the corresponding checkbox in the row. Since checkbox selection is mainly used for row we couldn’t use CellSelection Mode in it. 

So you couldn’t get the SelectedRows while using CellSelectionMode with CheckboxSelection. So we suggest you to use either CellSelectionMode or CheckboxSelection. 
 
Please get back to us if you have any queries. 

Regards, 
Farveen sulthana T 


LO lorryl September 15, 2020 01:44 AM UTC

When I set the treegreed:
 "public selectionSettings: any = { cellSelectionMode: 'Box', mode: 'Cell'  };", 

the checkbox in the header cannot click ?



LO lorryl September 15, 2020 01:49 AM UTC

And paste pictures in your forum, always paste 2 pictures.


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 15, 2020 02:44 PM UTC

Hi lorryl,  

Query#:- the checkbox in the header cannot click ? 
 
As we have mentioned earlier, we couldn’t use CheckBoxSelection with CellSelection Mode. The main purpose of checkBoxSelection is to select multiple rows with the help of checkbox in the corresponding row(i.e mainly designed for row). So we recommend to use Selection Mode as row to use this feature.  

Refer to the documentation Link for more information:- 

Query#:- And paste pictures in your forum, always paste 2 pictures. 

We can reproduce the issue of duplicate pasting of images in our RTE. We have planned to include the fix for this in our upcoming website release which is expected to be at the end of September, 2020.  

Please get back to us if you are facing  any difficulties on this. 

Regards, 
Farveen sulthana T 


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 25, 2021 07:52 AM UTC

Hi lorryl, 

Duplicate pasting of Images on the forum website has been fixed at our end. Please let us know if you have any concerns. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon