Search code examples
jqueryjqgridfree-jqgrid

jqGrid 4.8.0 - issues

Some issues I found when porting from 4.7.1 to 4.8.0:

  1. Paging - I was using $(".ui-pg-input").val() for finding the "requested" page. I later used $("#pg_"+pagerName).find('.ui-pg-input')[0].value when I had multi grids. None of those is working now. I keep getting "1" no matter the state of the grid. (the reason I need it is because I'm building the postData with a different keys for paging and need to do some calculations before the grid post the Ajax again, so need to change the postData as soon as the user click on the next page). So this is not working any more.

  2. The toolbarfilter is missing the X on the right with enum values (aka, on those column where you need to select from a list, there is no X to reset the filter).

  3. There are some changes to the elements of the page. I added a button for collapse/expand (yes, I'm aware for the built in collapse/expand, but I hide it, as I need to play accordion with the two grids, and the event was triggered after the expand/collapse happend, while in order to simulate accordion I needed to catch the event as soon as the user click on the expand/collapse of the entire grid). Anyway, the following:

    $(nameOfGrid).closest(".ui-jqgrid-view").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close").hide();
    $(nameOfGrid).closest(".ui-jqgrid-view").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close").after('<button id="' + gridName + 'headerButton" type="button" class="titlebutton" role="button" style="float:right; position:relative; font-size:12px; right:3px;">Collapse</button>');

Is still working, but what was once aligned nicely to the right, seems messed up and goes one line down. Was anything changed in relate to the header? Is there another way I can catch the event of the expand in the titlebar BEFROE the expand/collapse occur?

  1. In the search dialog 'searchGrid' (the one that let you perform advanced queries, the X to close the modal on the upper right is missing. This is true with more than one theme I tried.

  2. I think the tables layout of the upper bar was changed. I added some (like new buttons and such) tweaks on the upper bar to the right, and seems like there is not enough place for them when the screen is small.

  3. My grid width setting are: autowidth: true, shrinkToFit: true, however, when adding more fields via columnchooser, the grid doesn't keep its width, and become wider and wider. In fact, the inner scroll bar at the bottom is never used - The grid just become wider and wider, no internal scrolling.

  4. Was something changed in respect to _toppager in general? (can explain #5 above as well). This code, that was working well on 3.7.1, and produced a refresh icon on the upper left, is now producing 2 icons instead, on is not working (at the upper left) and another one at the center low of the upper bar, making the bar height double it's size:

    $(nameOfGrid).jqGrid('navButtonAdd', nameOfGrid + '_toppager', { caption: "", buttonicon: "ui-icon-refresh", title: "refresh", onClickButton: function () { $(nameOfGrid).setGridParam({ postData:sessionListData($(nameOfGrid),gridName)}).trigger("reloadGrid"); } });

Thanks again for the great work :-)

Solution

  • Thank you for the feedback. It's really difficult to implement new features without changing the existing structures. So the internal structure of some CSS elements are really changed in free jqGrid 4.8 to it working not only with jQuery UI icons. Please don't post cumulative questions in the future. Such questions could be bad indexed by searching engine and so it's difficult for other users to find the answers.

    1) The problems in existing structure of the pager and the changes in jqGrid 4.8 are described here. I recommend to use the second parameters of onPaging. I hope you will be able easy to modify the existing code of onPaging.

    2) The main problem of the filter toolbar is the width of input/select elements. If one use searchOperators: true option or one uses default clearSearch: true property searchoptions then the search operations elements and x will be added in every element of searching toolbar. It takes a lot of place. In some cases inserting of such elements is redundant. In the cases the elements will be hidden per default. If you do need to show x you need just add explicitly clearSearch: true property inside of searchoptions of the columns where you use stype: "select".

    3) It seems that you made some customization of the grid toolbar and repalaced the standard icon with <button> with the text Collapse. The customization need be changed corresponds to new CSS structure and corresponds to your exact requirements. Below is an example of such implementation:

    var $closeButton = $(nameOfGrid).closest(".ui-jqgrid-view").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close");
$closeButton.css({width: "auto", height: "auto", top: "auto", marginTop: 0, position: "relative", float: "right"});
$closeButton.html('<button type="button" role="button" style="font-size:12px">Collapse</button>');
$closeButton.siblings(".ui-jqgrid-title").css({marginTop: "5px", display: "inline-block"});

    4) I can't reproduce the problem. You can try any demo, like this one. You can see the closing icon. So it you do have some issue you should open new question and post the demo (in jsFiddle for example) which can be uses to reproduce the problem.

    5)-6) You should post the demos which can be used to reproduce the problems. The current descriptions of problems are not detailed enough to reproduce the problem.