So, I finally done locations tree with all levels without drill-down function and it looks good:

But still have some question, maybe MAF experts can help. 

1. on-item-click works only on first level list-item. Now, I added link elements instead of label, but lost finctionality when user click or row itself. 

2. How to remove this "blue selection" on left side of table. How I understood, it is part of "list-details", but if it is not presented I want to remove it. 

<data-list datasource="locds" enable-barcode-scanner="false" hierarchy-drill-in="false" id="createSRLocationDrilldown" margin="false" show-count="false" show-search="false" tree-name="Location Tree" no-select-behavior="false">
              <list-item child-attribute="locationchildren" id="j3p63">
                <adaptive-row id="gaaxy">
                  <adaptive-column id="jd8g5" large-width="33" medium-width="33" small-width="33" xlarge-width="33">
                    <label id="kqzdr" label="{item.location}" override-required="false"/>
                  </adaptive-column>
                  <adaptive-column id="kdb78" large-width="67" medium-width="67" small-width="67" xlarge-width="67">
                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_yqj79"/>
                  </adaptive-column>
                </adaptive-row>
              </list-item>
              <list-item id="qdddz">
                <adaptive-row id="yz53j">
                  <adaptive-column id="w4anx" large-width="33" medium-width="33" small-width="33" xlarge-width="33">
                    <label id="p3wyr" label="{item.location}" override-required="true"/>
                  </adaptive-column>
                  <adaptive-column id="bak9m" large-width="67" medium-width="67" small-width="67" xlarge-width="67">
                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_mv78q"/>
                  </adaptive-column>
                </adaptive-row>
              </list-item>
            </data-list>

Hi Andrey - nice work getting the full tree rendering . A couple of tweaks will give you row-click everywhere and remove the blue selection bar.

Since you're using two list-item templates (branch + leaf), add the click at the row or list-item level so it fires for both. Two options:

Option A - on the data-list (single handler for all rows):

<data-list
  datasource="locds"
  hierarchy-drill-in="false"
  on-item-click="zzselectLocation"
  on-item-click-arg="{item}"
  no-select-behavior="true"
  show-count="false" show-search="false"
  id="createSRLocationDrilldown">

  <!-- BRANCH NODES -->
  <list-item child-attribute="locationchildren" id="j3p63">
    <adaptive-row id="gaaxy">
      <adaptive-column large-width="33"><label label="{item.location}"/></adaptive-column>
      <adaptive-column large-width="67"><label label="{item.description2}" class-name="textOverflow"/></adaptive-column>
    </adaptive-row>
  </list-item>

  <!-- LEAF NODES -->
  <list-item id="qdddz">
    <adaptive-row id="yz53j">
      <adaptive-column large-width="33"><label label="{item.location}"/></adaptive-column>
      <adaptive-column large-width="67"><label label="{item.description2}" class-name="textOverflow"/></adaptive-column>
    </adaptive-row>
  </list-item>

</data-list>

• This keeps your UI simple and restores the "tap anywhere on the row" behavior on every level.

• You can drop the <link …> controls; labels plus row click are enough.

Option B - per-row click (if you need different handlers):

<list-item child-attribute="locationchildren" on-click="zzselectLocation" on-click-arg="{item}">
  <adaptive-row> … </adaptive-row>
</list-item>

<list-item on-click="zzselectLocation" on-click-arg="{item}">
  <adaptive-row> … </adaptive-row>
</list-item>

Tip: If your handler needs to know whether it's a branch or leaf, check item.locationchildren?.length.

That bar is the list's selection indicator from the built-in "select" behavior.

• You've got no-select-behavior="false" now - flip it to true:

<data-list … no-select-behavior="true">

• If your MAF version supports it, also set:

selection-mode="none"

• If your build theme still shows the stripe, add a tiny CSS override:

/* Hide left selection stripe & reclaim spacing */
.mx--list .mx--list__selection { display: none !important; }
.mx--list .mx--list__item--selected { border-left: 0 !important; }
.mx--list .mx--list__content { margin-left: 0 !important; }

• With hierarchy-drill-in="false", ensure your datasource returns only the needed fields (location, description2, children) to keep DOM light.

• If you want a hover affordance for desktop, add class-name="mx--clickable-row" (or your own CSS with cursor:pointer).

If you share your MAF/Maximo Mobile version, I can match the exact supported attributes (selection-mode, additionalWhere, etc.) for that build. Good luck! 🚀

- Manu Nagayach
IBM-Certified Maximo Architect | EAM Strategist

Original Message:
Sent: Wed November 05, 2025 11:01 AM
From: Andrey Ilinskiy
Subject: MAF data-list component

So, I finally done locations tree with all levels without drill-down function and it looks good:

But still have some question, maybe MAF experts can help. 

1. on-item-click works only on first level list-item. Now, I added link elements instead of label, but lost finctionality when user click or row itself. 

2. How to remove this "blue selection" on left side of table. How I understood, it is part of "list-details", but if it is not presented I want to remove it. 

<data-list datasource="locds" enable-barcode-scanner="false" hierarchy-drill-in="false" id="createSRLocationDrilldown" margin="false" show-count="false" show-search="false" tree-name="Location Tree" no-select-behavior="false">              <list-item child-attribute="locationchildren" id="j3p63">                <adaptive-row id="gaaxy">                  <adaptive-column id="jd8g5" large-width="33" medium-width="33" small-width="33" xlarge-width="33">                    <label id="kqzdr" label="{item.location}" override-required="false"/>                  </adaptive-column>                  <adaptive-column id="kdb78" large-width="67" medium-width="67" small-width="67" xlarge-width="67">                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_yqj79"/>                  </adaptive-column>                </adaptive-row>              </list-item>              <list-item id="qdddz">                <adaptive-row id="yz53j">                  <adaptive-column id="w4anx" large-width="33" medium-width="33" small-width="33" xlarge-width="33">                    <label id="p3wyr" label="{item.location}" override-required="true"/>                  </adaptive-column>                  <adaptive-column id="bak9m" large-width="67" medium-width="67" small-width="67" xlarge-width="67">                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_mv78q"/>                  </adaptive-column>                </adaptive-row>              </list-item>            </data-list>

------------------------------
Andrey Ilinskiy
Handz.on
https://www.on.de/
München
------------------------------

Thank for answer.

Hm... when i set on-item-click on data-list level it doesnt works. But that list-item has that property I missed thanks!

Now I have another problem. Because of data-list has more than 10+k records, processing all of them takes 15 seconds.

I take all locations records (raw lochierarchy records with join to locations in view, so it is not SQL problem), than put it all to JSON datasource to build multi level hierarcy structure parent-children in JS. And that takes most time. 

Any ideas how to load children elements on branch open?

All is because OTB drill-in is not enough user friendly for our customer. 

Original Message:
Sent: Mon November 10, 2025 05:38 PM
From: Manu Nagayach
Subject: MAF data-list component

Hi Andrey - nice work getting the full tree rendering . A couple of tweaks will give you row-click everywhere and remove the blue selection bar.

Since you're using two list-item templates (branch + leaf), add the click at the row or list-item level so it fires for both. Two options:

Option A - on the data-list (single handler for all rows):

<data-list  datasource="locds"  hierarchy-drill-in="false"  on-item-click="zzselectLocation"  on-item-click-arg="{item}"  no-select-behavior="true"  show-count="false" show-search="false"  id="createSRLocationDrilldown">  <!-- BRANCH NODES -->  <list-item child-attribute="locationchildren" id="j3p63">    <adaptive-row id="gaaxy">      <adaptive-column large-width="33"><label label="{item.location}"/></adaptive-column>      <adaptive-column large-width="67"><label label="{item.description2}" class-name="textOverflow"/></adaptive-column>    </adaptive-row>  </list-item>  <!-- LEAF NODES -->  <list-item id="qdddz">    <adaptive-row id="yz53j">      <adaptive-column large-width="33"><label label="{item.location}"/></adaptive-column>      <adaptive-column large-width="67"><label label="{item.description2}" class-name="textOverflow"/></adaptive-column>    </adaptive-row>  </list-item></data-list>

• This keeps your UI simple and restores the "tap anywhere on the row" behavior on every level.

• You can drop the <link …> controls; labels plus row click are enough.

Option B - per-row click (if you need different handlers):

<list-item child-attribute="locationchildren" on-click="zzselectLocation" on-click-arg="{item}">  <adaptive-row> … </adaptive-row></list-item><list-item on-click="zzselectLocation" on-click-arg="{item}">  <adaptive-row> … </adaptive-row></list-item>

Tip: If your handler needs to know whether it's a branch or leaf, check item.locationchildren?.length.

---

That bar is the list's selection indicator from the built-in "select" behavior.

• You've got no-select-behavior="false" now - flip it to true:

<data-list … no-select-behavior="true">

• If your MAF version supports it, also set:

selection-mode="none"

• If your build theme still shows the stripe, add a tiny CSS override:

/* Hide left selection stripe & reclaim spacing */.mx--list .mx--list__selection { display: none !important; }.mx--list .mx--list__item--selected { border-left: 0 !important; }.mx--list .mx--list__content { margin-left: 0 !important; }

---

• With hierarchy-drill-in="false", ensure your datasource returns only the needed fields (location, description2, children) to keep DOM light.

• If you want a hover affordance for desktop, add class-name="mx--clickable-row" (or your own CSS with cursor:pointer).

If you share your MAF/Maximo Mobile version, I can match the exact supported attributes (selection-mode, additionalWhere, etc.) for that build. Good luck! 🚀

- Manu Nagayach
IBM-Certified Maximo Architect | EAM Strategist

------------------------------
Manu Nagayach

Original Message:
Sent: Wed November 05, 2025 11:01 AM
From: Andrey Ilinskiy
Subject: MAF data-list component

So, I finally done locations tree with all levels without drill-down function and it looks good:

But still have some question, maybe MAF experts can help. 

1. on-item-click works only on first level list-item. Now, I added link elements instead of label, but lost finctionality when user click or row itself. 

2. How to remove this "blue selection" on left side of table. How I understood, it is part of "list-details", but if it is not presented I want to remove it. 

<data-list datasource="locds" enable-barcode-scanner="false" hierarchy-drill-in="false" id="createSRLocationDrilldown" margin="false" show-count="false" show-search="false" tree-name="Location Tree" no-select-behavior="false">              <list-item child-attribute="locationchildren" id="j3p63">                <adaptive-row id="gaaxy">                  <adaptive-column id="jd8g5" large-width="33" medium-width="33" small-width="33" xlarge-width="33">                    <label id="kqzdr" label="{item.location}" override-required="false"/>                  </adaptive-column>                  <adaptive-column id="kdb78" large-width="67" medium-width="67" small-width="67" xlarge-width="67">                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_yqj79"/>                  </adaptive-column>                </adaptive-row>              </list-item>              <list-item id="qdddz">                <adaptive-row id="yz53j">                  <adaptive-column id="w4anx" large-width="33" medium-width="33" small-width="33" xlarge-width="33">                    <label id="p3wyr" label="{item.location}" override-required="true"/>                  </adaptive-column>                  <adaptive-column id="bak9m" large-width="67" medium-width="67" small-width="67" xlarge-width="67">                    <link on-click="zzselectLocation" on-click-arg="{item}" label="{item.description2}" class-name="mx--label mx--touch-16-regular bx--form-item textOverflow mx--label-default-pad" id="a1_mv78q"/>                  </adaptive-column>                </adaptive-row>              </list-item>            </data-list>

------------------------------
Andrey Ilinskiy
Handz.on
https://www.on.de/
München
------------------------------