In jqgrid, I want to remove text appearing on pager i.e. View 1 - 2 of 2.
all other things are fine on pager.
My grid/pager is as follow:
<table id="GrdList">
</table>
<div id="GrdPager">
</div>
for pager:
rowNum: 5,
rowList: [5, 10, 20],
pager: '#GrdPager',
Can you please guide me how to remove appearing text on right bottom corner i.e. View 1 -2 of 2 (current page and its records).
Thanks
You should remove viewrecords: true option from your jqGrid.
Related
Regarding free-jqgrid 4.9.2, does it automatically handle column width? No, then what's the proper way to handle this?
1) VIN & Year columns contain too much free spaces
2) Trim contains few records that are too long to fit into column's width (Such as 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)
Also, does jqGrid have true/false "word wrap" setting somewhere?
Demo is found at link removed
Auto-width adjustment exist in free jqGrid starting with 4.8 version. Free jqGrid still not handle the width of all columns automatically. One need add some additional properties in colModel for the columns which width should be set based on the width on the most long content and to set some additional options.
Your current code uses width: 190 for the column 'Vin' and don't specifies any width property for any other columns, so default value width: 150 will be used. Additionally you use width: 1022 option of jqGrid and wrong option autoWidth: true (instead of autowidth: true) which will be ignored. It means that the width of the div (bDiv or body div) over the grid will be set to 1022px and the user can use horizontal scrollbar to see all columns.
I would recommend you to read the wiki article. You can add autoResizable: true property to some specific columns or to use cmTemplate: { autoResizable: true } to add the property in all columns. As the result the content of every cell of the grid will be wrapped in <span class="ui-jqgrid-cell-wrapper">...</span>. It allows free jqGrid to get the exact width of content for all cells of the column and then calculate the max from the values. So the user can double-click on the column resizer (between the columns) to set the width to the best value. During the width calculation jqGrid the width of the column header with the width of sorting icon additionally to the width of the grid cells of the column. One can use autoResizing: { compact: true } option to reduce the width of the columns which don't have visible sorting icon. The last common option is autoresizeOnLoad: true which I would recommend you to use. It will set the width of the columns having autoResizable: true property to the best value.
So I would recommend you to add the following option to your grid:
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
After that the width of column will looks much better.
If you prefer to wrap the text of some columns if it is too long then you can use CSS settings described in the old answer and set maxColWidth property of autoResizing of the column (in colModel) or global setting maxColWidth of autoResizing option of the grid to the max width of the column. More long text will be wrapped.
I have a grid that contain 25 records, in page size property i set to 10 records per page , then i will have 3 pages in the final page it displays only 5 rows, Here i want to show
10 rows. (First five records then next five as empty rows)
Please help me.Thanks in advance
Your question is not full clear because you don't posted the JavaScript code which you use. Typically one use either
rowNum: 10,
height: "auto"
or
rowNum: 10,
height: 230, // 23px for a row
scrollOffset: 0
I am hoping that a JqGrid occupies all the width it is given, and it auto shrinks and grows depending on the width of browser viewport. I am hoping to see the horizontal scroll bar as late as possible when the browser viewport shrinks.
I am playing with autowidth and shrinkToFit and combinations of them, but no success.
Am I doing it in wrong place?
Thanks and regards.
I do this on my apps with jQGrid. Here are some of my grid settings:
autowidth: true,
height: '100%',
shrinkToFit: false,
Below the creation of my grid, I use the window.resize function of jQuery:
$(window).resize(function () {
$gridName.jqGrid('setGridHeight', $(window).height() - 160);
$gridName.jqGrid('setGridWidth', $(window).width() - 210);
});
I subtract - 210 from the window's width to account for a left content area that is 210px wide.
I subtract - 160 from the window's height to account for a header content area that is 160px high.
...
rowNum: 10,
pager: '#mypager',
rowList: [10,20,30]
...
In a table that has more than 10 records, it shows them all and says page 1 of 0, even though the rowNum is set to 10. If I choose from the drop-down list 20 than it shows the correct number, even if I select 10 afterwards it again shows the right number of rows. But not on the first visit. Why is that?
Calling this solves the problem:
jQuery("#tableToGrid").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
Sounds like the initial property isn't getting set correctly, try deleting out the line and redoing it?
rowNum: 10,
rowList: [10, 20, 30],
I suppose that you fill the grid in a wrong way. For example if you would use addRowData you can include more rows as the value of rowNum.
In any way you should include more full code which you use to create the grid and describe how you fill the data in the grid.
I was wondering if there was some way to implement infinite scroll paging with jqgrid and its tabletogrid extension? I know you can implement regular paging with jqgrid, but would I need a different tool to do infinite scroll?
It's a while ago, but you can find a sample under http://trirand.com/blog/jqgrid/jqgrid.html under the section "new in version 3.4"
and a newer one under 3.7 "virtual scrolling"
Use jqgrid option scroll: true for infinite scroll pages.
.jqGrid({
datatype : "local",
data : JSONData,
height : ($(window).height() - 250),
width : ($(window).width() - 32),
scroll : true,
rowNum:20, // the number of row's to be displayed the first time
...
..
});
check http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
look scroll -- option.
.jqGrid({
scroll: 1,
});
by setting option to scroll