|
<template> section
<ejs-treegrid
id="TreeGrid"
:dataSource="data"
:treeColumnIndex="1"
childMapping="subtasks"
ref="treegrid"
:editSettings="editSettings"
:toolbar="toolbar"
>
<e-columns>
<e-column
field="taskID"
:isPrimaryKey="true"
headerText="Task ID"
width="90"
textAlign="Right"
></e-column>
<e-column
field="taskName"
headerText="Task Name"
width="170"
></e-column>
<e-column
field="approved"
headerText="Approved"
editType="booleanedit"
type="boolean"
width="110"
displayAsCheckBox="true"
textAlign="Right"
></e-column>
<e-column
field="progress"
headerText="Progress"
width="120"
:edit='dpParams'
textAlign="Right"
></e-column>
<e-column
field="priority"
headerText="Priority"
editType="dropdownedit"
width="110"
textAlign="Right"
></e-column>
</e-columns>
</ejs-treegrid>
App.vue
let autoCompleteObj;
export default {
components: {
"ejs-treegrid": TreeGridComponent,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective,
},
data() {
return {
dpParams : {
create: function() {
let elem =
document.createElement('input');
elem.id = 'progress';
return elem;
},
read: function() {
return autoCompleteObj.value;
},
destroy: function() {
autoCompleteObj.destroy();
},
write: function(args) {
if ((args.rowData ).taskID === '1' ||(args.rowData ).taskID
=== '3') {
var treegrid =
document.getElementsByClassName("e-treegrid")[0]
.ej2_instances[0];
autoCompleteObj = new AutoComplete({ //render AutoComplete
dataSource: (
treegrid.grid.dataSource
),
fields: { value: 'progress' },
value:
args.rowData[args.column.field],
});
autoCompleteObj.appendTo(args.element);
} else {
var treegrid = document.getElementsByClassName("e-treegrid")[0]
.ej2_instances[0];
autoCompleteObj = new DropDownList({ //render dropdown
dataSource: (
treegrid.grid.dataSource
),
fields: { value: 'progress' },
value:
args.rowData[args.column.field],
});
autoCompleteObj.appendTo(args.element);
}
}
},
editSettings: {
allowDeleting: true,
allowEditing: true,
allowAdding: true,
newRowPosition: "Below",
},
};
},
};
|
