Is there a way to set a fixed width (max and min) of a jqgrid column?
I've set the width property in the colmodel, but if I resize the grid the columns are adjusting.
One can't define max and min width of the column, but one can make it have a fixed width which will be not changed. You can use the fixed option in the colModel.
fixed: true
property of the column (see the documentation).
Related
I want to change a specific row visibility inside of a grid named "myGrid" given an index dynamically.
I thought first to get the specific row that I want use:
var row = Grid.GetRow(myGrid.Children[index]);
and then , to change the IsVisible attribute of 'row' like this:
row.IsVisible = false;
Unfortunately the second line of code Isn't legal...
I don't want to bind 'IsVisible' attribute of each row. It seem to me unnecessary work.
Any suggestion to solving this issue will be appreciate!!
I think your best bet is to bind the IsVisible property of each control in the row to a single property in your view model. Then all you have to do is change the value of your view model property to false and the whole row will be hidden.
Cause:
GetRow returns an int value.So you can't set the property like IsVisible
Solution:
You can set the rowHeight as 0 if you want to hide the specific row.
var row = myGrid.RowDefinitions[index];
row.Height = 0;
As others said, you are trying to change the visibility of an index (That is definitely wrong).
You cannot get the row of a Grid and set its visibility. Instead, you should set the visibility of the view inside the row.
But you should note that by doing so you may see an empty space inside the Grid if you have specified a fixed height or even star sizing for that row height.
It is better to set row height to Auto. By doing this, when the view inside that row is invisible, the height of the row decreases to 0.
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 created a table then put a Textbox named "txtTextBox" into a cell of table. The width of the Textbox is 2 inch. In code I change width of Textbox like below
There are 2 case when report viewed:
Case 1: new width > designed width (2inch)
txtTest.Width = Unit.Inch(2.5); ==> The Textbox is showed longer. It is right
Case 2: new width < designed width (2inch)
txtTest.Width = Unit.Inch(1.5); ==> The Textbox is still showed with 2 inch. Expected it should shorter
how to resize column table fit with new width of Textbox?
Telerik doesn't allow width changes after items initialized. You must define your items programmatically instead of designer to do this.
http://www.telerik.com/forums/auto-resize-the-column-headers-of-the-telerik-reporting-table
I'm using SlickGrid and struggling to find an elegant solution to the following:
All columns must have a specific initial width when first rendered but be resizable afterwards
The final column should auto fill the remaining column space when the window is resized
I've seen:
Make one column fill remaining space in SlickGrid without messing up explicit width columns
resizing of grid when resizing browser window
How do I autosize the column in SlickGrid?
But these don't seem to quite do what I need.
If I use the forceFitColumns option, then all columns will autosize (unless I put a maxsize on them).
Using resizeCanvas on window.resize works well - but it still only works if forceFitColumns is true.
If I set minWidth=maxWidth - then I can't resize the column.
Any suggestions?
I'm not sure it would correct all your problem but in my case I do use the forceFitColumns and then depending how I want my column to react in size I will use a combination of minWidth and width, and in some cases the ones that will never exceed a certain width, I would then use a maxWidth as well. Now the problem you have is when setting the minWidth to be the same with as maxWidth this of course will make it unresizable, well think about it you set a minimum and a maximum, SlickGrid is respecting it by now being able to size it afterwards. I also have my grid which takes 95% width of my screen so I have a little padding on the side and with it I use a auto-resize using jQuery.
Here is my code:
// HTML Grid Container
<div id="myGridContainer" style="width:95%;">
<div class="grid-header" style="width:100%">
<label>ECO: Log / Slickgrid</label>
<span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow1()"></span>
</div>
<div id="myGrid" style="width:100%;height:600px;"></div>
<div id="myPager"></div>
</div>
// My SlickGrid Options
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
// The browser auto-resize
$(window).resize(function () {
$("#myGrid").width($("myGridContainer").width());
$(".slick-viewport").width($("#myGrid").width());
grid.resizeCanvas();
});
EDIT
I also was annoyed by the fact that using all of these together is blocking you from resizing the width of the column. I came up with a different solution, much later after, which makes the fields to expand (take available width) and does not block you afterwards on resizing the width. So this new solution I believe is giving you exactly what you are looking for... First of all remove the maxWidth property and only use minWidth and width, actually you could probably use only the width if you wanted. Now I had to unfortunately, modify 1 of the core file slick.grid.js with the following code:
//-- slick.grid.js --//
// on line 69 insert this code
autoExpandColumns: false,
// on line 1614 PREVIOUS CODE
if (options.forceFitColumns) {
autosizeColumns();
}
// on line 1614 change to this NEW CODE
if (options.forceFitColumns || options.autoExpandColumns) {
autosizeColumns();
}
then going back to my grid definition, I replace my previous options with this:
// My NEW SlickGrid Options
var options = {
enableCellNavigation: true,
forceFitColumns: false, // make sure the force fit is false
autoExpandColumns: true // <-- our new property is now usable
};
with this new change it has some functionality of the force fit (expanding) but does not restrict you on resizing your columns width afterwards like the force fit does. I also tested it with the columnPicker, if you hide a column it's resizing the others accordingly. I also modified the file slick.columnpicker.js to include a checkbox for that property but that is totally optional...I can add the code for that too if any of you want it as well. Voila!!! :)
EDIT #2
I realized much later that there's no need to modify the core file, we can simply call grid.autosizeColumns() after the grid creation. Like this
var options = { forceFitColumns: false };
grid = new Slick.Grid("#myGrid", data, columns, options);
// will take available space only on first load
grid.autosizeColumns();
This will automatically resize the columns to fit the screen on first load but will not give you the restriction of the forceFitcolumns flag.
I know it's kind late for this reply.
But i've managed to do that without having to change things at slick.grid.js or set min/maxWidth at columns array.
Instead what i did was to iterate through the columns array adding the values of "width" field of each column and then i've did a simple math count to set the last column width as innerWidth - totalColumsWidth + lastColumnWidth.
Code:
function lastColumnWidth(columns)
{
var widthSum = 0;
angular.forEach(columns, function(col) {
if(col.width) { widthSum = col.width + widthSum; }
});
if(window.innerWidth > widthSum) {
columns[columns.length-1].width = columns[columns.length-1].width + (window.innerWidth - widthSum);
}
return columns;
}
When I have a result set with several hundred columns, the header wraps back to the left side of the web page and takes up two rows. The correlation between header positions and column positions in the data also is not correct toward the end of the first line of header cells.
It appears that the width of the header is fixed to 10000px and the width of the row cells can be much wider and this is what is causing the rendering problem.
The style for slick-header-columns is set explicitly by slick.grid.js to: style="width: 10000px; left: -1000px".
When I inspect the css via firebug in this wrapping state, I see that the width of each slick-row is set to: 12805px. When I manually change the width of the slick-header-columns width to 15000px, the rendering is correct and the header no longer wraps.
Is there a way to programatically update the header width so that it can hold all of the column cells?
My solution to this problem was to modify the setCanvasWidth function in slick.grid.js so that it updates the header width as well as the canvas width:
function setCanvasWidth(width) {
$canvas.width(width);
if (width > $headers.width()) {
$headers.width(width + 1000);
}
viewportHasHScroll = (width > viewportW - scrollbarDimensions.width);
}