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

[IanPeebles]

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.

[RobertScheitlin__GISP]

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

[IanPeebles · Accepted solution]

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? .

[KenBuja]

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