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.
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.
In my asp.net MVC application I am using Kendo grid to display data from a database table. Below code is used to display the "Price" column up to six decimal places. It displays "Price" value fine on load but when I click on Price to edit,its values automatically rounded off to two decimal place. For example, if it loads value 456.345674 from database, in edit mode textbox will round off the value to 456.35 I don't want values to be rounded off to two places. It should keep decimal places intact. Please suggest.
{
field: "Price",
type: "number",
filterable: {
cell: {
template: function (args) {
args.element.kendoNumericTextBox({
format: "#.######",
decimals:6
});
},
operator: "gte"
}
},
width: 140
}
KendoNumericTextBox ain't expecting a #.###### format. If you want to force 6 decimals, the correct format would be n6. If you want to display the entire number without rounding, the format would be n.
You can refer to kendo's number formatting documentation to see what are the available formats.
How to set the alignment and width of all cells the easy way?
Thanks.
Michael
Edit: Here my modified question - How to set the alignment and width of all cells of a large Handsontable? Is it possible to access all cells at once or to iterate over the cells?
For the alignment, just add the the className parameter to the json instance
var hot = new Handsontable(container, {
className: "htCenter", //htCenter or htRight
});
If you want to set the same width and same alignment for every cell in your table, then you simply want to add the following to your options object:
{
"colWidths": 200, // where 200 is an example width in pixels
"className": "htRight" // this is an example; you can choose from
"htRight", "htLeft", "htMiddle", "htBottom", and "htTop"
}
If using a type other than text, the text-align property is given high priority. Therefore, to override this using CSS, you could add the following rule; this is an example on whatever className you used and assuming you want to stick it to the right.
.htCenter {
text-align:right!important;
}
And at any point in your code, you can update these settings using updateSettings().
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.
There seems to be a bug in jqgrid, where one can not resize the last column.
This seems to be a quite old issue raised in 2009. I had a look and the latest jqGrid sample seems to have this issue...
What I found however was that last column can be dragged to resize the grid itself.
See here Go to section what is new in 3.6.
Any pointers if this is already fixed.
Seems I found a solution.
Resizing of the last column can be done only within the area of the header wrapper (div.ui-jqgrid-hbox). In the outer space resizing process losing focus.
Because of existing some padding-right area with default 20 pixels, increasing the size can be done in this small part only.
In addition, we need to temporarily cancel table wrapper influence, because he also cause to stop resizing process.
Here is my solution. I assume, that your table wrapper id is gbox_DataTable_u:
1:
CSS: define new wide padding-right area:
.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}
2:
Append 2 events to your grid:
resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}
resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}
Example of working table: http://www.design.atplogic.co.il/aman/philips/users.htm#
I found that the best way is to add an empty unresizable column in the end of the grid.
I'm just doing it manually, by extending the colModel right before the execution of jqgrid constructor. Only problem being - I wasn't able to make it not draggable so far.
Here's an example:
colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});
Hope this helps.
It is resizing fine for me as well, although you have to resize from the right on the "RTL Support" example, which seems to make sense.
Also be aware that if you are using Chrome, there is a jqGrid bug that causes horizontal scroll bars to appear - see jqgrid-does-not-render-correctly-in-chrome-chrome-frame. This issue has since been resolved, but the demo page has not been updated yet. And it certainly gives the appearance of the last column's resizing not working because you have to scroll all the way over to the right before you can resize the last column.
I have tried to resize the last column with resizeStop, i do some trick like the other guy said. hope it help.
resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel =
$("#jsonmap").jqGrid('getGridParam','colModel'); var oW =
$oldWidths[index]; var cW = colModel[index+1].width+
downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[index] =
width;
$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW);
$('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW);
var w = amGrid.jqGrid('getGridParam', 'width');
$('.ui-jqgrid-htable').css("width",w);
$('.ui-jqgrid-btable').css("width",w); }
i still looking for a common way, can do on more tables in one page and don't affect to each other.
After 2 days of struggling...I finally found a way to work around.
It seems that jqGrid calculates the resizing object in the dragMove event, where it uses passed event object to get the position of mouse and calculates the new width of resizing column. However when dragging exceeds the grid's boundry, the dragMove event stop shooting...
So my work around is simply modifying jqGrid to calculates resizing object again in the dragEnd event. Here's the modified code
first find the dragEnd event.
...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
this.dragMove(e); // call dragMove event to calculate resize object
...
then find the mouseup event where dragEvent is triggerd...
...
$(document).mouseup(function (e) { // get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
return true;
});
...
Then columns should be able to resize to wherever mouse points.
Hope this would help.