TreeGrid: Local Data: Filtering

[michaeljseo]

I'm trying to add filtering to a TreeGrid by extending your "Load from Local Data" example from your showcase. However, I'm getting a JavaScript exception. It seems the client is getting a datasource, but no datasource has been specified in this example of "loading from local data."

I added the following code:

                .
                .
                .
	        field.setCanSort(false);  
[B]
	        // FILTER
	        field.setCanFilter(true);  
	        treeGrid.setFilterLocalData(true);
	        treeGrid.setShowFilterEditor(true);
[/B]
	        treeGrid.setFields(field);  
                .
                .
                .

The logs show the following exception:

Uncaught JavaScript exception [TypeError: this.getDataSource() is undefined] in http://127.0.0.1:8888/performances/sc/modules/ISC_DataBinding.js, line 1906

MY CONFIGURATION:

smartgwtpower-3.1d Deployment 2012-11-08
GWT 2.4.0

[Isomorphic]

Filtering a TreeGrid does require a DataSource - it's needed in order to understand column types and such so that filtering is correctly applied.

[michaeljseo]

Thank you for the quick reply, Isomorphic!

[michaeljseo]

Ok. Now I'm applying filtering to the Tree::"Load on Demand" example, so I have a DataSource to filter with. However, I am not able to type anything into the filter row. There are no errors in the logs. Please advise.

My modifications are to the example are:

    public void onModuleLoad() {  
        TreeGrid employeeTreeGrid = new TreeGrid();  
        employeeTreeGrid.setWidth(500);  
        employeeTreeGrid.setHeight(400);  
[B]
        // Changes for my example of filtering a TreeGrid.
        //        employeeTreeGrid.setNodeIcon("icons/16/person.png");  
        //        employeeTreeGrid.setFolderIcon("icons/16/person.png");  
        employeeTreeGrid.setShowFilterEditor(true);
[/B]
        
        employeeTreeGrid.setShowOpenIcons(false);  
        employeeTreeGrid.setShowDropIcons(false);  
        employeeTreeGrid.setClosedIconSuffix("");  
        employeeTreeGrid.setAutoFetchData(true);  
        employeeTreeGrid.setFilterLocalData(true);
        employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());  
          
        employeeTreeGrid.draw();  
    }

and to EmployeeXmlDS.java:

    public EmployeeXmlDS(String id) {  
  
        setID(id);  
        setTitleField("Name");  
        setRecordXPath("/List/employee");  
        DataSourceTextField nameField = new DataSourceTextField("Name", "Name", 128);  
[B]
        //ADDED
        nameField.setCanFilter(true);
[/B]  
        DataSourceIntegerField employeeIdField = new DataSourceIntegerField("EmployeeId", "Employee ID");  
        employeeIdField.setPrimaryKey(true);  
        employeeIdField.setRequired(true);  
  
        
        DataSourceIntegerField reportsToField = new DataSourceIntegerField("ReportsTo", "Manager");  
        reportsToField.setRequired(true);  
        reportsToField.setForeignKey(id + ".EmployeeId");  
        reportsToField.setRootValue("1");  
  
        DataSourceTextField jobField = new DataSourceTextField("Job", "Title", 128);  
        DataSourceTextField emailField = new DataSourceTextField("Email", "Email", 128);  
        DataSourceTextField statusField = new DataSourceTextField("EmployeeStatus", "Status", 40);  
        DataSourceFloatField salaryField = new DataSourceFloatField("Salary", "Salary");  
        DataSourceTextField orgField = new DataSourceTextField("OrgUnit", "Org Unit", 128);  
        DataSourceTextField genderField = new DataSourceTextField("Gender", "Gender", 7);  
        genderField.setValueMap("male", "female");  
        DataSourceTextField maritalStatusField = new DataSourceTextField("MaritalStatus", "Marital Status", 10);  
        
        setFields(nameField, employeeIdField, reportsToField, jobField, emailField,  
                statusField, salaryField, orgField, genderField, maritalStatusField);  
  
        setDataURL("ds/test_data/employees.data.xml");  
        setClientOnly(true);  
    }

[Isomorphic]

Get rid of your call to filterLocalData. That setting applies when you do *not* have a DataSource.

[michaeljseo]

Took that out, but still had the same result. (BTW, sorry for leaving that in unbolded).

[michaeljseo]

Ok. Making some progress...Here's the new mod to the original code:

        employeeTreeGrid.setShowFilterEditor(true);
        ListGridField nameField = new ListGridField("Name", "Name");  
        employeeTreeGrid.setFields(nameField);

Now I can type in the filter row. However, it seems to be doing an exact match. So my next step will be to figure out how to do partial matches.

Please advise if the above code makes sense or not. I appreciate your careful reading of my posts.

[michaeljseo]

Well, I can filter, but I can only do an exact match. I can't figure out how to perform a partial match. I added an handler to perform a partial match, but I get an exception. The offending line of code is the filterData call.

        employeeTreeGrid.setKeepParentsOnFilter(true);
        employeeTreeGrid.setShowFilterEditor(true);
        ListGridField nameField = new ListGridField("Name", "Name");  
        employeeTreeGrid.setFields(nameField);  
        employeeTreeGrid.addFilterEditorSubmitHandler(new FilterEditorSubmitHandler() {

			@Override
			public void onFilterEditorSubmit(FilterEditorSubmitEvent event) {
				AdvancedCriteria criteria = new AdvancedCriteria();
				if(event.getCriteria().isAdvanced())
				{
					criteria = (AdvancedCriteria) event.getCriteria();
					OperatorId how = criteria.getOperator();
				}
				else
				{
					criteria.addCriteria(event.getCriteria());
				}
				criteria.setOperator(OperatorId.CONTAINS);
[B]
				employeeTreeGrid.filterData(criteria);
[/B]
			}
        	
        });

19:04:11.813 [ERROR] [performances] Uncaught exception escaped

com.google.gwt.event.shared.UmbrellaException: One or more exceptions caught, see full set in UmbrellaException#getCauses
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:129)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:71)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)
    at sun.reflect.GeneratedMethodAccessor31.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
    at java.lang.Thread.run(Thread.java:680)
Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): _1 is undefined
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
    at com.smartgwt.client.widgets.tree.TreeGrid.filterData(TreeGrid.java)
    at com.fcm.performances.client.Performances$1.onFilterEditorSubmit(Performances.java:61)
    at com.smartgwt.client.widgets.grid.events.FilterEditorSubmitEvent.dispatch(FilterEditorSubmitEvent.java:101)
    at com.smartgwt.client.widgets.grid.events.FilterEditorSubmitEvent.dispatch(FilterEditorSubmitEvent.java:1)
    at com.google.gwt.event.shared.GwtEvent.dispatch(GwtEvent.java:1)
    at com.google.web.bindery.event.shared.EventBus.dispatchEvent(EventBus.java:40)
    at com.google.web.bindery.event.shared.SimpleEventBus.doFire(SimpleEventBus.java:193)
    at com.google.web.bindery.event.shared.SimpleEventBus.fireEvent(SimpleEventBus.java:88)
    at com.google.gwt.event.shared.HandlerManager.fireEvent(HandlerManager.java:127)
    at com.smartgwt.client.widgets.BaseWidget.fireEvent(BaseWidget.java:71)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)
    at sun.reflect.GeneratedMethodAccessor31.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
    at java.lang.Thread.run(Thread.java:680)

[michaeljseo]

Got it to work. I now have a treegrid that filters similarly as the listgrids, which is a filter on case insensitive substrings. It seems, by default, the treegrid will filter on exact matches. It seems odd that I had to add the addFilterEditorSubmitHandler that calls that filterData, which IMO should be the default behavior. Adding the handler and calling filterData on the tree grid with the criteria from filter editor seems redundant to the API?

I had to add the code in bold in onModuleLoad():

.
.
.
        employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());  
[B]
        employeeTreeGrid.setShowFilterEditor(true);
        ListGridField nameField = new ListGridField("Name", "Name");  
        employeeTreeGrid.setFields(nameField);  
        employeeTreeGrid.addFilterEditorSubmitHandler(new FilterEditorSubmitHandler() {

			@Override
			public void onFilterEditorSubmit(FilterEditorSubmitEvent event) {
				employeeTreeGrid.filterData(event.getCriteria());
				event.cancel();
			}
        	
        });
          [/B]
          
        employeeTreeGrid.draw();  
.
.
.

And added this to EmployeeXmlDS datasource:

        nameField.setCanFilter(true);

[Isomorphic]

We'll be taking a look at this, as it seems like you've had to add some additional code to get what should have been default behavior. But it may take some time to get to.

[michaeljseo]

Thank you!

I'm very impressed on how carefully you (is it a team of you) look at all these reports.

At least I have something that works.