topic Re: Data Grid - Cannot Adjust Column Widths for Field Aliases with a Space in ArcGIS JavaScript Maps SDK Questions

Data Grid - Cannot Adjust Column Widths for Field Aliases with a Space

IanPeebles — Tue, 15 Nov 2016 22:52:38 GMT

I have a custom data grid within my application. I have been able to get it to work, but the array of attributes only works according to the alias. Some of my attributes have spaces in the alias. Here is an example:

The problem is, in my .css file, I cannot control the widths of the attributes that contain spaces.

Attributes such as Name, Address, and Email are fine because there are no spaces.

Here is how it appears from the data grid:

Notice how the fields following Email are close together.

Is there a way I can accept spaces for my field aliases in .css without having to make alias changes on the data side?

The zip code and map page fields will not appear in my datagrid. Should I look for the column ID instead? Any suggestions will greatly be appreciated. Thanks.

Re: Data Grid - Cannot Adjust Column Widths for Field Aliases with a Space

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:37:30 GMT

Ian,

You can define the width of columns when you create your dgrid:

var grid = new DataGrid({
  store: store,
  query: { id: "*" },
  structure: [
    { name: "First Name", field: "first", width: "84px" },
    { name: "Last Name", field: "last", width: "84px" },
    { name: "Bats", field: "bats", width: "70px" },
    { name: "Throws", field: "throws", width: "70px" },
    { name: "G", field: "totalG", width: "60px" },
    { name: "AB", field: "totalAB", width: "60px" },
    { name: "Games as Batter", field: "totalGAB", width: "120px" },
    { name: "R", field: "totalR", width: "60px" },
    { name: "RBI", field: "totalRBI", width: "60px" },
    { name: "BB", field: "totalBB", width: "60px" },
    { name: "K", field: "totalK", width: "60px" },
    { name: "H", field: "totalH", width: "60px" },
    { name: "2B", field: "total2B", width: "60px" },
    { name: "3B", field: "total3B", width: "60px" },
    { name: "HR", field: "totalHR", width: "60px" }
  ]
}, "grid");‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Data Grid - Cannot Adjust Column Widths for Field Aliases with a Space

IanPeebles — Wed, 16 Nov 2016 21:38:55 GMT

Hello Robert, thanks for your response as always. I did figure out another solution. Instead of using .dgrid-field-FIELDNAME, I instead use .dgrid-column-0, .dgrid-column-1, .dgrid-column-2, and so on. I use the ID Number. Aliases with spaces will not work, so went to the ID instead.

That seems to work pretty. Here is a sample of how the data grid appears using .css to specify the field widths:

I get the fixed widths, but I am trying to take it a step further and make the fields resizable. So if you start at 100px, you can expand to the right. So far, I have been unsuccessful. I checked ESRI sample and noticed that their fields are fixed and not expandable.

Here is a sample I am referring to:

https://developers.arcgis.com/javascript/3/samples/find_map_datagrid/

Any ideas on how to make the entire cell resizable? .

Re: Data Grid - Cannot Adjust Column Widths for Field Aliases with a Space

KenBuja — Wed, 16 Nov 2016 21:46:17 GMT

You can use the dgrid extension ColumnResizer: dgrid/ColumnResizer.md at dev-0.3 · SitePen/dgrid · GitHub

There are some examples in the dGrid Test page under "extensions": dgrid Tests