Buenas Señores, buenas PEQUEÑA COMUNIDAD, hoy les traigo un manual de cómo usar el control SUPERGRID del TOOLBOX DOTNETBAR, que es muy utilizado por varios desarrolladores, a pesar de eso hay muy poca documentación en español, y peor aún la documentación oficial ya no está disponible. Aún no sabe nada de los motivos que llevaron al desarrollador/equipo, como para que dejen de actualizar el proyecto.

PRIMEROS PASOS

No entrare en detalles de cómo descargar los recursos, pero demás esta decir que hay páginas que aún lo tienen en su última version 14.1.0.21.

Tambien indicar, que hice pruebas en VISUAL STUDIO 2019(COMMUNITY), ahi funcionaba todo correcto, en cambio en VISUAL STUDIO 2022 no lo hacía, como por ejemplo no aparecían los controles en el cuadro de herramientas, no se veían los controles en el diseñador, entre otros problemas, si tienen algunos mas no duden en comentar y hacerles saber a los demás, y más aún que tienen las soluciones. Ya saben COMPARTAN.

Una vez que este instalado VISUAL STUDIO, instalan DotNetBar, y esperando que todo salga bien y no tengan ningún problema, tendrán en su menu inicio una carpeta con los accesos directos a los ejemplos en código y el ejecutable con todo lo que puede hacer esta herramienta.

DotNetBar después de instalarse
DotNetBar una vez instalado.

CODIFICANDO EL SUPERGRID

Asumiendo que ya tienen el proyecto creado, con su formulario y el control agregado (SUPERGRID CONTROL), y obviamente con las columnas que requiera agregadas al control, indicar también que la forma de agregar las columnas en este control no es el mismo que se utiliza para el control DATAGRIDVIEW.

Utilizaremos el ejemplo de detalle de pagos de venta, es decir, cuando se realizan ventas al crédito y el cliente viene a pagar, pero en partes y se desea saber el detalle de los pagos de cada venta, visualizaremos los pagos que se realizan de estas ventas al crédito.

Iniciaremos agregando el siguiente código, que a veces se agrega automáticamente cuando añadimos el control SUPERGRID, pero si no lo hiciera, lo agregamos desde la zona de declaraciones, aso:

Imports DevComponents.DotNetBar.SuperGrid
Imports DevComponents.DotNetBar.SuperGrid.Style

ahora si el diseñador tampoco nos agrega nuestro constructor, lo tendremos que agregar nosotros, y debe quedar de esta forma:

Public Sub New()
        ' Esta llamada es exigida por el diseñador.
        InitializeComponent()

        ' Agregue cualquier inicialización después de la llamada a InitializeComponent().
        InitializeGrid()
        AddHandler dgList.DataBindingComplete, AddressOf SgContractsDataBindingComplete
    End Sub

Explicando lo que hay en el código del constructor, primero que nada, se inician los componentes para que el formulario tenga un aspecto al estilo OFFICE2007, propio de DOTNETBAR, posteriormente llamamos a un procedimiento que configura el SUPERGRID mediante código, finalmente de agrega un procedimiento al manejador del evento DataBindingComplete del SUPERGRID, el cual se ejecutara cuando se haya completado la carga de datos.

Aquí el código de la configuración, que podrían usar, y agregar otros parámetros.

Private Sub InitializeGrid()
        Dim panel As GridPanel = dgList.PrimaryGrid
        panel.CheckBoxes = True ' QUE SE VEAN LOS CHECKBOX
        panel.ShowTreeButtons = True ' QUE SE PUEDAN VER LOS BOTONES DE + O - PARA DESPLEGAR
        panel.ShowTreeLines = True ' QUE SE VEA LAS LINEAS DE LAS AGRUPACIONES
        panel.ShowRowGridIndex = True ' MUESTRA UNA COLUMNA CON LA NUMERACION DE REGISTROS
        panel.SelectionGranularity = SelectionGranularity.RowWithCellHighlight 'ESPECIFICA QUE AL COLOCAR CURSOR EN UNA CELDA SE ACTIVE LA SELECCION TOTAL DE LA FILA
    End Sub

Una vez configurado el SUPERGRID, debes asignarle datos, eso lo hacemos mediante un procedimiento que reciba datos de filtros los envíe a una base de datos y regrese un SELECT lleno de filas y columnas, este procedimiento no se codificara porque no es el propósito del post, pero si el sub final que hara ese trabajo solo para fines de que el post este estructurado.

Sub verListaVtas()
        Try
            dgList.PrimaryGrid.DataSource = VENTAS.LISTAR_VTASXCLIENTE
        Catch ex As Exception
            MsgBox("ERROR AL LISTAR DATOS, INTENTELO NUEVAMENTE, 
SI EL ERROR PERSISTE LE RECOMENDAMOS CAPTURAR PANTALLA DEL ERROR 
Y COMUNICARSE CON EL ADMINISTRADOR O DESARROLLADOR. A CONTINUACIÓN, 
DETALLE DEL ERROR:" & vbNewLine & ex.Message, vbCritical)
        End Try
    End Sub

Ahora codificaremos el procedimiento que se ejecuta cuando se termine de cargar los datos en el PRIMARYGRID. Lo que aquí se hara es modificar las columnas por código, especificando el tipo de columna, alineación, ancho y el texto que aparecerá en el encabezado de la columna, pero esto se hara condicionando que es lo primero que se muestra, en este caso, sera el primer grid, el padre, lo haremos de esta forma.

Private Sub SgContractsDataBindingComplete(ByVal sender As Object, ByVal e As GridDataBindingCompleteEventArgs)
        If e.GridPanel.Name.Equals("PAGOS") Then

            ' Cambiar algunos valores de visualización de diseño para la el GRID PAGOS
            e.GridPanel.Columns("ID_PAGO").CellStyles.[Default].Alignment = Alignment.MiddleCenter
            e.GridPanel.Columns("ID_PAGO").Width = 50
            e.GridPanel.Columns("ID_PAGO").HeaderText = "ID"

            e.GridPanel.Columns("FECHA_PAGO").CellStyles.[Default].Alignment = Alignment.MiddleCenter
            e.GridPanel.Columns("FECHA_PAGO").HeaderText = "FECHA/HORA PAGO"
            e.GridPanel.Columns("FECHA_PAGO").Width = 140
            e.GridPanel.Columns("FECHA_PAGO").EditorType = GetType(GridDateTimeInputEditControl)
            Dim FECH_PAGO As GridDateTimeInputEditControl = DirectCast(e.GridPanel.Columns("FECHA_PAGO").RenderControl, GridDateTimeInputEditControl)
            FECH_PAGO.Format = DevComponents.Editors.eDateTimePickerFormat.Custom
            FECH_PAGO.CustomFormat = "MM/dd/yyyy hh:mm:ss tt"
            FECH_PAGO.IsInputReadOnly = True

            e.GridPanel.Columns("MONTO_PAGO").EditorType = GetType(GridDoubleInputEditControl)
            Dim gnu As GridDoubleInputEditControl = DirectCast(e.GridPanel.Columns("MONTO_PAGO").RenderControl, GridDoubleInputEditControl)
            gnu.DisplayFormat = "C"
            e.GridPanel.Columns("MONTO_PAGO").CellStyles.[Default].Alignment = Alignment.MiddleCenter
            e.GridPanel.Columns("MONTO_PAGO").HeaderText = "MONTO"

       Else
            ' Cambiar algunos valores de visualización de diseño para la el GRID VENTAS(PADRE)
            e.GridPanel.DefaultVisualStyles.CellStyles.[Default].Alignment = Alignment.MiddleCenter
            e.GridPanel.Columns("TOTAL").EditorType = GetType(GridDoubleInputEditControl)
            Dim TOTAL_ As GridDoubleInputEditControl = DirectCast(e.GridPanel.Columns("TOTAL").RenderControl, GridDoubleInputEditControl)
            TOTAL_.DisplayFormat = "C"
        End If
    End Sub

Entrando un poco en detalles en el código anterior, se da un estilo visual de cada columna, por ejemplo, la columna FECHA/HORA, dandle un formato, ahora teniendo en cuenta esto, debo decir que este grid, se maneja un poco diferente al grid por defecto,

Pasando al último punto de configuración del grid, codificaremos el evento AfterCheck el cual se ejecuta, como podremos imaginar leyendo el nombre, después que se haga click sobre la casilla del CHECKBOX que aparecerá en cada fila, lo que CARGARA y se desplegara el detalle, siguiendo el ejemplo de detalle de pagos de la venta.

Para nuestro código empezaremos creando una variable del tipo GRIDROW, y le asignaremos como valor el gridrow en el cual se hizo click.

 Dim crow As GridRow = TryCast(e.Item, GridRow)

Luego comprobaremos que el CHECKBOX este marcado, si es así, cargaremos los datos al GRID SECUNDARIO.

 If crow IsNot Nothing AndAlso crow.Checked = True Then
            crow.Rows.Clear()
            Dim panel As New GridPanel With {
                .Name = "PAGOS",
                .SelectionGranularity = SelectionGranularity.RowWithCellHighlight,
                .[ReadOnly] = True,
                .CheckBoxes = False,
                .ShowCheckBox = False
            }
            panel.DataSource = VENTAS.LISTA_PAGOS(IDVTA)
            crow.Rows.Add(panel)
            panel.EnsureVisible(False)
End If

Entrado en detalles primero limpiamos los datos que pudieren existir antes en el GRIDROW, y creamos un GRID que hara de GRID SECUNDARIO, luego asignamos un estilo a las columnas que se puedan encontrar, les dejo un ejemplo, traemos los datos de la base de datos, y finalmente asignamos este GRID SECUNDARIO a la fila creada, y seteamos que sea visible.

Espero que les haya sido util este pequeño manual, y disculpen si mi redaccion es mala o tengo algun error en la explicacion. La intencion es que aprendan como yo lo hice ya que no hay documentacion en español necesaria, si hay errores podemos corregir todos colaborando o mejorando este ejemplo, los comentarios estan abiertos.

Shares