BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
public onOpen = () => {
// modifying the dropdownlist's classes for styling
this.dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow";
// rendering the treeview only on first time
if (this.treeObj == null || this.treeObj == undefined) {
this.treeObj = new TreeView({
fields: { dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
// use the nodeselected event to add the text to dropdown's input element.
nodeSelected: (args: any) => {
let drop = (document.getElementById("games") as any).ej2_instances[0];
drop.inputElement.value = args.nodeData.text;
}
});
this.treeObj.appendTo('#tree');
}
} |
document.getElementById("btn").addEventListener("click", function () {
//Using DropDownList's instance
alert("Using DropDownList's instance - " + dropDownListObj.element.value);
//Using TreeView's instance
alert("Using TreeView's instance - " + treeObj.getTreeData(treeObj.selectedNodes[0])[0].name);
}); |
<form [formGroup]="skillForm">
<h4> DropDown TreeView</h4>
<ejs-dropdownlist formControlName="parentId" name="parentId" id='games' #sample1 (open)='onOpen()'>
<ng-template #noRecordsTemplate>
<div id='tree'></div>
</ng-template>
</ejs-dropdownlist>
</form> |
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() : void {
this.skillForm = this.fb.group({
parentId: ['', Validators.required],
});
}
public treeObj: TreeView;
public labelData: { [key: string]: Object } [] = null;
public onOpen = () => {
this.labelData = [{
hasChild: true,
id: 83,
labelName: "formPageLAbel",
labelPageType: 2,
labelType: 1,
name: "formPageLAbel",
organisationId: 57,
parentId: 0,
userId: 2444
}, {
hasChild: false,
id: 84,
labelName: "labelunder",
labelPageType: 2,
labelType: 1,
name: "labelunder",
organisationId: 57,
parentId: 83,
pid: 83,
userId: 2444
}, {
hasChild: false,
id: 84,
labelName: "labelunder",
labelPageType: 2,
labelType: 1,
name: "labelunder",
organisationId: 57,
parentId: 83,
pid: 83,
userId: 2444
}];
// modifying the dropdownlist's classes for styling
this.dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow";
// rendering the treeview only on first time
if (this.treeObj == null || this.treeObj == undefined) {
this.treeObj = new TreeView({
fields: { dataSource: this.labelData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
// use the nodeselected event to add the text to dropdown's input element.
nodeSelected: (args: any) => {
let drop = (document.getElementById("games") as any).ej2_instances[0];
drop.inputElement.value = args.nodeData.text;
}
});
this.treeObj.appendTo('#tree'); |
<ejs-dropdownlist formControlName="parentId" name="parentId" id='games' #sample1 (beforeOpen)='beforeOpen($event)' (open)="onOpen($event)">
<ng-template #noRecordsTemplate>
<div id='tree'></div>
</ng-template>
</ejs-dropdownlist> |
public onOpen(args){
if(this.labelData.length == 0){
this.dropdownObj.popupObj.element.querySelector('#tree').innerHTML = "No records found";
}
} |
let drop = (document.getElementById("games") as any).ej2_instances[0];
drop.inputElement.value = args.nodeData.text;
drop.hidePopup(); |
{
"nodeId": "04", "nodeText": "Pictures", "icon": "folder", "expanded": true,
"nodeChild": [
{
"nodeId": "04-01", "nodeText": "Camera Roll", "icon": "folder", "expanded": true,
"nodeChild": [
{ "nodeId": "04-01-01", "nodeText": "WIN_20160726_094117.JPG"},
{ "nodeId": "04-01-02", "nodeText": "WIN_20160726_094118.JPG"}
]
},
{ "nodeId": "04-02", "nodeText": "Wind.jpg", "icon": "images" },
{ "nodeId": "04-03", "nodeText": "Stone.jpg", "icon": "images" }
]
},
|
In fact, this component only loads its data upon opening the dropdown by clicking on it. I want a way that when my xyz component initialized, in which I'm using this EJ2 dropdown component. then it should load up with its provided data. Also, if I'm loading my xyz component for updating the data then previously save data must be reflected in the EJ2 dropdown component and upon opening this EJ2 dropdown component, the already saved value must be show as selected.
Kindly help me out.
Thanks.