private initGrid(col?) {
this.columns = [{ type: 'checkbox', width: 10 }];
this.columns = col ? (this.columns as any).concat(col) : [];
// this.filterOptions = { type: 'Excel' };
this.toolbarOptions = ['Add', 'Update', 'Delete', 'Cancel', 'Search'];
this.editSettings = {
allowAdding: true, allowDeleting: true, mode: 'Normal', //allowEditing: true,
showDeleteConfirmDialog: true, showConfirmDialog: true
};
this.pageSettings = { pageSizes: true, pageSize: 5 };
this.sortOptions = col ? { columns: col.map(el => { return { field: el.field, direction: 'Ascending' } }) } : {};
this.windowHeight = window.innerHeight !== undefined ? window.innerHeight - 350 : 400;
if (this.grid) {
this.grid.clearFiltering();
this.grid.refresh();
console.log(this.grid.columns);
}
}
private editRow(idx, ctrl) {
let dropDownListEdit: IEditCell;
let dropDownList: DropDownList;
let ele: HTMLElement;
dropDownListEdit = {
create: () => {
ele = document.createElement('input');
return ele;
},
read: () => {
return dropDownList.text;
},
destroy: () => {
dropDownList.destroy();
},
write: (args: { rowData: object, column: Column }) => {
dropDownList = new DropDownList({
dataSource: idx === 0 ? this.parentDdlData : [],
allowFiltering: true,
fields: { value: 'id', text: 'name' },
itemTemplate: "<div>${name} | ${description}</div>",
change: () => {
let tempQuery: Query = new Query().where('id', 'equal', dropDownList.value);
this.editDropDowns.forEach((el, i) => {
if (!(i <= idx)) {
el.text = null; el.enabled = false;
this.disabled = true;
this.location.name = null;
this.location.description = null;
}
});
if (tempQuery.queries[0].e.value != null) {
this.getGridDropdownData(tempQuery.queries[0].e.value).pipe(takeUntil(this.unSubscribe)).subscribe(res => {
this.validationData = res.data;
if (this.editDropDowns[idx + 1]) {
this.editDropDowns[idx + 1].enabled = true;
this.editDropDowns[idx + 1].text = null;
this.editDropDowns[idx + 1].dataSource = res.data;
this.editDropDowns[idx + 1].dataBind();
} else {
this.disabled = false;
}
});
}
},
filtering: (e) => {
const data = dropDownList.dataSource
let predicate = new Predicate('description', 'startswith', e.text, true);
predicate = predicate.or('name', 'startswith', e.text, true);
let query: Query = new Query();
//frame the query based on search string with filter type.
query = (e.text !== '') ? query.where(predicate) : query;
//pass the filter data source, filter query to updateData method.
e.updateData(data, query);
},
actionComplete: () => false,
enabled: idx !== 0 ? false : true,
placeholder: 'Select ' + ctrl,
floatLabelType: 'Never'
});
dropDownList.appendTo(ele);
this.editDropDowns.push(dropDownList);
}
}
return dropDownListEdit;
}
