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!
Solved! Go to Solution.
Try setting the width via css:
.field-PARCELID{
width:300px !important;
}
Try setting the width via css:
.field-PARCELID{
width:300px !important;
}
Thank you John! That did the trick. CSS is challenging for me sometimes....
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();
Thank you for this additional information. This is helpful.
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?
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.