Filter in the Tree Grid

[Prams]

hi,
I have been trying to get the filter on the treegrid. By giving the showFilterEditor:true i am able to display the filter editor on the screen but when i provide value to it i am either getting a javascript error telling the some property is null or if the filtering takes place i am not getting any result and the grid displays No results matching your criteria, which is not the case.

Treegrid is said to be extension of Listgrid and all the methods of List grid, apart from those which are overridden in Treegrid can be used here.
Can you tell me what should i do to get the filter working for tree grid.

[Isomorphic]

Hi Prams
While treeGrids are a subclass of ListGrid, and do inherit properties such as showFilterEditor from the superclass, the data object in a TreeGrid is a different class from the data object in a ListGrid, so listGrid APIs that interact with the data do not necessarily apply to the TreeGrid.

Databound TreeGrids create a resultTree object to represent / manage the data returned from the server.
Take a look at the docs for treeDataBinding for an overview of Tree data binding.

Specifically with filtering data - we don't have-built in support for treeGrid data filtering with the filter editor (In fact filtering the results of a hierachical fetch is somewhat ambiguous -- should the filter apply to every level of the tree, or just the current level? What happens when a parent does not match filter criteria, but its children do, etc)
However, if you let us know exactly what behavior you're trying to achieve, we can probably show you the best approach to take to implement the filtering yourself

Thanks
Isomorphic Software

[Prams]

Hi,
Thanks for the replay. Actually I am trying to filter the data for the inner most row i.e. when i enter the data in the filter editor i will be getting all the rows which match the criteria at the same time the rows which are at hierarchy higher than that of the inner row shall be present even though they do not contain the data matching the filter criteria.

Perhaps we can generate an event on click of the filter and once the control goes to the the java side we can try and override getFilterData() method so as to get the required data.

Note that when i am saying that I need to show the rows which are at higher level of hierarchy than the inner most rows I am assuring you that these higher rows wont contain any data i.e. they will be blank. Thus we can draw those rows on click of filter that are blank and those rows who have some values with it

[Isomorphic]

Hi Prams,

You're on the right track:
When the user attempts to filter a listGrid using the filterEditor, it calls ListGrid.filterData() on the ListGrid with which it is associated.
In the 5.6 build filterData() is not supported on TreeGrids, but fetchData() is.
You can therefore override the filterData method on your TreeGrid to call 'fetchData()', passing in any criteria it recieves.
In addition to this, you should make sure in your TreeGrid you specify an explicit fields array containing the field[s] you want to filter by. TreeGrids don't require an explicit fields array - by default they display a single tree-field, but for your usage you will need the fields to be properly defined.
So your TreeGrid might look something like this:

isc.TreeGrid.create({
    showFilterEditor:true,
    dataSource:"myDSName",
    fields:[{name:"name", title:"Name"}],
    filterData : function (criteria, callback, requestProperties) {
        return this.fetchData(criteria, callback, requestProperties);
    }
    ... various properties
})

TreeGrid.fetchData() will send the criteria it is passed to the server, and create a new ResultTree based on the server's response.
To implement the behavior you describe you're going to have to write a custom implementation for the fetch operation on the server to perform the filter based on the criteria passed in (in your case, applying these criteria to the child nodes only). Your operation should then return the filtered data to the client where it will automatically be integrated into a new ResultTree object.

Let us know if you run into difficulties
Thanks
Isomorphic Software

[msatkevich]

Hi,

On my server side PHP script, how do I read what the user typed into the filter box?

Is the name of the request variable the same as the field name? i.e. In your example, I would be looking for a value stored in "name".

Thanks,
Mike

[Isomorphic]

Yes, if you are using dataSource.dataProtocol:"getParams" (the default for a dataFormat:"xml" or dataFormat:"json" DataSource), the fields typed into the field arrive at the server as same-named HTTP query params. Likewise for forms in general.

[msatkevich]

That works.

To get around the ambiguity of the tree search (for now), I ask users for a search phrase, which I then split on spaces, and create additional OR clauses in my SQL fetch.

This is quicker than trying to get parent and child records recursively in the fetch logic for a single search word.

Users know they need to enter a fragment of the customer (parent), and a fragment of the job (child), and that will return a much shorter tree.

The alternative logic for a single search word is a little trickier. If anyone has a good algorithm, let me know.

Thanks,
Mike

[knguyen]

Is it possible to apply the filter locally when the tree grid has all the data?

Calling fetchData on ListGrid would only ask the server if necessary but it seems like TreeGrid always initiate request to the server.

[tegenligger]

I'm also curious to know if there's a good way to do filtering in the TreeGrid client side.

If I already have the entire dataset available I should be able to show or hide nodes based on the fields, but how?

[cirovladimir]

If I already have the entire dataset available I should be able to show or hide nodes based on the fields, but how?

I have a REST service which returns a list of users, with a ListGrid I filter locally as shown below (data is retrieved from server once):

		ListGrid grdUsers = new ListGrid();
		grdUsers.setDataSource(new RestDataSource(){
			{
				setDataURL("api/rest/users");
				setDataFormat(DSDataFormat.JSON);
				
				DataSourceField fldId=new DataSourceField("id", FieldType.TEXT);
				fldId.setPrimaryKey(true);
				setFields(fldId);
			}
		});
		grdUsers.setAutoFetchData(true);
		grdUsers.setFilterOnKeypress(true);
		grdUsers.setDataProperties(new ResultSet(){
			{
				setFetchMode(FetchMode.LOCAL);
				setUseClientFiltering(true);
			}
		});
		grdUsers.setShowFilterEditor(true);

[jay.l.fisher]

I'm also curious to know if there's a good way to do filtering in the TreeGrid client side.

If I already have the entire dataset available I should be able to show or hide nodes based on the fields, but how?

Same here. I've reviewed all of the posts related to filtering of data in an IPickTreeItem and still can't seem to see how it is done.

I have an IPickTreeItem that is loaded by a fetch to the server. I then need to filter the tree so that it only shows the nodes that match some criteria. Ideally all of the filtering would be done client side since I already have all of the data and the criteria is based on the user's selection in another form item.

Any pointers on how to accomplish this?

[Isomorphic]

For client-side filtering of a completely loaded Tree, see Tree.getFilteredTree.

[jay.l.fisher]

It must be staring me in the face, but I can't see how to access the Tree that has been loaded into the IPickTreeItem so that I can call getFilteredTree() on it.

[Isomorphic]

PickTreeItem doesn't have such an API, but if you've created a Tree directly you can obtain various filtered subsets of it and provide those to an PickTreeItem via setValueTree().

[jay.l.fisher]

Is there a simple way to populate a Tree with the results of a fetch to the datasource that is currently being used to populate the IPickTreeItem? I don't see any api on the Tree class to, for instance, setData() with a record list?