Data Grid - Changing Column Widths?

[IanPeebles]

I am populating an array that contains fields and labels that will be used in a data grid.  I am working with the ESRI sample, and I am trying to change the width of the columns for each attribute, but have not had any luck.

Here is the block of code:

var columns = [
{'field': 'PARCELID', 'label': "Parcel ID"},
{'field': 'OWNERNME1', 'label': 'Owner 1'},
{'field': 'OWNERNME2', 'label': 'Owner 2'},
{'field': 'RESYRBLT', 'label': 'Year Built'},
{'field': 'SITEADDRESS', 'label': 'Street Address', 'width': '50'}
];

The fields all remain the same width within the application.  I am testing with this sample:

Here is the sample I am looking at:

Display Find Task results in Dojo DataGrid 

I just cannot get the column widths to change.  Anyone have any ideas?

Thanks!

[JohnGrayson · Accepted solution]

Try setting the width via css:

.field-PARCELID{
    width:300px !important;
 }‍‍‍

[IanPeebles]

Thank you John! That did the trick. CSS is challenging for me sometimes....

[KenBuja]

You can also change the width of a column programmatically.  Paste these lines in the sandbox sample right after creating the grid.

grid.addCssRule("#" + grid.id + " .field-SITEADDRESS", "width: 50px");
grid.resize();‍‍

[IanPeebles]

Thank you for this additional information.  This is helpful.

[IanPeebles]

Hello, I have one more question.  Given we can define the width of a field in .css, can we also set the width by default and make the field width adjustable as well, meaning if by default a field is 100px, but I can use the left mouse click to widen the field to 200, 300, or 400px?

Is that possible?

[BillChappell]

In the Esri example the css is https://js.arcgis.com/3.18/dgrid/css/dgrid.css,

you can open this can copy/paste it to http://jsbeautifier.org/ so you can read the current css. Change what you want, save it as a new css file, then use the new css in your project.