0

Not sure why the search is not working in the grid. Click Find just no response. But it can pop out the search form. See the image. search

My code:

 <script>
    $(document).ready(function () {
        function styleSearchForm(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable');
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }
        function styleSearchFilters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        jQuery(gridSelector).jqGrid({
            url: API_URL + 'GetVendors',
            datatype: 'json',
            mtype: 'GET',
            height: 'auto',
            colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
            colModel: [
                {
                    key:true,
                    name: 'pkey', index: 'pkey', width: 50, hidden: true,
                    formatter: 'integer'
                },
                { name: 'Company', width: 120 },
                { name: 'ContactName', width: 110 },
                { name: 'ContactPhone', width: 120 },
                { name: 'UserName', align: "right", width: 90 },
                { name: 'UserKey', align: "right", width: 120, hidden: true },
                { name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
                { name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
                { name: 'ClientID', align: "right", width: 100, formatter: "integer" },
                { name: 'PhotoURL', align: "right", width: 80 },
                { name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
            ],
            cmTemplate: { autoResizable: true, editable: true },
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pagerSelector,
            sortname: 'company',
            sortorder: "asc",
            viewrecords: true,
            jsonreader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records"
            },

            caption: "Vendor Managerment"
        });

        $(gridSelector).jqGrid('navGrid', pagerSelector,
                {
                    //navbar options
                    edit: true,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: true,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: true,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: true,
                    viewicon: 'ace-icon fa fa-search-plus grey'
                },

                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                        styleSearchForm(form);
                    },
                    afterRedraw: function () {
                        styleSearchFilters($(this));
                    },
                    multipleSearch: true
                    /**
                                         multipleGroup:true,
                                         showQuery: true
                                         */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                    }
                }
            );

        jQuery(gridSelector).jqGrid('inlineNav', pagerSelector, {search:true, edit: true, add: true, del: true });
    });


    }
</script>

EDIT:

Server side code:

public dynamic GetVendors(string sidx, string sortOrder, int page, int rows, int pkey)
    {
        var vendors = _vendorRespository.GetAllVendors().AsQueryable();
        var pageIndex = Convert.ToInt32(page) - 1;
        var pageSize = rows;
        var totalRecords = vendors.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        if (sidx != null)
        {
            vendors = sortOrder == "asc" ? vendors.OrderBy(sidx) : vendors.OrderBy(sidx + " descending");
        }
        else
        {
            vendors = vendors.OrderBy(x => x.pkey);
        }
        vendors = vendors.Skip(pageIndex * pageSize).Take(pageSize);
        return new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = (from vendor in vendors
                    select new
                    {
                        cell = new string[]
                        {
                        vendor.pkey.ToString(),
                        vendor.Company,
                        vendor.ContactName,
                        vendor.ContactPhone,
                        vendor.UserName,
                        Encoding.UTF8.GetString(vendor.UserKey),
                        vendor.Active.ToString(),
                        vendor.FacilityId.ToString(),
                        vendor.ClientID.ToString(),
                        vendor.PhotoURL,
                        vendor.PushToGP.ToString()
                        }
                    }).ToArray()
        };
    }

Am I missing something?

  • Your code use **server-side** paging sorting and filtering of data because you don't use `loadonce: true`. After the user clicks "Find" button, the request with the filter will be sent to the server `url: API_URL + 'GetVendors'`. The server have to return filtered data. If it ignores the filter and returns the same unfiltered data then you can have the described results. – Oleg Jan 28 '16 at 17:57
  • @Oleg, If I add `loadonce: true`, then I only get page 1. There are many pages. –  Jan 28 '16 at 18:19
  • How many pages (total number of rows) you have? If you want to use `loadonce: true` then the server should return **all pages** at once. If you have about 1000 or less rows then it's better to use `loadonce: true` because local operations work more quickly as the round-trip to the server. Try loading, sorting and filtering on [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-4000-20-free-jqgrid.htm) with 4000 rows and 13 columns and on [another one](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-13-40000-20-free-jqgrid.htm) with 40000 rows. – Oleg Jan 28 '16 at 18:44
  • @Oleg, if you look at the image in the thread. Without `loadonce: true`, there are 12 pages returned. Each page has 10 rows. If I add `loadonce: true` , I only get one page. Why? –  Jan 28 '16 at 18:56
  • See my previous comment. You should simplify the code of `url: API_URL + 'GetVendors'` and return **all data (120 rows) at once**. If you use free jqGrid then you can sort the data on the client side by adding `forceClientSorting: true` option which can be used in combination with `loadonce: true`. – Oleg Jan 28 '16 at 19:18

1 Answers1

0

If your have about 120 total number of items which needed be displayed in the grid, then I would recommend you to use client-side sorting, paging and filtering. The reason of the choice: local sorting, paging and filtering will be typically more quickly as the round-trip to the server. Thus if you even have supper powered server then the sending of the data still be slowly as working with 120 rows in JavaScript.

To implement client-side sorting, paging and filtering you need do two things:

  1. modify (simplify) your server code (url: API_URL + 'GetVendors') to return all data at once. Typical code will consist from one line if you have implemented already the repository which access the data. The format of returned data could be just array of all items.
  2. add loadonce: true and forceClientSorting: true options of jqGrid. The last option exist only in free jqGrid. It force sorting initial loaded data before displaying on the first page.
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I borrowed the code from someone else. I am not fully understanding it. Do you mean my original code used server side search?If so, which one? –  Jan 28 '16 at 19:30
  • @Love: You should just append your question with the code of `GetVendors` method. You current code have probably implemented **server-side paging** which need be removed. – Oleg Jan 28 '16 at 19:34
  • Oleg, you are right. I just updated my question. Perhaps I should remove 90% code. –  Jan 28 '16 at 19:47
  • @Love: Try to use `public IEnumerable GetVendors() { return _vendorRespository.GetAllVendors().AsEnumerable(); }` or `public IEnumerable GetVendors() { return (from vendor in vendors select new { vendor.pkey, vendor.Company, vendor.ContactName, vendor.ContactPhone, vendor.UserName, Encoding.UTF8.GetString(vendor.UserKey), vendor.Active.ToString(), vendor.FacilityId, vendor.ClientID, vendor.PhotoURL, vendor.PushToGP.ToString() }).AsEnumerable(); }` – Oleg Jan 28 '16 at 20:15
  • @Love: You can simplify your client code too. It's important here to know which version of jqGrid you use and from which fork. Free jqGrid supports for example Font Awesome. You can easy customize the settings to use your custom icons. See [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Using-Font-Awesome-in-free-jqGrid-4.8#customization-of-fontawesome). After that you need just include on all pages of your project js with your font definition and all your other code will just automatically use the font. – Oleg Jan 28 '16 at 20:16
  • I use jqgrid 4.6. I am not sure why the icon of inline add is invisible. But mouse over it then it appears the tooltip. –  Jan 28 '16 at 20:37
  • @Love: It's important that you include the version and the fork of jqGrid in the text of your question. I recommend you to decide which fork of jqGrid you will use in the future. jqGrid 4.6 is almost 2 years old. End of year was posted [the statement](http://www.trirand.com/blog/?p=1438) which renaming of Tony's fork of jqGrid to commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334). After that I develop my own fork free jqGrid under the same MIT/GPLv2 license, where I implemented a lot of fixes and enhancements of jqGrid described in wiki and readmes. – Oleg Jan 28 '16 at 20:50
  • @Love: jqGrid 4.6 is dead. You have choice between free jqGrid and Guriddo jqGrid JS or some other grid plugin. One can see that your old code (replacing jQuery UI icons to `ace-icon fa fa-plus-circle purple` and so on) are written based on [the old my answer](http://stackoverflow.com/a/13865495/315935). I implemented the features as the part of free jqGrid already in the first version, which I published. The only problem is in changing the existing code and reducing it in 2-4 times. – Oleg Jan 28 '16 at 20:56
  • Hi, Oleg. I remove the server side code and let the client side do it. I am not sure why I click the reload button the table doesn't refresh it? Iuesd `loadonce: true` –  Feb 04 '16 at 18:41
  • @Love: If you click Reload button of navigator bar (added by `navGrid`) the **local** reloading will be done. `reloadGrid` have in free jqGrid new option `fromServer`.To force reloading from the server you can use navGrid option `reloadGridOptions` which set additional options of `reloadGrid`. Thus `reloadGridOptions: { fromServer: true }` do the trick. You can use `navOptions` option of jqGrid to set default options of `navGrid`. So you can use jqGrid option `navOptions: { reloadGridOptions: { fromServer: true } }` – Oleg Feb 04 '16 at 19:02