Dojo Data Grid – Part 10: Full-text Search and Field-Specific Filtering

So far, we’ve built a grid that scrolls infinitely and can be sorted on specified columns. The next step will be to add the ability to search the view and filter it by specific fields.

Dojo Data Grid Series

Full-Text Searching

Full-text searching works the same way as it does with other view controls, such as the view panel and data view. There’s a search property, but you could also use the keys, startKey, or categoryFilter properties, depending on your needs and your data.

It just takes 3 steps:

  1. Create a search field (Edit Box) and bind it to a scope variable
  2. Bind the Search property of the REST service (All Properties > basics > service > search) to the same scope variable
  3. Create a button that just triggers a partial refresh on the grid and the REST service (ideally, a panel that includes both)

Grid10_1

Set the Grid Height

One interesting side effect of setting the Search property of the REST service is that it makes the grid not display any rows, even though you can look at the REST service and see that it has data.

Grid10_2

Setting the autoHeight property of the grid (All Properties > basics > autoHeight) will take care of this problem. (I’m guessing you could also set it with CSS, but I haven’t tried that yet.)

Field-Specific Filtering

To make this even more user-friendly, you can provide the ability to filter based on specific fields.

To do so, add several fields (they don’t need to be bound to anything) and put code like this on the Search button, which also needs to refresh the REST service and the grid:

Grid10_3

This code just builds the search string, including the ‘AND’ clauses as needed. It also appends the search wildcard (*) to each string to provide results that are more in line with what the users expect. Without that, they would only get results for fields that exactly match the search string. This way, they will get results for field values that start with the search string. You can tweak this as needed — even by adding your own option to check ‘Starts With’, ‘Contains’, ‘Ends With’, etc. You can build this as complex as you need it.

The Clear button just sets the search string scope variable to an empty string and refreshes the REST service and grid.

Note: You cannot compute this in the search property of the REST service because it doesn’t work. It must be too late in the process to perform and then execute the search. This is why the search string is built by the button and stored in the scope variable and the REST service’s search parameter reads it from the scope variable.

grid.filter()

There’s a filter() method of the grid, but I’m not covering it here because it’s only defined to be a client-side solution, so it wouldn’t filter the full set of data from the view (but rather just what’s visible in the client). I was unable to verify this because it wouldn’t work for me at all anyway.

Cannot Sort Search Results

Even if you have sorting enabled and working in the grid, it will not do anything when you sort while the results have been filtered.

Up Next

In the next post, we’ll look at how to edit data directly in the grid!

Advertisements

18 responses to “Dojo Data Grid – Part 10: Full-text Search and Field-Specific Filtering”

  1. edm00se (@edm00se) says :

    Still loving the series! Excited to see what’s next.

  2. Stephan H. Wissel says :

    Really neat! With series like this developing gets much easier

  3. byrd1089 says :

    Great series Brad! It definitely goes into my XPages bookmarks.

  4. Shean McManus says :

    Nice webinar yesterday! I was working through my own example today and am stuck on the search/filtering piece. I have a panel that contains the REST control and the dojo grid control but when I give that panel and id (necessary for the filtering and search piece) the entire panel does not render. It looks like the HTML is sent to the browser (I can see as much in Firebug) but the grid doesn’t display. If I remove the panel id it shows up. Doesn’t matter what I name the panel. Am I missing something subtle? Thanks!

    • Brad Balassaitis says :

      Thank you!

      I haven’t seen the problem you’re describing. It seems odd that adding an ID to a panel would cause a problem like that.

      You could try wrapping the REST service and grid control within an xp:div tag and setting that as the partial refresh target for the button.

      • Shean McManus says :

        Using a DIV or a Table didn’t work either but upon further inspection the panel as I described above did display but it was of a height that made it appear to be hidden. I added some styling to the panel to force the height to be say 600px and it displayed as expected. Not sure why adding the ID to the panel changed this behavior, that is still a mystery.

      • Brad Balassaitis says :

        Glad to hear that it worked!

  5. Dan says :

    I have followed the instructions (the first three) and the dojo grid comes up empty and does not search. I have my field bound to a requestScope variable (not sure if this is correct) (), the button performs a partial refresh (), and the search property on the rest service is set to the requestScope value (search=”searchCriteria”). When search property is set as shown, no values appear in the grid, just “..” for each column. When I set the search to SSJS (), the values show in the columns, but the search does not work. Any ideas would be great – thanks!

    • Brad Balassaitis says :

      requestScope variables have a very short lifespan — the value would be gone by the time the data is refreshed! Try using viewScope or sessionScope. Make sure that the search property of the REST service is computed to: return viewScope.get(‘searchCriteria’); And make sure that the partial refresh is targeting a panel that includes both the grid and the REST service.

      • Dan says :

        Brad — the viewScope did the trick — thanks!

      • Brad Balassaitis says :

        Great — thanks for the feedback!

      • Pam says :

        brad, can you bind multiple viewscope variables to the REST Search property? Have you done more than one in the Search property? I actually need to do 3 and I think that is where I am getting the error. Not sure, just wanted to see if someone else has done it, it may be just my context in how I am doing it (just using the viewScope.get(). – thanks!

      • Brad Balassaitis says :

        If you have multiple search criteria fields, I put code on the ‘Search’ button that reads those fields and builds the full-text search string and store it in a scope variable. Then when the view is refreshed, the search is executed. It does not seem to work if you compute a search string on the search property of the REST service — it’s too late in the process at that point.

        In this blog post, I showed how to search multiple fields on a view panel — the same concept would work here: https://xcellerant.net/2013/01/04/extendingviewpanel_3/

  6. Fatih Duranoglu says :

    Hi Brad, Thanks for good sample. İ need to categoryfilter on dojo grid. Doc has CustomUID field and childdocs have the same value. Key property worked on Rest but load all child docs and other (key not same parent doc) docs cell display “…”.

    • Brad Balassaitis says :

      Are the “child” documents actually response documents? If so and they are displayed as such in the view, then they would not have data in the same columns as the parent document.

      Check the data in the REST service — if a row is trying to display a column value that doesn’t exist, it will display ‘…’.

      That will also happen if there is reader field security on the child documents, in which case it can’t retrieve the data. Either way, use the browser’s developer tools to look at the REST call and the data that it returns.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: