Add a custom class to either ui.element or ui.row to querry data from sortable

[phifuh]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

with ui.element("test") as data_row:
    data_row.data_template = CustomComponent(text="some data")

with ui.row().mark("test") as data_row:
    data_row.data_template = CustomComponent(text="some data")

Description

I want to bind a custom class to the UI — in my case, it’s a sortable list — and I’m considering what the best practice would be. I could bind it to ui.row, mark it, and then query it with the ElementFilter, or I could use ui.element with a special tag and the query parameter.

Since a custom class doesn’t render anything in the frontend (as far as I know), the only effect I noticed is that a custom tag is added to the JS. Is there a smarter way to bind custom classes? I was hoping that ElementFilter would recognize a custom class, but it seems to only support native objects.

NiceGUI Version

2.x

Python Version

3.13

Browser

Chrome

Operating System

Linux

Additional Context

No response

[phifuh]

Okay, so I guess the answer is to use markers, because the query method doesn’t seem to be iterable; it’s only finding one object. Now I’m facing an issue where ElementFilter isn’t retrieving objects in order, which kind of makes it pointless for my use case of collecting all data from multiple sortable lists.

Any idea how to use the elementfilter in order? Else I would be required to iterate over "slots -> children - if type -> slots -> children" and so on and that would be tedious

[evnchn]

Hello @phifuh

According to my understanding, ElementFilter should already be in-order: https://nicegui.io/documentation/user#using_an_elementfilter

A MRE would certainly help. Thanks!

[phifuh]

# ruff: noqa: T201, ERA001

from nicegui import ElementFilter, ui

from src.components.textinput import TextInputComponent


def print_order() -> None:

    print("------------------")
    for element in ElementFilter(marker=["data"]):
        print(f"Items: {element}")


def add_template(sortable_template_list) -> None:
    """Add a new template item to the template list."""
    with sortable_template_list, ui.row() as template_item:
        ui.icon("drag_handle").classes("nicegui-sortable-handle").style("padding-top: 5px;")
        ui.label(f"Item_{template_item.id}")

        with ui.element().mark(f"data {template_item.id!s}") as data_row:
            data_row.data_template = TextInputComponent(text="page header", name="item_" + str(template_item.id))


async def add_element_popup(template_list: ui.element) -> None:

    with ui.dialog() as dialog, ui.card():
        ui.label("Add some items")
        radio_control = ui.radio(["Another sortable group", "Item"], value="Another sortable group")
        with ui.row():
            ui.button("stop", on_click=dialog.close).props("flat")
            ui.button("add", on_click=lambda: dialog.submit(radio_control.value)).props("flat primary")

    async def show_creation_dialog(template_list: ui.element) -> None:
        result = await dialog
        if result == "Another sortable group":
            add_expansion_layout(template_list)
        elif result == "Item":
            add_template(template_list)

    await show_creation_dialog(template_list)


def add_control_buttons(sortable_template_list: ui.sortable, *, is_root_element: bool = False) -> None:
    """Add control buttons to the template list."""
    style = "mr-2 gap-0 ml-0 pl-0 ml-[-5px]"
    if not is_root_element:
        style = "mr-2 gap-0 absolute right-[-50px] ml-0 pl-0"

    with ui.column().classes(style), ui.row():
        ui.button(icon="add", on_click=lambda: add_element_popup(sortable_template_list))


def add_expansion_item(parent_element: ui.element) -> ui.sortable:
    with parent_element, ui.expansion("", value=True).classes("grow min-w-0 gap-0") as expansion:
        expansion.text = f"Expansion_{expansion.id}"

        return ui.sortable({"group": "shared-group"}).classes("p-0").style("row-gap: 1px; margin-left:-15px "), "data_expansion_" + str(expansion.id)


def add_expansion_layout(parent_element: ui.element, *, is_root_element: bool = False) -> None:
    handle_icon_style = "nicegui-sortable-handle inline-flex self-start pt-[17px] "

    with parent_element.classes("w-full flex-nowrap"), ui.row().classes("flex-nowrap gap-0 p-0").style("width: calc(100% + 15px)") as expansion_row:
        ui.icon("drag_handle").classes(f"{handle_icon_style}")

        template_list, expansion_id = add_expansion_item(expansion_row)
        add_control_buttons(template_list, is_root_element=is_root_element)
        with ui.element().mark(f"data {expansion_id}") as data_row:
            data_row.data_template = TextInputComponent(text="page header", name=expansion_id)


ui.button("Add expansion", on_click=lambda: add_expansion_layout(main_column, is_root_element=True))
ui.button("Print order in console", on_click=print_order)


with ui.row().classes("w-screen h-screen"), ui.column().classes("basis-1/4 min-w-0 h-full nested-item"):
    with ui.sortable({"group": "shared-group"}).classes("p-0").style("row-gap: 1px; margin-left:-15px ").mark("root") as main_column:
        pass

ui.run(reload=True, title="Report builder", port=8080)

Add some items to the sortable and u will see that its not in order

and if you drag and drop items the order is neither updated: