Forum
Log In
Home
Topic RSS
01:27
19/05/2010
Offline
A good feature would be implementing a doubleclick handler for column separators that would automatically expand the column to the left of the separator to the width of the text of the widest row for that particular column. You can see this functionality in Excel when you type very long text in a cell, then doubleclick the column separator.
03:19
19/05/2010
Offline
So I decided it would be "fun" (yah, fun in a sick sort of way) to try and implement this. CAUTION: This code DOES NOT WORK YET, but it's a start… a damned good one, but I can't figure out how to get the length of a string in pixels.
$('span.ui-jqgrid-resize').dblclick(function () {
//
// First get the ID of the column that this separator belongs to.
// This is a tag with an ID for the column.
//
id = $(this).parent ().attr ('id');
width = 0;
//
// Iterate over all of the rows and figure out which row is the
// longest.
//
$.each ($('td[aria-describedby=' + id + ']'), function () {
inside = $(this).html ();
//
// find the width of the text and see if it's larger than the
// current maximum width.
//
width = 100; // <--- hack
});
//
// Now that we've found the largest string in pixels, set the
// header column to that width and the first column in the data
// row to that width as well.
//
$(this).parent ().width (width);
$('td[aria-describedby=' + id + ']').width (width);
});
03:23
19/05/2010
Offline
The other part that is odd is the actual column drag span. Although it gets moved to the correct spot (as specified by the 'width' variable), when you go to actually DRAG it, it drags from the spot it was at PRIOR to resizing the column. Probably some internal data structure that holds its current position or something like that.
04:25
19/05/2010
Offline
So this worked a little better. I created an invisible DIV in my document and then used it to determine the width of strings. Not "optimal" I guess, but it worked. Here's the code now. Note that I still have the issue with the drag handle doing odd things after the columns are resized.
$('span.ui-jqgrid-resize').dblclick(function () {
//
// First get the ID of the column that this separator belongs to.
// This is a tag with an ID for the column.
//
id = $(this).parent ().attr ('id');
//
// Get the text of the column header and compute its width. Adding
// 32 pixels to adjust for the potential sort icon for the column.
//
$('#stringWidth').html ($(this).next ().html ());
width = $('#stringWidth').width () + 32;
//
// Iterate over all of the rows and figure out which row is the
// longest.
//
$.each ($('td[aria-describedby=' + id + ']'), function () {
$('#stringWidth').html ($(this).html ());
w = $('#stringWidth').width ();
if (w > width) {
width = w;
}
});
//
// Now that we've found the largest string in pixels, set the
// header column to that width and also the first row's data column
// width as well.
//
$(this).parent ().width (width);
$('td[aria-describedby=' + id + ']').width (width);
});
15:24
Moderators
30/10/2007
Offline
Hello,
Thanks for the work.
To work this a lot of other thing should be done. Since we work on grouping and there are a lot of changes in the structure I will try to provide a method like setColWidth - which will do the job for you, but this will happen after 2 moths maximum
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
07:07
09/03/2012
Offline
Here's some fully working code... its a bit messy but functional. I adapted it from the jqGrid's dragEnd event handler.
jQuery('span.ui-jqgrid-resize').dblclick(function ()
{
var id = jQuery(this).parent().attr('id'); // First get the ID of the column that this separator belongs to. This is a tag with an ID for the column.
var colName = id.split('_')[1];
var testDiv = jQuery('#stringWidth'); // Test DIV for measuring string widths
testDiv.addClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // Assign jqGrid header style classes
var padding = parseInt(jQuery(jQuery(this).parent()).css('padding-left')) + parseInt(jQuery(jQuery(this).parent()).css('padding-right')); // Calculate jqGrid header padding
testDiv.html(jQuery(jQuery(this).parent()).html()); // Assign jqGrid header text to test DIV
var nw = testDiv.width() + padding; // Calculate jqGrid header text width
testDiv.removeClass('ui-jqgrid ui-jqgrid-htable ui-jqgrid-sortable ui-th-column ui-state-hover ui-widget-content ui-widget-header ui-state-focus'); // De-assign jqGrid header style classes
testDiv.addClass('ui-jqgrid ui-row-ltr jqgrow ui-widget-content'); // Assign jqGrid cell style classes
jQuery.each (jQuery('td[aria-describedby=' + id + ']'), function() // Iterate over all of the rows and figure out which row is the widest.
{
padding = parseInt(jQuery(this).css('padding-left')) + parseInt(jQuery(this).css('padding-right')); // Calculate jqGrid cell padding
testDiv.html(jQuery(this).html()); // Assign jqGrid cell text to test DIV
w = testDiv.width() + padding; // Calculate jqGrid cell text width
if (w > nw) {nw = w;}
});
// Code below adapted from the grid's "dragEnd" event handler
var ts = jQuery('#grid')[0];
var grid = ts.grid;
var p = ts.p;
var idx = jQuery.jgrid.getCellIndex(jQuery(this).parent());
jQuery("#rs_m"+jQuery.jgrid.jqID(p.id)).css("display","none");
p.colModel[idx].width = nw;
grid.headers[idx].width = nw;
grid.headers[idx].el.style.width = nw + "px";
grid.cols[idx].style.width = nw+"px";
if(grid.footers.length>0) {grid.footers[idx].style.width = nw+"px";}
if(p.forceFit===true)
{
nw = grid.headers[idx+p.nv].newWidth || grid.headers[idx+p.nv].width;
grid.headers[idx+p.nv].width = nw;
grid.headers[idx+p.nv].el.style.width = nw + "px";
grid.cols[idx+p.nv].style.width = nw+"px";
if(grid.footers.length>0) {grid.footers[idx+p.nv].style.width = nw+"px";}
p.colModel[idx+p.nv].width = nw;
}
else
{
jQuery('table:first',grid.bDiv).css("width",p.tblwidth+"px");
jQuery('table:first',grid.hDiv).css("width",p.tblwidth+"px");
grid.hDiv.scrollLeft = grid.bDiv.scrollLeft;
if(p.footerrow)
{
jQuery('table:first',grid.sDiv).css("width",p.tblwidth+"px");
grid.sDiv.scrollLeft = grid.bDiv.scrollLeft;
}
}
});
18:45
05/05/2011
Offline
It sets column width to very small. After that also column cannot resized.
02:35
09/03/2012
Offline
kobruleht said:
It sets column width to very small. After that also column cannot resized.
Really? It works here... Do you have any data in the column? What UI style theme are you using?
17:11
05/05/2011
Offline
Got it working (missed div). Thanks.
How to align all columns in grid? e.q double click somewhere in first column header should resize all columns.
01:50
09/03/2012
Offline
Got it working (missed div). Thanks.
Sorry my bad… I should have explicitly stated that you needed to place an invisible div somewhere on your page as per below:
How to align all columns in grid? e.q double click somewhere in first column header should resize all columns.
Should be doable, just insert a button somewhere, (will be easier in the footer), and iterate across the columns from left to right. Post your code here for me when you get it working. 
p.s. Feel free to tidy up my cludgy code…
09:26
05/05/2011
Offline
>Should be doable, just insert a button somewhere, (will be easier in the footer), and iterate across the columns from left to right. Post your code here for me when you get it working.
My grid dont have footer. It has top level toolbar and muliti-select checkbox column. VFP grid I'm using does this on double click in first column header. In jqgrid multi select column header contaisn checkbox, not sure if it is reasonable to enable double click for this there.
Maybe use double click in some other place or add separate button in toolbar.
I van add button but do'nt have enough js/jqgrid knowledge to use your code for this.
Most Users Ever Online: 715
Currently Online:
26 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
