Auto row width in grid

[sreeni379Member]

Hi

In grid i  have different columns in that  each row i need to change row height based on  data bind to rows .I  need to increase height of row dynamically means(Auto Height of row).

Thank

Sree

[Peter StoevKeymaster]

Hi Sree,

Unfortunately, Auto-Height of Grid Rows is not supported.

Best Regards,
Peter Stoev

jQWidgets Team
Best Regards,

Peter Stoev

jQWidgets team
http://www.jqwidgets.com

[jmaraisParticipant]

This is a feature that I required in many instances. Without it the presentation looks unprofessional and is in may case actually unusable, unless you make the row heights large enough to ensure it will be sufficient for the largest possible data, which will have its own consequences and it is not an acceptable solution.

I decided to see if I can find a work around and had some success. It displays the first page correctly but upon any adjustments, like scrolling to a new page or should you use a scrollbar, it fails. The reason for it is that I placed part of the work around in the ready callback but that is probably not the correct place. A more suitable place could resolve it, a callback function which is called each time changes are made, like changing the page size, or going to a new page.

I think the current work around will work for static grid displays, with no paging or scrolling. I am posting it below and will appreciate any ideas to improve it, especially where to put the grid updating part. I will appreciate Peter if you can give any input you may have.


var rows = [];
var heights = [];
var wraprenderer = function (row, datafield, value) {
var (needHeightAdjust) {
// Calculate the new height
// One possible way:
// Can put a string (or other content) inside of a
// with the correct attributes (size, font-weight, etc).
// You should then be able to use jQuery to get the width of the span.
// This will give you the size of your string in pixels.
// Use this to calculate the new height of the cell.
// Or use any method to get your desired height.
var height = newHeight;
rows.push(row); // record the row ids of any adjusted rows
heights.push(height);
// Ensure that the content is wrapped.
// This work in most browsers, although it is css3, they say it even works in ie 5.5!!!
// There are plenty of other suggestions on the net how to ensure wrapping.
// You have to set the width, i.e set it to the same size as cell itself, or adjust for pading, etc
return '

'+value+'

';
}
};
$("#jqxgrid").jqxGrid({
ready: function(){
var incHeight = 0;
var oriHeight = 25; // The current height of the rows, replace if different than default
for (var i=0; i<rows.length; i++) {
$('#row'+rows[i]+'jqxgrid').css("height",heights[i]);
incHeight = incHeight+(heights[i]-oriHeight);
}
var contentHeight = $('#contentjqxgrid').height()+incHeight;
var gridHeight = $('#jqxgrid').height()+incHeight;
var offset = $('#pager').position(); // if using paging
var pagerTop = offset.top+incHeight; // if using paging
var offset = $('#horizontalScrollBarjqxgrid').position(); // if applicable
var horizontalScrollBarTop = offset.top+incHeight; // if applicable
$('#contentjqxgrid').css("height", contentHeight);
$('#jqxgrid').css("height", gridHeight);
$('#pager').css("top", pagerTop); // if using paging
$('#horizontalScrollBarjqxgrid').css("top", horizontalScrollBarTop); // if applicable
// also the height of any vertical scrolbar needs adjusting
},
columns: [
{ text: 'Name',
datafield: 'data',
width: 120,
cellsrenderer: wraprenderer
}
]
});

[Author]

Posts