Getting jqGrid to auto-filter once I set the text in the filter box

For my first ASP.NET MVC 3 application I use the jqGrid to display tabular data related to recipes. One or more recipes can be related by the user.

When I select a row in the grid for a recipe I display some detail about that recipe below it in another div, including the names of related recipes.

If I highlight/copy the name of a related recipe I can paste it into the filter box for the Recipe name and it will filter down to that recipe. What I'd like to do is display a link for each related recipe and then when the user clicks on one of the related recipes, it would essentially do the equivalent of the highlight/copy/paste for them.

For each of my recipe names I did something like this:

<a size="75" class="relatedrecipe" data-recipename="@item.RecipeName">@item.RecipeName</a>

And then I have some jQuery that does this:

$(function () {
   $('.relatedrecipe').click(function () {
      $('#gs_RecipeName').val($(this).data('recipename'));
   });
}

And this will, in fact, populate that input box (with the id "gs_RecipeName") with the name of my related recipe, but it doesn't auto-filter the recipe list at that point. To get it 开发者_开发百科to work, I've got to click in the box and change the text to trigger that.

Second issue After solving the first issue, I want to clear all the existing filters that might be set (which got me to the original recipe in the first place. I do "AND" filtering and if, say, a recipe for Chocolate Pie is related to a recipe for Pecan Pie and the user had previously filtered down to the Pecan Pie by filtering on "Pecan", my filter won't display that Chocolate Pie since it doesn't have pecans in it. Make sense? I guess what I want to accomplish is the following:

• Clicks the text.
• Filters are cleared.
• Recipe name is auto-filled in appropriate filter box.
• Auto-select the filtered row (left this off originally)

I'm mostly there with at least half of this. If you've got some guidance on how to trigger that filter and clear the others, I'd appreciate hearing about it.

Followup:

I modified my function as follows:

$(function () {
   $('.relatedrecipe').click(function () {
      var recipe = $(this).data('recipename');
      setTimeout(function () {
         $("#recipegrid")[0].clearToolbar();
      }, 50);
      setTimeout(function () {
         $('gs_RecipeName').val(recipe);
         $("#recipegrid")[0].triggerToolbar();
      }, 200);
   });
}

and this will indeed, as Oleg answered below, filter down to the given related recipe. Next I wanted to select it automatically. I tried adding the following inside my second setTimeout block above.

var firstRowID = $('#recipegrid').getDataIds()[0];
$('#recipegrid').setSelection(firstRowId, true);

as was mentioned elsewhere on SO as a means of selecting the row, but that doesn't work.

A solution to the auto-selecting:

I modified my code a bit and this works:

$(function () {
   $('.relatedrecipe').click(function () {
      // store off the value of the related recipe I want to switch to
      var recipe = $(this).data('recipename');
      // clear any filters on the grid
      setTimeout(function () {
         $("#recipegrid")[0].clearToolbar();
         // set the recipe filter to the related recipe name and trigger the filtering
         setTimeout(function () {
            $('#gs_RecipeName').val(recipe);
            $('#recipegrid')[0].triggerToolbar();
            // auto-select the first row
            setTimeout(function () {
               var firstRowID = $('#recipegrid').jqGrid('getDataIds')[0];
               $('#recipegrid').setSelection(firstRowId, true);      
            }, 50);
         }, 50);
      }, 50);
   });
}

I suppose that you will solve the problem with setting of the value in the searching toolbar if you call $('#gs_RecipeName').trigger('change') immediately after $('#gs_RecipeName').val(...). If you use searchOnEnter: false it should be enough. If you decide to use searchOnEnter: true you will need to add call of triggerToolbar method ($("#grid_id")[0].triggerToolbar()).

To clear the searching toolbar and refreshing the grid you can use clearToolbar in the same way as triggerToolbar.