I want to use Ui. Check box instead of Ui. Select

[Swasthik-Jain]

Question

Here I have provided piece of code

_search_class = ui.select([]) # declaration

@debounce(0.2)
async def search():
  
    global _search_class
    client = create_client()

    variable_values = {"search_string": '*' + '* OR *'.join(_search_input.value.split()) + '*',
                       "skip": _search_count.value * (_search_pages.value - 1),
                       "limit": _search_count.value}

    if not _search_class.value:
        template = """
            query search($search_string: String, $skip: Int, $limit: Int) {
                _All(
                    where: {fTSearch: {search: $search_string}},
                    skip: $skip,
                    limit: $limit
                )
                {
                    externalID
                    name
                    className
                }
            }
        """

    else:
        template = """
            query search($search_string: String, $skip: Int, $limit: Int, $classes: [String]) {
                _All(
                    where: {
                        and:
                        [
                            {fTSearch: {search: $search_string}},
                            {className: {isOneOf: $classes}}
                        ]
                    },
                    skip: $skip,
                    limit: $limit
                )
                {
                    externalID
                    name
                    className
                }
            }
        """
        variable_values['classes'] = _search_class.value
		
async def create_search_panel() -> None:
    global _search_input
    global _search_class
    global _search_results
    global _search_pages
  

    with ui.row(wrap=False).classes('w-full content-stretch mt-2'):
        _search_input = ui.select(label="Search (type your search query here and confirm with \"Enter\")",
                                  options=from_cache('search_history'),
                                  with_input=True,
                                  new_value_mode='add-unique',
                                  clearable=True,
                                  on_change=search).classes('w-full')

    with ui.row(wrap=False).classes('w-full'):
        _search_class = ui.select(await get_class_type_options(),
                                  label="Filter",
                                  value=None,
                                  with_input=True,
                                  multiple=True,
                                  clearable=True,
                                  on_change=search).classes('w-72'

        _search_results = ui.list().classes('w-full content-stretch')

from get_class_type_options() I will get all the classes
After selecting options from ui.select it will filter the search based on the classes

But I wanted ui.check box selection instead of ui.select
I have implemented ui.chekbox but it is not working as expected functionality wise

_search_class = ui.checkbox() -->- declaration

        with ui.dropdown_button('Filter Class', auto_close=True).classes('w-96 rb-btn-info').props('outline'):
            with ui.card():
                options = await get_class_type_options()
                with ui.column():
                    for option in options:
                        _search_class = ui.checkbox(
                            text=option,
                            value=False,
                            on_change=search
                        )

The problem is ->on_change functionality is not working as expected[ It is working fine with ui.select]
I wanted to know is there any approach where we can directly add checkbox to select or should I need to modify ui.checkbox so that I will get the desired output

[falkoschindler]

Hi @Swasthik-Jain,

That's a pretty long code, but still missing definitions. Therefore we can't try it out to see what happens. What exactly does not work?
And can you please provide a minimal executable example? That would allow us to help more efficiently. Thanks!

[Swasthik-Jain]

Hi @falkoschindler
I wanted to use ui.checkbox insted of ui.select

previously I'm using checkbox like this when click the checkbox it triggers only general search query and even the filter is not working as expected since it will not directly handle the selection of checkbox
for eg:
previously i'm using ui.check box without handling checkbox option selection like this

import asyncio
from nicegui import ui

search_input_value = ""
selected_classes = []
options = ['ClassA', 'ClassB', 'ClassC']


async def search():
    global search_input_value
    global selected_classes
    print(f"Search input: {search_input_value}")
    print(f"Selected classes: {selected_classes}")
    if not selected_classes:
        print("Running general search query")
    else:
        print("Running filtered search query")

with ui.row().classes('w-full'):
    ui.label("Search").classes("text-bold text-xl mt-2")

with ui.row(wrap=False).classes('w-full'):
    search_input = ui.input(label="Search", on_change=search).classes('w-full')

with ui.row().classes('w-full'):
    for option in options:
        ui.checkbox(
            text=option,
            value=False,
            on_change=search)
ui.run()

This is not working as expected
For this I have handle the checkbox option selection[ def handle_checkbox_change(event, option) ]

import asyncio
from nicegui import ui

search_input_value = ""
selected_classes = []
options = ['ClassA', 'ClassB', 'ClassC']


async def search():
    global search_input_value
    global selected_classes
    print(f"Search input: {search_input_value}")
    print(f"Selected classes: {selected_classes}")
    if not selected_classes:
        print("Running general search query")
    else:
        print("Running filtered search query")


def handle_checkbox_change(event, option):
    global selected_classes
    if event.value:
        selected_classes.append(option)
    else:
        selected_classes.remove(option)
    asyncio.create_task(search())


with ui.row().classes('w-full'):
    ui.label("Search").classes("text-bold text-xl mt-2")

with ui.row(wrap=False).classes('w-full'):
    search_input = ui.input(label="Search", on_change=search).classes('w-full')

with ui.row().classes('w-full'):
    for option in options:
        ui.checkbox(
            text=option,
            value=False,
            on_change=lambda event, opt=option: handle_checkbox_change(event, opt))
ui.run()

Now it is working fine with this change
Thank you!