Allow to froze multiselect and actions columns if jqgrid sortable property is specified #52
Comments
|
I have found my own answer which provides the implementation idea. I made the corresponding changes in the code of free jqGrid and now it's supported. See the demo To be exactly one can use |
|
I tried .js and css files from git master it with bigger buttons in single toolbar using testcase from question in http://stackoverflow.com/questions/29734580/remove-dancing-effect-in-chrome-from-free-jqgrid-toolbar-buttons-in-font-awesome Out of sync occurs if browser zoom level is changed. Removing $grid.jqGrid("setFrozenColumns") does not fix this. New code corrupts existing grid layouts. |
|
You don't posted the code which you use, so I have to guess. I suppose that you could call It's clear that there are some situations which can change the height or position of grid. You can inform free jqGrid about the requirement to recalculate the position of the frozen div and the height of its elements. You can trigger $grid.trigger("jqGridResetFrozenHeights");You can include the call inside of |
|
Try the demo |
|
setFrozenColumns is called after toolbar is created. $grid.trigger("jqGridResetFrozenHeights") is added to window resize event but problem persists. Make browser window width smaller by resizing or use big zoom level so that toolbar wraps to multiple rows. At some height actions button captions appers 3 times and rows are out of sync. |
|
I've found two important problems in your code:
|
|
I fixed those issues in testcase but problem persists in a bit different flawor. To reproduce, scroll customers list in testcase down and decrease browser window width. $(window).resize(function () { resizeGrid() });
function resizeGrid() {
setTimeout( function() {
var extraToolbarHeight = $('#t_' + $.jgrid.jqID($grid[0].id)).outerHeight(true),
toppager_height=$("#grid_toppager").outerHeight(true),
messageDivHeight = $('#_messageDiv').is(':visible') ? $('#_messageDiv').outerHeight(true) : 0,
header_height=$("div#gview_"+$grid[0].id+" > div.ui-jqgrid-hdiv").outerHeight(true);
$grid.jqGrid('setGridHeight', $(window).height()
-messageDivHeight
-$('#contentCaptionDiv').outerHeight(true)
-extraToolbarHeight
-toppager_height
-header_height
-1
-$("#inputform").outerHeight(true)
// -44
);
$("table.ui-jqgrid-btable").each(function () {
$(this).trigger("jqGridResetFrozenHeights");
});
}, 100 );
$grid.jqGrid('setGridWidth', $('#grid1container').width(), false);
} |
|
I can't reproduce the problem in my demos and I can't make any modifications of jqGrid code in your demo. I still suppose that the reason is scrollTop position of |
|
I updated testcase with changed code but problem persists. json methods called in testcase allow cross domain calls. So it is possible to save code to local hard drive or to fiddle and run from there. Also I can change testcase so that it includes jqgrid from github or from other place. |
|
I made some changes in the code of working with frozen columns in free jqGrid. I hope that the problem is fixed now. |
|
Try once more. |
|
Thank you. Now, if inline editing is started, frozen and unfrozen columns are horizontally at different positions by few pixels. |
|
Colums are at same position only if last row is inline edited. For all other rows, there is difference by few pixels as shown in picture |
|
I'm not sure what you mean. If you made the picture under large zoom then it could be less as one pixel. I use in jqGrid internally the tolerance in 1px currently. You can open developer tools and increase the top property of frozen bDiv in +1px. You will see the results. The problem that old web browsers and old jQuery versions can't change height or top to less then 1px. I can try to include the |
|
Tested in latest Chrome and with jquery 1.11.2 It occurs only at 100% zoom level and only for some tables. If zoom level is increased or decreased during inline edit and then changed back to 100% , this difference disappears. Also if zoom level is 90% or 110% and inline edit is started, it does not occur. It does not occur if there is no horizontal scrollbar in table (all columns fit to screen). It occurs for some tables which have horizontal scollbar. |
|
Sorry, but you don't answered on my question. Do you tried to increase top of About your last problrm. I opened http://erp.eetasoft.ee/erp/Grid/Index/Klient in Chrome under 100% zoom and I see absolutely no problem. If you want that I solve the problem you should describe exact test case. Finally I want to remark, that I get jqGrid sources and make modifications of existing code. So it's important whether there are improvements or there are some new problems which was not exist in jqGrid 4.7. |
|
Chrome show that top is 171px. I changed it to 172px and then difference is bigger (see picture). If I change it to 169px there is no difference. |
|
It's difficult for me to read your code, but it's not my goal to debug your code. Nevertheless I find some very suspected places. In the line 790 of .ui-jqgrid tr.jqgrow td {
height: 2.8em !important;
}Additionally you set In any way you change somewhere in your code the height of the editing elements. You can find the place and include $grid.bind("jqGridInlineEditRow", function () {
setTimeout(function () {
$grid.trigger("jqGridResetFrozenHeights");
}, 100); // or 50 or 300 ???
});It should solve your problem if I correctly understand its origin. |
|
Line 790 is required to set row height greater according to second and third answer in Height 130% also used to make select element to cover whole row height to make it accessible from tablet:
Since there are margins or padding, height 100% does not make select element height to full row height but only partial height as in textboxes in picture. I havent found a way to make textbox height also 100% and increase their fonts. Same style is used also in form editing and correcting them for inline editing makes form editing edit form unreadable. There should be way to increase textbox font size and set its height 100% row height without corrupting edit form. Picture shows that select and cell have same height if height:130% is used for select element. There is issue about tablet usability in #25 and those remarks belong actually to this issue. setTimeout in autocomplete is used according to your answer in I posed comment there with question is it stil required. Adding $grid.trigger("jqGridResetFrozenHeights"); fixes the issue thank you. |
|
I think that is you would use I use the setting |
|
I tried this but like I wrote this causes edit form corruption since jqgrid applies this style to edit form elemens also. I posted this in http://stackoverflow.com/questions/29874598/how-to-make-element-sizes-to-fill-cell-sizes-and-increase-font-in-free-jqgrid-in |
Answer in
http://stackoverflow.com/questions/29820226/freeze-rownum-column-in-jqgrid contains code which froozes actions and multiselect column.
This code works only if jqgrid sortable property is not specified.
It should work also if column reordering by using drag and drop is enabled.
actions column reordering can disabled like multiselect checkbox column if this helps to implement this.
It was discussed also in http://www.trirand.com/blog/?page_id=393/bugs/frozen-column-impressions
If in jquery.jqgrid.src.js setFrozenColumns method line 8195
p.sortable || is removed it works but jqgrid header is a bit corrupted. So it looks there are small changes only required for this
The text was updated successfully, but these errors were encountered: