Question

How do you implement a dijit/TextBox which filters the data in an OnDemandGrid-style dGrid when the dGrid is backed by a JsonRest store? I want to search in the box and have the grid update as I type.

I can’t find any examples in the dGrid docs and although this looks to be just the thing – Is it possible to filter data in a dgrid like you can in a datagrid? If so, how? – it uses a MemoryStore and swapping it out for a JsonRest store doesn’t work.

Do I need to query the store then refresh the grid? Do I need Observable? What about dojo.store.util.SimpleQueryEngine? Is that part of the answer.

Presumably there have to be some changes on the server, too, to respond to queries.

Answer 1

Turns out it’s rather easy. You just set the query property on the grid and call refresh().

I then had to make a simple change to my server-side code to handle the ?search=whatever query string.

Here’s my code:

// assuming we have a declarative dijit/TextBox and a reference to our grid in myGrid                                           
// wait for DOM before wiring up our textbox (when dijit parsed)
ready( function() 
{
    var timeoutId = null,
        searchTextBox = registry.byId( 'searchTextBox' );

    searchTextBox.watch( 'value', function( name, oldValue, newValue ) 
    {
        if( newValue.length == 1 )
        {
            return;
        }   

        if( timeoutId ) 
        {
            clearTimeout( timeoutId );
            timeoutId = null;
        };

        timeoutId = setTimeout( function() 
        {
            myGrid.query = { search: newValue };
            myGrid.refresh();
        }, 300 );
    } );
} );