how to insert TODO elements to column and row

[bobwatcherx]

i want to make crud todo with this framework . how to insert element to column and can . using for inside with ui.column()

example code:

from nicegui import ui

listdata = ui.column()
mylbl = ui.label()
name = ui.input(label="text", on_change=lambda e:mylbl.set_text(e.value))

def addnew():
	listdata.append(name.value)
	ui.notify("hai")

with ui.column():
	name
	ui.button("add new data",on_click=addnew)
	listdata

ui.run()

[bobwatcherx]

now i can . but for how to add delete button beside todo . is there a way?

my code

from nicegui import ui

# alldata = ['dqw','ddwqdwq']
alldata = ui.column()
name = ui.input(label="insert name")

def addnow():
    alldata.default_slot.children.append(ui.label(name.value))
    print(alldata)
    ui.update()

def inc():
    counter.text +=1
    print(counter.text)

with ui.column():
    name
    ui.button("tatatat", on_click=addnow),
    alldata

ui.run()

[falkoschindler]

Some general remarks:

• Defining alldata at the top and referring to it in the ui.column won't nest it in the column. NiceGUI elements are automatically added to the container they are created within. So alldata will always live right on the page.
• Manually appending elements to the children list is not the intended way to insert elements. Instead you can do something like

  with alldata:
      ui.label(name.value)

Here is a small example on how to add and remove elements from a container:

def add():
    with tasks:
        with ui.row().classes('items-center') as row:
            ui.label(input.value)
            ui.button(on_click=lambda: tasks.remove(row)).props('flat round size=sm icon=clear color=red')
    input.value = None

tasks = ui.column()
input = ui.input('New task').on('keypress.enter', add)

[bobwatcherx]

and how to update the data
i have the code but its not working

from nicegui import ui

# alldata = ['dqw','ddwqdwq']
alldata = ui.column()
name = ui.input(label="insert name")
tasks = ui.column()
def lihat(row):
    print(row.id)
    tasks[row.id].update(ui.label("udate now"))

def addnow():
    with tasks:
        with ui.row() as row:
            ui.label(name.value)
            ui.button("update",on_click=lambda :lihat(row))  


with ui.column():
    name
    ui.button("add", on_click=addnow),
    alldata

ui.run()

[falkoschindler]

What we usually do in this scenario:

1. Keep the raw data separate, e.g. in a list of strings.
2. Whenever you add, remove or update an item in this list: Clear the UI container (the ui.column in your case) and re-create all UI elements once again.

Especially point 2 might sound inefficient, but as long as your todo list doesn't contain thousands of items 🤞🏻, this is just fine. And it simplifies the implementation a lot!

[bobwatcherx]

and when I want to access any of the indexes inside row . why can not . and how?

code

def lihat(row):
      print(row[0])

def addnow():
    with tasks:
        with ui.row() as row:
            ui.label(name.value)
            ui.button("update",on_click=lambda :lihat(row)) 

TypeError: 'Row' object is not subscriptable

[falkoschindler]

See #479 (reply in thread)

[rodja]

As @falkoschindler wrote in #489 it is currently not possible to access the elements individually in a row. Best practice is to store the elements in a separate list to access them later.

[falkoschindler]

#489 was about inserting elements at a specific index. You could read them via row.default_slot.children[index], but in general I'd also suggest to separate view (the NiceGUI elements) and model (the list data).