Angular 4/5/6 Issue with JQXTextArea inside TreeGrid column

[svedavyaParticipant]

Hi Team, I am using JqxTreeGrid and I need one of my columns to be textArea so i have used custom editors as below but I am facing issue with values kindly help.

{
text: ‘PM Comments’,
cellClassName: this.cellsPMRendererFunction,
dataField: ‘pmComments’,
width: 300,
columnType: ‘template’,
cellsalign: ‘left’,
align: ‘center’,
editable: true,
createEditor: (row, cellvalue, editor, cellText, width, height) => {
// construct the editor.
editor.jqxTextArea({
width: ‘100%’,
height: ‘100%’,
theme: ‘metro’,
placeHolder:’Enter comments here’
});
editor.jqxTextArea(‘val’, cellvalue);
},
initEditor: (row, cellvalue, editor, celltext, width, height) => {
// set the editor’s current value. The callback is called each time the editor is displayed.
console.log(“inside init”);
console.log(cellvalue)
editor.jqxTextArea(‘val’, cellvalue);
},
getEditorValue: (row, cellvalue, editor) => {
// return the editor’s value.

return editor.val();
}
}

// Lets say i have 3 rows,

First, I have saved some value in this text area, then if I edit next row instead of showing placeholder text, its always copying previously saved data into this new row. Its messing our even if uses does not enter value into this column while saving others its copying previous edited textArea value into any row edit further, its a blocker for me Kindly guide me how to achieve this if there is any other way.

[ritesh955Participant]

Hi, I am also facing similar issue any update on this?

[svedavyaParticipant]

Hi Team,

Any suggestions on this please?

Thanks
Sandeep

[StanislavParticipant]

Hello Sandeep Vedavyas,

Can you provide us with a full example?
You can use the online editor: tsEditor

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[svedavyaParticipant]

Hi Stanislav,

I can share the code in tsEditor, however in meantime can you show me an example of using customEditor for text area inside JqxTreeGrid or Jqxgrid

Thanks
Sandeep

[svedavyaParticipant]

Any update on this, please ?

[StanislavParticipant]

Hello Sandeep,

Here is an example of jqxTreeGrid with TextArea as the last column.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})

export class AppComponent {
	@ViewChild('treeGridReference') treeGrid: jqxTreeGridComponent;

	source: any =
	{
		dataType: "csv",
		dataFields: [
			{ name: 'EmployeeKey', type: 'number' },
			{ name: 'ParentEmployeeKey', type: 'number' },
			{ name: 'FirstName', type: 'string' },
			{ name: 'LastName', type: 'string' },
			{ name: 'DepartmentName', type: 'string' }
		],
		hierarchy:
		{
			keyDataField: { name: 'EmployeeKey' },
			parentDataField: { name: 'ParentEmployeeKey' }
		},
		id: 'EmployeeKey',
		url: '../assets/sampledata/employeesadv.csv'
	};

	dataAdapter: any = new jqx.dataAdapter(this.source);

	columns: any[] =
	[
		{ text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 250 },
		{ text: 'LastName', dataField: 'LastName', width: 250 },
		{
			text: 'Department Name', dataField: 'DepartmentName', width: 350, columnType: 'template',
			createEditor: (row, cellvalue, editor, cellText, width, height) => {
				// construct the editor. 
				let TextAreaSource = ['Recruiter', 'Benefits Specialist', 'Human Resources Manager', 'Assistant to the Chief Financial Officer', 'Accounts Manager'];
				editor.jqxTextArea({
					width: 300, height: 90, source: TextAreaSource, minLength: 1
				});
			}
		}
	];

	ready: any = () => {
		this.treeGrid.expandRow(32);
	};
}

app.component.HTML

<jqxTreeGrid #treeGridReference
			 [width]="850" [height]="'auto'" [source]="dataAdapter" [pageable]="true" 
			 [columns]="columns" [ready]="ready" [editable]="true">
</jqxTreeGrid>

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts