Edit Data of DataTable con AlertDiaog

[avilca]

Question

I'm doing a CRUD. I can add and delete without any hassle, but when I enter 2 or more records in the data table and I want to edit the records in the data table. I'm using AlertDialog to edit. When I click on the edit button (IconButton) of the second or third record it only loads the data of the first record, the code I hope soon help or suggestions, thank you

Code sample

import flet as ft
from flet import *


def main(page):


    #Tamaño de ventana 
    page.window_resizable = False

    
    

    #CONTROLES (Controls)

    codpro = TextField(label="CÓDIGO PRODUCTO", width = 200)
    nompro = TextField(label="NOMBRE PRODUCTO", width = 600)

    #combo de categoria (Category)
    ddcate = Dropdown(label="CATEGORIA",
        width=150,
        options=[
            dropdown.Option("dulce"),
            dropdown.Option("salado"),
        ],
    )

    #combo de peso (weight)
    ddpeso = Dropdown(label="PESO",
        width=100,
        options=[
            dropdown.Option("KG"),
            ft.dropdown.Option("G"),
        ],
    )

    #CONTROLES PARA EDITAR DATOS (Controls for Edit)
    edit_nomprotxt = TextField(label="NOMBRE PRODUCTO")

    edit_ddcate = Dropdown(label="CATEGORIA",
        width=150,
        options=[
            dropdown.Option("dulce"),
            dropdown.Option("salado"),
        ],
    )

    edit_ddpeso = Dropdown(label="PESO",
        width=100,
        options=[
            dropdown.Option("KG"),
            dropdown.Option("G"),
        ],
    )


    #DATATABLE
    tablaproducto = DataTable(
                  #CABECERA DE LAS CALUMNAS  
                  columns=[
                      DataColumn(Text("CÓDIGO")),
                      DataColumn(Text("PRODUCTO")),
                      DataColumn(Text("CATEGORÍA")),
                      DataColumn(Text("PESO")),
                      DataColumn(Text("ACCIONES")),
                  ],
                  #FILAS  
                  rows=[]          
    )

 
    #FUNCION ELIMINAR (Function Delete)
    def eliminar(e):
        tablaproducto.rows.remove(tablaproducto.rows[0])

        #MENSAJE con Barra inferior
        page.snack_bar = SnackBar(
            Text("SE ELIMINO DATO", size = 30),
            bgcolor = "red",
            duration= 400,            
        )
        page.snack_bar.open = True
        #FIN DEL MENSAJE inferior
 
        page.update()

    def guardar():
        pass


    # Crear Dialog
    dialog = AlertDialog(
        title=Text("Editar datos"),
        content=Column([
            edit_nomprotxt,
            edit_ddcate,
            edit_ddpeso,              
         ]),
        actions=[
            TextButton("Guardar",
                       on_click=guardar
                      )
        ]
    )

    #Funcion EDITAR (Function Edit)
    def editar(e):
  

        edit_nomprotxt.value = tablaproducto.rows[0].cells[1].content.value
        edit_ddcate.value = tablaproducto.rows[0].cells[2].content.value
        edit_ddpeso.value = tablaproducto.rows[0].cells[3].content.value


        page.dialog = dialog
        dialog.open = True
        page.update()


    #FUNCION para AGREGAR (Function Add)    
    def agregar(e):
        
        tablaproducto.rows.append(
            DataRow(
                cells=[
                    DataCell(Text(codpro.value)),
                    DataCell(Text(nompro.value)),
                    DataCell(Text(ddcate.value)),
                    DataCell(Text(ddpeso.value)),
                    DataCell(
                        Row([
                        IconButton("delete", 
                                   icon_color ="red",
                                   on_click = eliminar,
                                    ),
                        IconButton("create", 
                                   icon_color ="blue",
                                   on_click = editar
                                   ),    
                            ])
                        ),
                ]
            )
        )
        #MENSAJE con Barra inferior
        page.snack_bar = SnackBar(
            Text("DATO INGRESADO", size = 30),
            bgcolor = "green",
            duration= 400,
        )
        page.snack_bar.open = True
        #FIN DEL MENSAJE

        #Limpiar los controles
        codpro.value = ""
        nompro.value = ""
        ddcate.value = ""
        ddpeso.value = ""

        page.update()

       
    #Boton AGREGAR
    BtnAgregar = ElevatedButton(
        text="Agregar", 
        bgcolor="blue",
        color="white",
        on_click=agregar
        )
    

    page.add(
		Column([
			Text("PRODUCTOS",size=30,weight="bold"),
			codpro, nompro,ddcate, ddpeso,
			Row([BtnAgregar]),
			tablaproducto
 
			])
 
		)


ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ingdesarr1]

En la función de "Editar" siempre esta direccionado a la Row[0], por tanto, siempre va a cargar los valores de las celdas de esa fila. Lo que deberia hacer es que cuando se presione el boton de "editar", enviar el valor de la fila en la cual se esta posicionando. y ya extraer la información requerida.

[avilca]

Tendrás un ejemplo de como puedo enviar el valor de la fila en la cual se esta posicionando o seleccionando y ya extraer la información requerida ??

Will you have an example of how I can send the value of the row in which it is being positioned or selected and already extract the required information??

[ingdesarr1]

Yo lo haria de la siguiente manera, me ha funcionado.

def editar(e):

    e.control.data = "ON"
    filas = tablaproducto.rows[:]
    
    for valor in filas:
        if valor.cells[-1].content.controls[1].data == 'ON':
            fila = filas.index(valor)

    
    e.control.data = "OFF"

    edit_nomprotxt.value = tablaproducto.rows[fila].cells[1].content.value
    edit_ddcate.value = tablaproducto.rows[fila].cells[2].content.value
    edit_ddpeso.value = tablaproducto.rows[fila].cells[3].content.value


    page.dialog = dialog
    dialog.open = True
    page.update()

Es ese caso, modifique la función del botón de editar. Cuando se presione el botón, va a cambiar el atributo 'data' del botón, y luego, verifico dentro de las filas que botón es el que tiene el atributo editado, en este caso en 'ON'. Una vez que lo encuentra, busca en las filas el index, es decir, que fila es la que tiene esa propiedad. Luego, cambio data a 'OFF', para tener control de cual elemento se activa, y le paso el index encontrado al formulario. En ese caso, logra extraer los datos de la fila requerida.

[avilca]

Muchas gracias por tu ayuda @ingdesarr1

[avilca]

Una dos ultimas preguntas:

tablaproductos.rows[:] ese dos punto dentro de los corchetes a que se refiere cuando pones ??
y
valor.cells[-1] ese menos uno dentro de los corchetes [-1] a que se refiere ??

[ingdesarr1]

tablaproductos.rows[:] lo que hace es referirse al elemento tablaproductos, y buscar todas las filas que posea. Recuerda que al momento de definir las filas, estas se pasan como una lista, por tanto, estoy pidiendo todos los elementos dentro de esa lista.

valor.cells[-1] lo que hago es, una vez ubicado en una fila, pregunto por la celda en la posición -1, es decir, la ultima posición. Al igual que con las filas, las celdas son una lista, y cada una corresponde segun la columna en la cual estoy ubicado. Por tanto, como el botón esta en la ultima columna, consulto la ultima celda. Esto tambien se podria hacer colocando la ultima posición de manera normal, pero, sabiendo que el botón siempre estará en la ultima posición, y si a futuro agrega mas columnas, queda más fácil asi, para mi.

[avilca]

Gracias por la explicación