javascript - 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);
                }
            });

Answer 1

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.