How to freeze column in Treegrid ( JavaScript platform ) | JavaScript - EJ 2 Forums

PK Padmavathy Kamalanathan Syncfusion Team September 2, 2019 05:22 AM

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 11:52 AM

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 06:08 AM

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.

Demo Link:- https://ej2.syncfusion.com/demos/#/material/tree-grid/inline-editing.html

Documentation Link:-https://ej2.syncfusion.com/documentation/api/treegrid/editSettings/

We need some more additional details about this requirement. Share us the following details.

Do you want to show empty row by default while on initial Rendering.
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);

})

}

Sample Link:- https://stackblitz.com/edit/jr3h6x-79afvq?file=index.ts

API Link:- https://ej2.syncfusion.com/documentation/api/treegrid/#startedit

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);

})

}

Sample Link:- https://stackblitz.com/edit/jr3h6x-e25zrf?file=index.ts

API Link:- https://ej2.syncfusion.com/documentation/api/treegrid/#editcell

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

Regards,

Farveen sulthana T

SK Sarathkumar, K (K.) September 4, 2019 09:34 AM

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 08:25 AM

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.

Sample Link:- https://stackblitz.com/edit/jr3h6x-8xvyt9?file=index.ts

Demo for EditTemplate:- https://ej2.syncfusion.com/demos/#/material/tree-grid/edit-template.html

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);

})

}

Modified Sample Link:- https://stackblitz.com/edit/jr3h6x-gnwuxf?file=index.ts

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

Regards,

Farveen sulthana T

SK Sarathkumar, K (K.) September 9, 2019 08:45 AM

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 05:24 AM

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.

https://stackblitz.com/edit/jr3h6x-pcu3xu?file=index.html

After referring the above sample still facing the issue, kindly get back to us with the below details.

Share the video demonstration of the issue.
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.

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.