Change column with via Javascript

I've searched the forum but can not find an example of changing the widths of specific columns via JavaScript after the table has been rendered.

For example, click a button and change the 2nd column width from 50 to 100 pixels.

If this is possible I'd love to buy this control.

January 18,
check out the code in /controls/grid.js, specifically the startColumnResize method. You need to update the width for the column in the stylesheet, then update the control ( grid.getTemplate("layout").action("adjustSize"); )
Ryan Lauck
January 19,
This works for me:

function doSetColumnWidth(grid, index, width) {
        var stylesheet = document.styleSheets[document.styleSheets.length-1];
        var selector = "#" + grid.getId() + " .active-column-" + i; 
        var rule = null;
        for (i = 0; i < stylesheet.rules.length; i++){ 
            if(stylesheet.rules[i].selectorText == selector){ 
                rule = stylesheet.rules[i]; 
        if (rule) { 
            rule.style.width = width;
        else { 
            stylesheet.addRule(selector, "width:" + width + "px");
January 20,
No workie in Firefox. Dammit.
June 8,

If you look closely at the code you will see that it is modifying or adding to the Stylesheet. The 'rules' part is IE only. If you do a quick Google search you will be able to find a cross browser function that will allow you to modify Stylesheets in most browsers. Once you get the Stylesheet modified with the new column widths using the new cross browser function, it should work fine in FireFox.
Jim Hunter
June 11,
Show me how
November 29,

This topic is archived.

See also:

Back to support forum