Group Layer open in Layer List upon map load

[AshleyPeters]

I'm working with a single group layer in the layer list widget. By default, the group layer is visible, but collapsed upon map load. For ease of use for the end user, I would like the group layer to be open/expanded when the map loads. I believe I can achieve this by changing the CSS for the widget.  I've added this block of code to the style and have tried different things, but haven't been able to get the group layer to be open upon map load. Any assistance is appreciated.

.esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--opened,
  .esri-layer-list__child-toggle .esri-layer-list__child-toggle-icon--closed-rtl,
  .esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--closed {
    display: none;
  }
  .esri-layer-list__child-toggle--open .esri-layer-list__child-toggle-icon--opened {
    display: block;
  }

[UndralBatsukh · Accepted solution]

Hi there, 

You don't have to do this via CSS. You can set the LayerList.listItemCreatedFunction to expand the grouplayer on start. The code snippet in the SDK doc shows this and the following is the code. 

const layerList = new LayerList({
  view: view,
  // executes for each ListItem in the LayerList
  listItemCreatedFunction: defineActions
});

// Add widget to the top right corner of the view
view.ui.add(layerList, "top-right");

function defineActions(event) {
  const item = event.item;
  if (item.layer.type === "group"){
    item.open = true;
  }
}

Hope this helps,

-Undral

[ReneRubalcava]

Edit: Beaten by Undral!

You don't need to use CSS for this. You can use the listItemCreatedFunction to iterate through the items in the LayerList and determine which ones you want open by default.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCr...

Demo

https://codepen.io/odoe/pen/PoyKwyw?editors=100

[Justin_Greco]

Hi Ashley, you can achieve this by using the listItemCreatedFunction property of the LayerList.  Then set open to true for the ListItem for the layer you want expanded.

let layerList = new LayerList({
  view: view,
  // executes for each ListItem in the LayerList
  listItemCreatedFunction: function (event) {

    // The event object contains properties of the
    // layer in the LayerList widget.

    let item = event.item;

    if (item.title === "US Demographics") {
      // open the list item in the LayerList
      item.open = true;
      // change the title to something more descriptive
      item.title = "Population by county";
      // set an action for zooming to the full extent of the layer
      item.actionsSections = [[{
        title: "Go to full extent",
        className: "esri-icon-zoom-out-fixed",
        id: "full-extent"
      }]];
    }
  }
});

[AshleyPeters]

Wow, thank you all! I looked at actions, but didn't see anything that made sense for a solution. But, that worked like a charm. Always good to learn something new!