Set dojox.grid.datagrid header column width dynamically

Question

I have a declarative dojox.grid.datagrid with initial header column width. And i have a textbox. my need is

In UI, if user enters any value to textbox, that value should be set as the dynamic width of column's header.

<div class="claro" id="dfgdfgd" name="dataGrid" onclick="setWidgetproperty(this.id,'xy','inner__dfgdfgd');" ondblclick="editCustomGrid(this.id)" onmouseup="setDocStyle(this.id)" style="height:200px; left:42px; position:absolute; top:89px; width:950px;">
 <table class="claro" dojotype="dojox.grid.DataGrid" id="inner__dfgdfgd" rowselector="10px" style="height: 180px; width: 300px;">
      <thead>
           <tr>
                <th field="Column1" id="Column1" noresize="true" width="100px">
                     <label id="Column1" onclick="getCustomGridColName(this.id,'inner__dfgdfgd');" style="cursor:pointer; font-family: Times; font-size:12pt;">
                          Column1
                     </label>
                </th>
                <th field="Column2" id="Column2" noresize="true" width="100px">
                     <label id="Column2" onclick="getCustomGridColName(this.id,'inner__dfgdfgd');" style="cursor:pointer; font-family: Times; font-size:12pt;">
                          Column2
                     </label>
                </th>
           </tr>
      </thead>
 </table>
 <input id="hidden__dfgdfgd" name="dataGrid" style="display:none;" type="hidden">

I am able to get the particular column's width using below code. How to set back this width to textbox value.

dojo.forEach(dijit.byId(tableID).layout.cells, function(cell,idx){
                if(cell.field == id){
                    headerWidth = cell.width;
                    alert(headerWidth);
                }
            });

score 2 · Accepted Answer · answered Apr 05 '13 at 06:34

2

There is a method called setCellWidth() (you can read about it in the API Documentation) which you can use to change the width of the cells.

The only step you then need to complete is to update the column (so that the changes become visible). This step can be completed with cell.view.update();.

Be aware: updating the complete grid with grid.update() or grid.sizeChange() is not enough because it will only update the column headers. (That's something I noticed.)

So in your forEach loop you would do something like:

grid.setCellWidth(idx, "200px");
cell.view.update();

I also made a working JSFiddle which you can view here.

answered Apr 05 '13 at 06:34

g00glen00b

41,995
13
95
133

is it possible to re-size the column's width using onResizeColumn(cellIdx) event – Rachel Apr 05 '13 at 11:55
I wouldn't see why not. You can write the same foreach loop in your event handler. – g00glen00b Apr 05 '13 at 12:10
ok. while firing the event, is it possible to get the adjusted width value? – Rachel Apr 05 '13 at 12:17
You can use `grid.getCell(celldx).width` in your event handler to get the width of the cell that is given as parameter in your event handler. In stead of setting it to "200px", you can use the width of that cell. – g00glen00b Apr 05 '13 at 12:22
no what i meant is, i have a grid with column's width as 100px. in UI, user increasing the column's width. but still in code it has 100px. after increasing the width in UI, is it possible to get the adjusted width using onResizeColumn(cellIdx) and setting width back to code? can you check this link please.. http://stackoverflow.com/questions/15833852/avoid-decimal-values-in-dijit-form-horizontalslider – Rachel Apr 05 '13 at 12:26
1

Try using `grid.getCell(celldx).unitWidth`. That value is updating every time you change your column width (programmatically or by UI). – g00glen00b Apr 05 '13 at 12:42

Set dojox.grid.datagrid header column width dynamically

1 Answers1

Linked