topic Re: Data Grid - Changing Column Widths? in ArcGIS JavaScript Maps SDK Questions

Data Grid - Changing Column Widths?

IanPeebles — Thu, 13 Oct 2016 21:30:26 GMT

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!

Re: Data Grid - Changing Column Widths?

JohnGrayson — Sun, 12 Dec 2021 00:34:45 GMT

Try setting the width via css:

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

Re: Data Grid - Changing Column Widths?

IanPeebles — Fri, 14 Oct 2016 00:39:37 GMT

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

Re: Data Grid - Changing Column Widths?

KenBuja — Sun, 12 Dec 2021 00:34:47 GMT

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();‍‍

Re: Data Grid - Changing Column Widths?

IanPeebles — Fri, 14 Oct 2016 14:36:03 GMT

Thank you for this additional information. This is helpful.

Re: Data Grid - Changing Column Widths?

IanPeebles — Mon, 17 Oct 2016 14:58:36 GMT

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?

Re: Data Grid - Changing Column Widths?

BillChappell — Mon, 17 Oct 2016 15:12:28 GMT

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.