1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How to freeze column in Treegrid ( JavaScript platform )

How to freeze column in Treegrid ( JavaScript platform )

Hi Experts,


The first column in a treegrid got frozen while using isFrozen: true. But while collapsing by clicking on the arrow icon , children is not collapsing.
Attaching Screenshot for reference. 

Could you please share sample code on how to freeze column in treegrid.





Thanks 

7 Replies
PK Padmavathy Kamalanathan Syncfusion Team September 2, 2019 10:22 AM UTC

Hi SarathKumar, 
 
Thanks for contacting Syncfusion Forums. 
 
We don’t have support for frozen columns in TreeGrid. We are working on frozen column feature and this feature will be included in our 2019 Volume 3  release which is expected to be rolled out in the end of September 2019. 
 
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 


SK Sarathkumar, K (K.) September 3, 2019 04:52 PM UTC

Hi Padmavathy Kamalanathan,

Thank You  for the information.

Could you please share sample code on 

1.How to make  tree grid editable by default.
2.How to make tree grid editable by single click with mode as "Cell" and  "Row" 

Thanks

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 4, 2019 11:08 AM UTC

Hi Sarathkumar, 

Query#:- 1.How to make  tree grid editable by default. 
 
We have checked your query and by defining the editSettings property make the Grid Editable.  
 
We need some more additional details about this requirement. Share us the following details. 
 
  1. Do you want to show empty row by default while on initial Rendering.
  2. Share us Screenshot about this requirement

Query#2:- How to make tree grid editable by single click with mode as "Cell" and  "Row"  
 
We have achieved this requirement using Load event of the TreeGrid. While using Cell Mode, For editing on single click, we have disabled editing on double click by setting allowEditOnDblClick to false and by using editCell method in mousedown event we have edit the particular cell. 
Refer to the code example:- 
let grid: TreeGrid = new TreeGrid( { 
            dataSource: sampleData, 
            childMapping: 'subtasks', 
            treeColumnIndex: 1, 
            height: 400, 
            editSettings: { 
                allowAdding: true, 
                allowEditing: true, 
                allowDeleting: true, 
                mode: 'Cell', 
                newRowPosition: 'Below', 
                allowEditOnDblClick: false 
            }, 
             load: load, 
            toolbar: ['Add', 'Delete', 'Update', 'Cancel'], 
             
        }); 
      grid.appendTo('#Grid'); 
       function load(): void { 
         var inst = this;  
         inst.element.addEventListener('mousedown', function (e) {  
            setTimeout(() => {  
                if (e.target.closest('.e-rowcell') ) {  
                    if (inst.isEdit)  
                        inst.endEdit();  
                    let index = e.target.closest('.e-rowcell').parentElement.rowIndex;  
                    inst.selectRow(index);  
                    let cellindex = e.target.closest('.e-rowcell').getAttribute("aria-colindex");   
                    let field = inst.columns[cellindex].field;  
                    inst.editCell(index, field);  // method to edit cell  
                     
                }  
                  
  
            }, 300);  
        })  
    } 


Also while on Row Mode, by using startEdit method we have edit the particular row on Single click by passing the rowIndex. Refer to the code example:- 

let grid: TreeGrid = new TreeGrid( 
        { 
            dataSource: sampleData, 
            childMapping: 'subtasks', 
            treeColumnIndex: 1, 
            height: 400, 
            editSettings: { 
                allowAdding: true, 
                allowEditing: true, 
                allowDeleting: true, 
                mode: 'Row', 
                newRowPosition: 'Below', 
                allowEditOnDblClick: false 
            }, 
            load:load, 
            toolbar: ['Add', 'Delete', 'Update', 'Cancel'], 
             
    grid.appendTo('#Grid'); 
      function load(): void { 
         var inst = this;  
         inst.element.addEventListener('mousedown', function (e) {  
            setTimeout(() => {  
                if (e.target.closest('.e-rowcell') ) {  
                    if (inst.isEdit)  
                        inst.endEdit();  
                    let index = e.target.closest('.e-rowcell').parentElement.rowIndex;  
                    inst.selectRow(index);  
                    inst.startEdit(index)  // method to edit cell  
                     
                }  
                  
  
            }, 300);  
        })  
    } 


Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 
 


SK Sarathkumar, K (K.) September 4, 2019 02:34 PM UTC

Hi,



Query#:- 1.How to make  tree grid editable by default.
 
 
    1. Do you want to show empty row by default while on initial Rendering.
          Yes, need to show empty row by default.
          In the sample link that you shared  for the edit by single click on cell mode( https://stackblitz.com/edit/jr3h6x-79afvq?file=index.ts )
          where ever allowEditing is set to true , all the cell under that column should be editable irrespective of whether that cell contains value or not (its edit           type can be dropdownedit,datepickeredit etc)

     2. Share us Screenshot about this requirement
          
          

Query#2:- How to make tree grid editable by single click with mode as "Cell" and  "Row"  

1. With mode as 'cell' it is possible to do action depending on cell value, for example, depending on a particular cell value for a particular column show      dialog box. How can we achieve the same with mode as "Row"?.

2. While using edit by single click (mode:'cell') the column having edit type( dropdownedit,datepickeredit ) shows error as "Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined".
  

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 5, 2019 01:25 PM UTC

Hi SarathKumar, 

Query#1:- How to make  tree grid editable by default. 

We don’t have support in our TreeGrid to display the row to be editable on initialRendering. 


Query#2:- With mode as 'cell' it is possible to do action depending on cell value, for example, depending on a particular cell value for a particular column show      dialog box. How can we achieve the same with mode as "Row” 
 
We have achieved your requirement through EditTemplate feature of the TreeGrid. By using EditTemplate we can placed any other control while on Edtiting using create, read and write events. As per your requirement, based on the row value, we have placed dropdownList or else autoComplete inside TreeGrid. 

Refer to the code example:- 
let grid: TreeGrid = new TreeGrid( 
        { 
            dataSource: sampleData, 
            childMapping: 'subtasks', 
            treeColumnIndex: 1, 
            height: 400, 
            editSettings: { 
                allowAdding: true, 
                allowEditing: true, 
                allowDeleting: true, 
                mode: 'Row', 
                newRowPosition: 'Below', 
                allowEditOnDblClick: false 
            }, 
             load: load, 
            toolbar: ['Add', 'Delete', 'Update', 'Cancel'], 
            columns: [ 
                { 
                    field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', 
                    validationRules: { required: true, number: true}, width: 90 
                }, 
                { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220,edit: { 
                create: () => { 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                read: () => { 
                    return autoCompleteObj.value; 
                }, 
                destroy: () => { 
                    autoCompleteObj.destroy(); 
                }, 
                write: (args: { rowData: Object, column: Column }) => { 
                  if((args.rowData as any).taskName == 'Plan timeline'){   //render based on conditions 
                    autoCompleteObj = new AutoComplete({ 
                        dataSource: <{key: string, value: any}[]>grid.grid.dataSource, 
                        fields: { value: 'taskName' }, 
                        value: args.rowData[args.column.field] 
                    }); 
                    autoCompleteObj.appendTo(elem); 
                  }else{ 
                    autoCompleteObj = new DropDownList({ 
                      dataSource: <{key: string, value: any}[]>grid.grid.dataSource, 
                        fields: { value: 'taskName' }, 
                        value: args.rowData[args.column.field] 
                    }); 
                    autoCompleteObj.appendTo(elem); 
                  } 
                } 
            } 
            }, 
                .      .     . 
            ] 
        }); 
    grid.appendTo('#Grid'); 

Note:- You can place your control as per your requirement. 



Query#3:-  Cannot read property 'querySelectorAll' of undefined". 
 
We can reproduce your reported problem at our end. To overcome this solution we have modified the previous workaround as follows:- 

Refer to the code example:- 
function load(): void { 
         var inst = this;  
         inst.element.addEventListener('mousedown', function (e) {  
            setTimeout(() => {  
              if (e.target.closest('.e-rowcell') ) {  
                  if(e.target.closest('.e-rowcell').classList.contains('e-editedbatchcell')){ 
                    return; 
                  } 
                    if (inst.isEdit)  
                        inst.endEdit();  
                    let index = e.target.closest('.e-rowcell').parentElement.rowIndex;  
                    inst.selectRow(index);  
                    let cellindex = e.target.closest('.e-rowcell').getAttribute("aria-colindex");   
                    let field = inst.columns[cellindex].field;  
                    inst.editCell(index, field);  // method to edit cell  
                     
                }  
                  
  
            }, 300);  
        })  
} 
 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


SK Sarathkumar, K (K.) September 9, 2019 01:45 PM UTC

Hi 

we are using fabric theme for the below mentioned queries.
Query#2:- With mode as 'cell' it is possible to do action depending on cell value, for example, depending on a particular cell value for a particular column show      dialog box. How can we achieve the same with mode as "Row” 

My requirement is  if the value in the column "Task Name " is changed to "Design", popup a dialog box



Query#3:-  Cannot read property 'querySelectorAll' of undefined". 

The issue is still reproducible ( https://stackblitz.com/edit/jr3h6x-gnwuxf?file=index.ts ).

Once we clicked the column having drop down, and select the value and clicked on any cell on the same column or different column then, if the cell contains any value or not , the cell behave like below image



Query#4:- Cell click issue in Row. 

With mode as "cell,once cell is clicked in tree grid, it is able to popup a dialog box and we are able to bind the selected value in dialog box to the cell.
But with edit mode as "Row" the above mentioned action is not able to perform


MP Manivannan Padmanaban Syncfusion Team September 10, 2019 10:24 AM UTC

Hi Sarath, 

Thanks for the update. 

Query 2: My requirement is  if the value in the column "Task Name " is changed to "Design", popup a dialog box 

From the above query, we are able to understand that you want to show the popup when the Task Name field value is changed. Using change event of DropdownList, we have achieved your requirement. Refer the below code example, 

    
let grid: TreeGrid = new TreeGrid( 
        { 
            ……….. 
            columns: [ 
…………………………………. 
                { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220,edit: { 
                create: () => { 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                read: () => { 
                    return autoCompleteObj.value; 
                }, 
                destroy: () => { 
                    autoCompleteObj.destroy(); 
                }, 
                write: (args: { rowData: Object, column: Column }) => { 
                  ……………………. 
                  }else{ 
                    autoCompleteObj = new DropDownList({ 
                      dataSource: <{key: string, value: any}[]>grid.grid.dataSource, 
……………………………………………………………. 
                        change:function(args:any){ 
                         alert(args.value);  // get the dropdown change value here. 
                        } 
                    }); 
                    autoCompleteObj.appendTo(elem); 
                  } 
                } 
            } 
            }, 
………………………. 
            ] 
        }); 


Refer the below help documentation link, 

Query 3: Once we clicked the column having drop down, and select the value and clicked on any cell on the same column or different column then, if the cell contains any value or not , the cell behave like below image 

We are unable to reproduce the reported issue in the shared link, kindly refer the below sample link. 

After referring the above sample still facing the issue, kindly get back to us with the below details. 
  1. Share the video demonstration of the issue.
  2. Reproduce the issue in the shared sample Or share the issue reproducible sample.

Query#4:- Cell click issue in Row. 

 
Kindly refer the query #2, in row mode we have showed the changed value in the alert box. If you want to get the complete changed value then use the actionComplete event. Still having the issue, please get back to us with below details. 

  1. Share the complete code example (i.e. the action which you have performed for cell mode, it will help us to achieve the same for edit mode row.)

Regards, 
Manivannan Padmanaban. 



Loader.
Up arrow icon