nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Data Grid - Changing Column Widths?

ipeebles

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!

Najděte více příspěvků označených jako

Accepted answers

JohnGrayson

Try setting the width via css:

<SPAN class="selector token">.field-PARCELID</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>300px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

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.

ipeebles

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?

ipeebles

Thank you for this additional information. This is helpful.

kenbuja

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

grid<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addCssRule</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#"</SPAN> <SPAN class="operator token">+</SPAN> grid<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">+</SPAN> <SPAN class="string token">" .field-SITEADDRESS"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"width: 50px"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
grid<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ipeebles

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

JohnGrayson

Try setting the width via css:

<SPAN class="selector token">.field-PARCELID</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>300px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.