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
Related
I want to keep value labels outside my amChart graph. The problem is that when value label value is over 9999 then I cant display it's all content.
In this example values should be:
25,000
20,000
15,000
10,000
5,000
First digit is missing. I am dealing with this only by setting panel's margin
"panelsSettings": {
"marginLeft": 40,
"marginRight": 20,
},
Is there any more convienient way to be sure that labels are fitting? hardcoding margin seems to be overkill.
This is my example chart: https://jsfiddle.net/29w35txy/1/
As I mentioned in the comments above, it seems that this issue is depending on the default Browser font.
So it is working in Chrome (left), but does not work in Firefox (right) for me:
Beside that you can prevent this by increasing marginLeft of your panelsSettings which you are already using:
"panelsSettings": {
"marginLeft": 60,
// ...
},
Here I forked you fiddle to show the result.
My example: http://dojo.telerik.com/irEQo
Problem: When I go about resizing a column I click on the gap between them and drag, at which point the column widths become messed up (See screenshot and video below).
https://vid.me/TmkP
My Fix:
Instead of using fixed width using pixels values, I set the fixed width using percentages.
Example:
Before
{
field: 'statusId',
title: 'Type',
width: 50,
filterable: true,
attributes: {
"class": "someClass"
}
After
{
field: 'statusId',
title: 'Type',
width: '15%',
filterable: true,
attributes: {
"class": "someClass"
}
This happens when you set a fix width to all columns but the sum of all widths does not match the grid's with. So if you have 3 columns all with width 100px, but your grid is 400px wide, the columns are stretched to e.g.133px each. As soon as you 'grab' column, the original size (100px) is used which makes the column jump.
This is a Kendo problem so there is no real solution for this (at least I haven't found one), but there are possibilities to avoid the 'jumping':
You can either set no with for one column, this column then fills the rest of the space.
Or add an empty column as last column which then fills the space while your real columns all keep the size they are set to.
To add an empty column just add
{
field: ""
}
to your columns list.
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.
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.
...
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.