Search code examples
jqueryasp.net-mvcjqgridlib.web.mvc

Filtering with a custom textbox or select control values using jqgrid.lib.web.mvc


I am trying to set up a custom search using some input type="text" and select controls to provide values to post using ajax to the ActionResult MethodName(JqGridRequest request, PerfilSearchViewModel viewModel) of the helper and apply the filtering logic of it.

I noticed the JqGridRequest request.search property on the server side helper only goes to true when the inbuilt jqgrid search icon is used.

I have set up and analyzed the examples from http://tpeczek.codeplex.com/documentation, but I yet have to make them work without using glass icon, since there is no sample there without it.

Here is another one: How to pass a jQuery object as a parameter into jqGrid using the lib.web.mvc namespace, where an object to post to the server is created but since the request search property is false also using a different button and controls I can't get to use the filtering part of the helper either.

I appreciate if anyone can show me the way to implement the filtering with my custom search controls.

Thank You.

Update: I managed to make progress setting up a javascript function that allows me control to perform a customized search on my button click:

function mySearch() {

$('#profiles').jqGrid('setGridParam', { search: true });
$('#profiles').trigger("reloadGrid", [{ page: 1, current: true }]);

}

And on Lib.Web.Mvc JQGrid helper I have a parameter to post a value using this:

postDataScript: "{ Name: 'profile'}"

The latter is a static value of course, so I am aware I can use this variant to make it dynamic:

postDataScript: "function() { return { Name: $('#filter').val() }; }"

For the static value works, but for the dynamic value called with val() is always null on the controller.

Can you please tell me how can I get to have the typed value posted?


Solution

  • Thank You very much @tpeczek, I didn't get to see your answer but after I browsed around and read some time more I managed to solve the requirement. I did this:

    1) I attached an event to trigger the search on the grid named "profiles" with a function:

    function search() {
                $('#profiles').jqGrid('setGridParam', { search: true });
                $('#profiles').trigger("reloadGrid", [{ page: 1, current: true }]);
            }
    
    //attaching the function
    $(document).ready(function () {        
    
            $('#btnSearch').click(function () {
                search();
            });
    
    });
    

    2) Then I instantiated your Grid helper and passed the model JQGrid values using the postDataScript attribute:

    var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<MyProject.Model.ViewModel.ProfileFormattedViewModel>("profiles",
            caption: "profiles",
            cellLayout: 5,
            dataType: Lib.Web.Mvc.JQuery.JqGrid.JqGridDataTypes.Json,
            footerEnabled: true,
            methodType: Lib.Web.Mvc.JQuery.JqGrid.JqGridMethodTypes.Post,
            pager: true,        
            rowsList: new List<int> { 10, 20, 30, 40, 50 },
            rowsNumber: 10,
            loadOnce: false,
            width: 750,
            sortingName: "Sorting_Field",
            sortingOrder: Lib.Web.Mvc.JQuery.JqGrid.JqGridSortingOrders.Desc,
            url: Url.Action("Grid", "Profile"),
            userDataOnFooter: false,
            viewRecords: true,        
            postDataScript: "{ 'Name': function () { return $('#filter').val(); } , 'State': function () { return $('#state').find('option:selected').val(); } }"
        ).Navigator(new Lib.Web.Mvc.JQuery.JqGrid.JqGridNavigatorOptions() { Search = true });
    

    3) This basically gave me the control to active the search feature on the JQGrid appart of using the "magnifying glass" icon inbuilt with the grid, so the JqGridRequest request.Searching property equals true and my ProfileSearchViewModel has its property values loaded with the data passed with the PostDataScript attribute when both properties are in the same order:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Grid(JqGridRequest request, ProfileSearchViewModel viewModel)
        //equals true 
        if (request.Searching) {
          if (viewModel != null)
            filterExpression = ViewModel.GetFilterExpression();
            //etc... (as your sample application goes)
    
         }
    

    @tpeczek, Your library is fantastic!, but lacks documentation, would be nice to find a way to create enough deep and sampled references so it can be more popular and better used with all its wide features.