Search toolbar separated from the tree grid
Hello.
Is it possible to have a search bar not included in the tree grid? Something like this:
Also, could we define some subfilter like date picker?
Could you please provide me an example for this approach?
Best regards,
M
SIGN IN To post a reply.
9 Replies
Hi Customer,
Thanks for contacting Syncfusion Support.
Query#:- Is it possible to have a search bar not included in the tree grid? could we define some subfilter like date picker?
From your query we understood that you need to place external search Toolbar Item instead of using default Toolbar. To achieve this requirement we have placed the Toolbar component externally and rendered it as Search TextBox and DatePicker using template property of the Toolbar. Using Search and filterByColumn method we have performed the Search actions in TreeGrid.
Refer to the code below:-
|
App.Component.html
<ejs-toolbar (created)="onCreate($event)">
<e-items>
<e-item template='<input type="text" tabindex="1" id="dpelement" />' type='Input' align='Left'>
</e-item>
<e-item template='<input type="text" tabindex="1" id="inputelement" />' type='Input' align='Right'>
</e-item>
</e-items>
</ejs-toolbar>
<ejs-treegrid #treegrid [dataSource]='data' height='350' allowPaging='true' [pageSettings]='pageSettings'
childMapping='subtasks' [treeColumnIndex]='1' allowFiltering='true'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='80' textAlign='Right'></e-column>
. . .
</e-columns>
</ejs-treegrid>
App.Component.ts
export class AppComponent {
public searchInput: any = new TextBox({
placeholder: "Search",
change: args => {
this.treegrid.search(args.value); //perform search action using Search method
}
});
public datePicker: any = new DatePicker({
placeholder: "Sub filter: Start Date",
change: e => {
this.treegrid.filterByColumn("startDate", "equal", e.value); //using filterByColumn method perform Filtering on datePicker
}
});
public onCreate(e: any) {
this.searchInput.appendTo("#inputelement");
this.datePicker.appendTo("#dpelement");
}
} |
Sample Link:- https://stackblitz.com/edit/angular-smzaif-ymtqwl
Screenshot:-
As Like DatePicker:-
Refer to the documentation below:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Customer,
Query#:- What about Combobox in the filter. And I want to search for the name because I have the name property in the list grid.
As we have mentioned earlier, you can also place the ComboBox using template property of the Toolbar component provided in the documentation. Also you can get the selected text using change event of the ComboBox and pass the text to filterByColumn method to get the filtered records in TreeGrid.
Refer to the code below:-
|
App.Component.html
<ejs-toolbar (created)="onCreate($event)">
<e-items>
<e-item template=' <input type="text" tabindex="1" id="comboelement"/>' type='Input' align='Left'>
</e-item>
. . .
</e-items>
</ejs-toolbar>
App.Component.ts
export class AppComponent {
public data: Object[] = [];
public taskData: { [key: string]: Object }[] = [
{ Id: "1", TaskName: "Planning" },
{ Id: "2", TaskName: "Plan timeline" },
{ Id: "3", TaskName: "Design" }
];
public Combobox: any = new ComboBox({
//set the data to dataSource property
dataSource: this.taskData,
change: args => {
var val = args.value;
if (!isNullOrUndefined(val)) {
this.treegrid.filterByColumn("taskName", "equal", val);
} else this.treegrid.clearFiltering();
},
// use text and Value with name value
fields: { text: "TaskName", value: "TaskName" },
// set placeholder to ComboBox input element
placeholder: "Select a task"
});
|
Sample Link:- https://stackblitz.com/edit/angular-smzaif-ecq5ej
Screenshot:-
Note:- To get name value in args of change event use text and value property of fields of combobox of TaskName.
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Hi Customer,
Query#:- Could you provide me an example for dynamic columns from the " example" and biding for the combobox filter - Priority?
We have modified the solution in the provided sample(with Dynamic columns) and performed Filtering for Priority column.
Refer to the modified sample Link:- https://stackblitz.com/edit/angular-jgqh9d-kigp47
Screenshot:-
Refer to the documentation about filter hierarchy modes given below:-
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
Thank you for the quick answer.
There is still strange behavior if I bind the combobox in the tree grid control.
Let's that in data (jsontreegriddata.ts) I have only "Id" property from the task data (in json data 
=== is Id from taskData),
=== is Id from taskData), and I am showing "Priority" property in the list.
Also, the list should contain editable combobox with the options ("Normal", "Low", "High")
Please take a look at the example:
Hi Customer,
Query#:- Let's that in data (jsontreegriddata.ts) I have only "Id" property from the task data (in json data 
From your query we suspect that you need to show the value to Priority column as like Foreignkey dataSource. In order to achieve this we suggest you to bind ForeignKey column as we have discussed in the documentation below
Also in your provided code example, you have shown Id field for TreeGrid column which is not present in the TreeGrid dataSource. In order to perform TreeGrid actions, it is necessary to bind the field value which is present in TreeGrid dataSource. We have modified your sample to display priority column in TreeGrid and perform Filtering in it.
Refer to the modified code below:-
|
export class AppComponent {
@ViewChild("treegrid") public treegrid: TreeGridComponent;
public data: Object[] = [];
public taskData = [
{ Id: "1", Priority: "Normal" },
{ Id: "2", Priority: "Low" },
{ Id: "3", Priority: "High" }
];
public Combobox: any = new ComboBox({
//set the data to dataSource property
dataSource: this.taskData,
change: args => {
var val = args.value;
if (!isNullOrUndefined(val)) {
var value = parseInt(this.taskData.filter(data => data.Priority === val)[0].Id)
this.treegrid.filterByColumn("priority", "equal", value);
} else this.treegrid.clearFiltering();
},
// maps the appropriate column to fields property
fields: { text: "Priority", value: "Priority" },
// set placeholder to ComboBox input element
placeholder: "Select a task"
});
private createTreeGridColumns() {
return [
{ field: "taskID", headerText: "Task ID", editType: "defaultedit" },
{ field: "startDate", headerText: "Start Date", editType: "defaultedit" },
{
field: "priority", //use Field which is present in TreeGrid dataSource
headerText: "Priority",
valueAccessor: ((field, data, column) => {
if (data.priority !== "Critical") {
const mcref = this.taskData.find(
td => td.Id === data.priority.toString()
);
console.log(mcref);
return mcref ? mcref.Priority : "";
}
}).bind(this),
editType: "dropdownedit",
edit: {
params: {
query: null,
dataSource: this.taskData,
fields: { value: "Id", text: "Priority" }
}
}
},
}
];
</script> |
Modified Sample Link:- https://stackblitz.com/edit/angular-jgqh9d-pneksz
If your requirement is different from above, share detailed Explanation of your requirement to proceed further.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
