Sep 282021
 

Un nuevo UserControl u ocx (para quienes quieran compilarlo), tal como su nombre lo indica es una Grilla. Si bien ya hay algunas dando vuelta y muy buenas por cierto, en este caso intenté buscarle un lado más moderno, nunca había utilzado este control así que me fui basando en las diferentes opciones que hay por la web, tanto las de vb6 (LynxGrid, IGrid, VBFlexGrid) como las de uso web por ejemplo ComponentOne y DevExpress. Este control me llevó mucho tiempo ya que son muchas líneas de código, como siempre no he realizado ningún archivo de ayuda, pero dentro de los ejemplos encontrarán algunos ejemplos muy funcionales en tiempo real. Al ser un control con muchas opciones seguramente se me habrán escapado muchas cosas, las cuales podré ir agregando o corrigiendo si me lo hacen saber, algo que no pude hacer en esta grilla fue implementar la funcionalidad MergedCell (celdas combinadas), pero el resto creo está casi todo.

Un problema que encontré tarde fue que por cuestiones estéticas utilicé otro use sercontrol «ucScrollBar» tal como ya lo había hecho en el ucList, pero no había notado que si se cambia el nombre del proyecto el ucScrollBar pierde la referencia y se convierte en un PictureBox, para que esto no pase es necesario abrir el ucGridPlus con el notepad y cambiar «Proyecto1» por el nombre del proyecto en que lo vayan a emplear, de momento no encontré una mejor solución.

El control puede cargar imágenes de muchas formas y formatos tanto ColImgListAddImage y HeaderImgListAddImage pueden cargar la imagen desde array de bits, archivo, url, url base64, hbitmap, hIcon y stream; las imágenes pueden tratarse como vectores donde podemos asignarle el color según el forecolor de la celda o podemos poner imágenes comunes, también cuenta con dar una propiedad «radio» para dar forma circular o con puntas redondeadas.

En el primer ejemplo encontrarán algunos gráficos, Progresos y ranking que se muestran en cada fila, en esos ejemplos utilicé un módulo externo para usar un CustomDraw, esto con el conocimiento adecuando se pueden hacer infinitas cosas. No es parte de la grilla en si, de este modo es más fácil para hacer cosas a necesidad de cada uno.

En el caso de los controles, es lo mismo, no son parte de la grilla, el ucGridPlus es un contendor, donde podemos poner Combobox, Datepiker entre otros y con algunas propiedades de este podemos ubicar dichos controles sobre la celda simulando que forman parte de ella.

La grilla cuenta con la posibilidad de agregar eventos a las imágenes y texto de la celda, de esta forma se pueden lograr algunos lindos efectos como verán en los ejemplos.

Es necesario tener instalada la fuente «Segoe MDL2 Assets» en windows 10 ya está por defecto, esta se utilizo para algunos iconos.

Para la vercion compilada (OCX) utilice el control de usuario UniTextBox para que acepte caracteres unicodes en modo de edición.

Para cerrar quiero aclarar que esto por momento es algo así como una beta y hasta que no se use y se encuentren errores no los podré detectar, sé que muchas cosas me quedaron en el tintero pero por ahora se me agotó la energía.

Aquí puedes ver la Documentación del control

ucGridPlus0.png ucGridPlus2.png ucGridPlus3.png ucGridPlus5.png ucGridPlus6.png ucGridPlus9.png ucGridPlus11.png ucGridPlus12.png

A continuación una tabla de sus propiedades.

AllowColumnDragColImagesEventsGetHotCellRowAlign
AllowColumnSortColImgAlignGetSelectionRangeRowBackColor
AllowEditColImgListAddImageGetTopRowRowChecked
AutoHeightAllRowsColImgListClearGetVisibleRowsRowDelete
AutoHeightRowColImgListHeightGetWindowsDPIRowFont
AutoWidthAllColumnsColImgListRemoveImageGradientStyleRowForeColor
AutoWidthColumnColImgListWidthGroupByColumnRowHeight
BackColorColImgMonocromeGroupColapseRowHidden
BackColorAltColInitImgListGroupExpandRowIdent
BorderColorColLabelsEventsHeaderBackColorRowIsFullRow
BorderRadiusColLeftHeaderFontRowIsGroup
BorderVisibleColMinWidthHeaderHeightRowMoveTo
CellAlignColMoveToHeaderImageAlignRowRef
CellBackColorColRefHeaderImgListAddImageRowsBackColor
CellEditionLockedColsCountHeaderImgListClearRowsBackColorAlt
CellFontColSortHeaderImgListCountRowsCount
CellForeColorColSortOrderHeaderImgListHeightRowSelectorBkColor
CellImageIndexColTagHeaderImgListRemoveImageRowSelectorWidth
CellStartEditColTextHiddeHeaderImgListWidthRowTag
CellTagColumnsAutoFitHeaderInitImgListRowWordBreak
CellValueColumnTextHeaderLinesHorizontalWidthScrollBarStyle
CellWordBreakColUserResizeLockedHeaderLinesVerticalWidthSelectionColor
CheckStyleColWidthHeaderTextAlignSelectionMode
ChrW2ColWordBreakHeaderTextWordBreakSetCurCell
ClearCurColInsertRowSetMargin
ColFontCurRowLastRowIsFooterSetSelectionRange
ColForeColorEnsureCellVisibleLinesHorizontalColorShowHotRow
ColFormatFillFromRSLinesHorizontalWidthShowHotRow
ColHeaderForeColorFixedColumnsLinesVerticalColorSort
ColHeaderImgIndexFixedRowsLinesVerticalWidthSwapCol
ColHiddenFontParentBackColorSwapRow
ColImageListCountGetCellRectRedrawUnGroup

VER DOCUMENTACION ONLINE

Gracias Yvan por el aporte

Descargar UserControl y Ejemplos (Actualizado 08/11/2022)

Descargar OCX (Actualizado 21/01/2022)


Historial de cambios

29/09/21 V:1.0.1
Solucionado ordenamiento de columna, solo se realizara con el botón izquierdo, no se ordenará cuando la columna es arrastrada.
Solucionado cuando se cambiaba el tamaña de una fila, el scrollbar no mostraba las ultimas filas.
Solucionado error al ordenar columna con la grilla no sin filas.

01/10/21 V:1.0.2 ‘Gracias Elihu!!
Solucionado Error visual si el valor del scroll era mayor al Máximo, también se agrego una llamada directa dentro del Scroll que causaba un un retardo a causa del timerVB
La selección ahora se puede realizar con el botón derecho, si se hace click derecho dentro del rango selecionado la selección no se pierde, especial para un PopUpMenu.
Se agrego parámetros ‘Button’, ‘Shift’ en los eventos CellClick, LabelMouseDown, LabelMouseUp, ImgMouseDown, ImgMouseUp
se agrego la propiedad BorderWidth y se quito la propiedad BorderVisible, también se corrigió un error en el color del borde.
Se añadió la propiedad ShowHotColumn (para resaltar las columna debajo del cursor)
En la versión OCX en el uniTextBox se corrigió detección de las flechas del teclado (NO IPAO)

11/10/2021 V:1.0.3
Se añadieron varios cambios y arreglos, no recuerdos todos
Se añadieron todas las propiedades y eventos referido a Drag & Drop
Se mejoro la lectura de imágenes para iconos y bitmaps de 32bits con canal alpha
Se mejoro la función AutoWidthColumn
Se añadieron las propiedades ColSort y ColSortOrder, para quienes tengan que ordenar las columnas por consultas SQL

15/11/2021 V:1.0.4
Cambios añadido por jpbro, comportamiento en el cuadro de texto al mover las flechas del teclado, y agregado evento BeforeEdit (Gracias)

30/12/2021 V:1.0.5
Se añadió la propiedad CtrlEdit esta retorna el control TextBox de la grilla, con esto ya se puede manipular el TextBox a gusto e interceptar todos los eventos
También se añado el evento KeyUp que se me había pasado por alto, y dos eventos mas EditKeyPress y EditKeyDown son los eventos disparados por el textbox de la grilla, de todas formas podemos declarar en el formulario Private WithEvents TxtGrid As TextBox y luego asignarle en el Form_Load() Set TxtGrid = ucGridPlus1.CtrlEdit así recibiremos todos los eventos del textbox.

29/01/2022 V:1.0.6
Añadidas las propiedades ShowHotRow, HeaderTextWordBreak, GradientStyle, GetTopRow y GetVisibleRows

  51 Responses to “GridPlus”

  1. Hola Leandro: Te animaste por el Grid. Excelente control, Muchas Gracias

  2. Muchas gracias por el aporte

  3. Hola Lea, creo que el vbFlexgrid tiene esa funcuionalidad de MergedCell, seria cuestion de revisarlo y adaptarlo al ucGridPlus.

  4. Thank you for this, and indeed for your whole blog. It’s truly an education.

  5. Muy bien, por favor agregue la función de arrastre, gracias

    Please Add Drag Row ?ThankS

  6. Sorry, I don’t understand, I think it’s wrongly translated

  7. wooooow Leandro you are creating miracles in vb6!!!!!
    In this control we can also use URL-s. Do you maybe know, if we have a folder on a webserver where we can store the images, how we can manipulate with this folder within vb6, like we do on local network with Common Dialog control?
    To save a file from our local folder to this webserver folder, something like Common Dialog control, but that works with folder on a webserver.

    Once again, great work and with every post you leave me speechless!

    Davor

  8. Hola, gracias, usted puede hacer un listado de los archivos en el servidor mediante php, luego las imagenes las puede levantar directamente con el control, generalmente suele utilizarse json para traer informacion de texto y url de imagenes, yo mediante un script de php estoy consultado las bases de datos con sql y el servidor me retorna un json con la consulta de la base de datos, ya con eso usted puede hacer muchas cosas.

    Hello, thank you, you can make a list of the files on the server using php, then the images can be raised directly with the control, usually json is used to bring text information and url of images, I am using a php script I consulted the databases with sql and the server returns a json with the database query, with that you can do many things.

  9. Hola Leandro. Llevo años trabajando con el Grid de ComponentOne y el Report de Codejock, pero tras probar el tuyo me ha sorprendido la gran facilidad de uso de tu control. Te felicito por el extraordinario trabajo que has hecho con este y con el resto de controles como Uclist y ucLabel.

    Sería de una gran ayuda que se pudiese llegar a incluir la opción de MergeCells en el Grid, así como el Drag & Drop de celdas con Merge. De esta manera se podría llegar a implementar una vista KanBan.

    Estaré muy atento a las mejoras que vayas publicando en tu web, por si en algún momento incorporas dichas mejoras.

    Muchas gracias por tu gran aportación a la comunidad.

    Luis

    • Hola Luis dudo que lo valla a implementar requeriría muchos cambios porque tendría que tener en cuenta muchas cosas (selecion, si las filas o columnas están fijas, si se elimina una celda etc etc) y ya por momento estoy en otra cosa, solo corregiré si aparece algún error para corregir. Es código abierto así que si alguien se anima puede tratar de implentarlo.

  10. hi,can i ask how can set this grid to RTL ( righttoleft) i cant find any properties for that,i find some properties like as righttoleft text for header or cell or col or row but its not worked good for righttoleft forms for example right to left positions of scroll bars or started columns from right to left and like these…

    this my question is about uclistplus and some of ur controls too,

    • sorry, I have not programmed it in any of the two controls (ucListPlus and ucGridPlus) neither has the RTL property, this is because our continent (America) is not used and I did not think that someone from another continent would use it this way, sorry for not taking that detail into account.

      • it ok but how can fix this problem or help me to i add RTL properties to this control.i cant use most ur user controls because of this big problem its not about my language or my countrie is useful for others too.

        It is strange that you observe property righttoleft for align cells or cols or rows but consider this important property

  11. i hv big prblme too i want send some question in contact form too but it shown error to me like this » Error sending message. Please try again later or contact the administrator by other means.»

    how can contact u.maybe i can ask by email.

  12. as i said before i am waiting to you can add this important properties RTL and LTR (right to left and left to right» data grid.thanks.

  13. There is a bug when using filtering, if the fixedrow row has a greater height than the rest of the rows, when clicking on a cell, the one in the next row is highlighted

  14. Hola Leandro, Genial aporte.
    Una Duda ¿La opción KeyUp del UcGrid está deshabilitda?

    • Adicionando tambien, habrá alguna forma de poder validar que una columna sea solo números o limitar el número de caracteres?
      Intente poner la columna GP_NUMERIC pero aún asi me permite ingresar texto, pero bueno supongo que podré en el KeyPress Validarlo, lo que nose como hacer es poner un Maxlength en la columna.

      • Hola Cristopher, gracias por tus observaciones, en efecto, habia olvidado el evento KeyUp, ya esta solucionado, en cuanto a lo de validar, ahora he añadido una propiedad que retorna el objeto textbox de la grilla «CtrlEdit» de esta forma podrias manipular algunas cosas y recibir eventos
        WithEvents TxtGrid As TextBox
        y luego asignarle en el Form_Load()
        Set TxtGrid = ucGridPlus1.CtrlEdit

        también adicione dos eventos EditKeyPress y EditKeyDown por si se quiere no hacer lo anterior.

        de todas formas hay otra manera para validar que seria usando el evento

        Private Sub ucGridPlus1_AfterEdit(ByVal lRow As Long, ByVal lCol As Long, ByVal vOldValue As Variant)
        If Len(ucGridPlus1.CellValue(lRow, lCol)) > 5 Then ucGridPlus1.CellValue(lRow, lCol) = vOldValue
        End Sub

        o algo asi con numeros

        Private Sub ucGridPlus1_AfterEdit(ByVal lRow As Long, ByVal lCol As Long, ByVal vOldValue As Variant)
        If Not IsNumeric(ucGridPlus1.CellValue(lRow, lCol)) Then ucGridPlus1.CellValue(lRow, lCol) = vOldValue
        End Sub

        no he testeado todo esto muy a fondo pero tu me dirás si te sirvio.

        • Muchas gracias Leandro, estoy testeando todos eventos, por ahora no hay inconvenientes, cualquier bug lo estaré comentando.
          Gracias nuevamente, Genio!

  15. Hola Leandro.
    Excelente Grid. Solo tengo dos preguntas. ¿Es posible que los headers sean multi linea? es decir, que cuando el texto sea largo en el header vaya a la siguiente linea o algo así para encajar el texto en el cuadro. Algo asi como un wordwrap o la propiedad multiline de los textbox.

    La otra pregunta es si es posible poner un ToolTipText por celda o en todo caso solo a los headers.

    • Me acabo de dar cuenta de algo pero no es que afecte demasiado, establecí primero la propiedad RowsCount y luego ColsCount y ocurre un problema el cual causa que se repita la primera o la ultima fila del RecordSet. Si se establece al revez funciona como debe ser.

      • Hola el header no es multilínea, para la próxima actualizacion voy a tratar de implementarlo, si es posible ponerle un tooltip a las celdas pero no a los headers, también queda pendiente, en el caso de las celdas no es que se pueda agregar como una propiedad pero si podes interceptar cuando el mouse cambia de celda y asignar el tooltip del control ucGrid por ejemplo

        Private Sub ucGridPlus1_HotCellChange(lRow As Long, lCol As Long)
        If lRow > -1 And lCol > -1 Then
        ucGridPlus1.ToolTipText = lRow & » – » & lCol
        Else
        ucGridPlus1.ToolTipText = «»
        End If
        End Sub

        en cuanto al la ultima pregunta siempre es recomendable primer setear el ColsCount y después el RowsCount

        • Hola Leandro, tienes razón, pude colocar el tooltip como quería usando el evento HotCellChange, es una lástima que no haya podido colocarlo al header, pero no es un problema.
          Verás, El tooltip lo puse debido a que el texto en el header es muy grande, entonces el tooltip me sirve para mostrar ese texto que no se alcanza a ver.
          De todos modos si logras aplicar el multilinea al header sería lo máximo.

          Gracias!!

  16. Hola Leandro Buenas tardes, Estoy aprendiendo a agrupar en el UcgridPlus pero header del agrupamiento se alienea a la Derecha y no encuentro forma de alinearlo a la Izquierda, vi tus ejemplos pero de por si está alineado a la izquierda, de antemano muchas gracias.

  17. Hola Leandro.
    Buenos días.
    Encontré un pequeño Bug al hacer el GroupByColumn, los pasos para replicarlo es el siguiente:
    1. En el ejemplo del Agrupamiento de UcGrid, hay que poner en WindowsState=Normal en vez de maximized.
    2. Cerrar los desplegado de todas las personas hasta llegar al último que en mi caso es Mónica, cuando desaparece el vertical scrollbar, cierras y despliegas el subgrupo como Colaborador, en ese momento el scrollbar se vuelve loco, no va hacia arriba ni abajo, por más que despliego otros grupos o subgrupos ya no llega hasta la última info. espero haberlo explicado bien, en resumen, el scrollbar vertical se rompe, con las flechas del teclado lo intento y a veces funciona.

    Y bueno el segundo no es un Bug, pero al querer agrupar pensaría yo que sería más cómodo agrupar por código y no por el nombre, ejemplo Países:
    1. Colombia.
    2. Ecuador.
    3. Chile.
    En vez de mandar la columna del Nombre, mandar el código del país y mostrar el agrupamiento por el nombre del país.
    Un fuerte saludo y gracias por leer.

    • Hola, si habia notado ese problema, cuando todos los grupos están colapsados el scroll vertical se comporta incorrectamente, no encontré la solución :/, gracias por avisar

  18. Actualizado 29/01/2022 versión 1.0.6

    Added Propertys ShowHotRow, HeaderTextWordBreak, GradientStyle, GetTopRow and GetVisibleRows

  19. Bug in ucGridPlus, that causes a wrong VScroll «.max» -Value for the «ucScrollbarV» when you use groups:

    The bug is in the sub «UserControl_Resize» in this area:

    For i = m_RowsCount – 1 To 0 Step -1
    lHeight = lHeight + mRow(PtrRow(i)).Height
    If lHeight <= ListHeight Then
    'If mRow(i).TempHeight = 0 Then 0 Then <—————- this works
    RowsInRectArea = RowsInRectArea + 1
    End If
    Else
    SV = ucScrollbarV.Width
    Exit For
    End If
    Next

    BTW
    I love your controls!

  20. oje, in my last comment a character destroyed the message. Again:

    If mRow(i).TempHeight = 0 Then ——— this ist wrong, replace it with this line:

    If mRow(PtrRow(i)).Height > 0 Then ———— this works

  21. I found this bug too:

    In the function «Public Function Clear(Optional ClearAllCols As Boolean)» you have to add this line:

    mHideRowsCount = 0

  22. Hola Leandro, Buenas, Espero que estes muy bien.
    Tengo un pequeño Problema con los Checks en el Grid, al momento de clicar el check rapido y muy seguido, deja de Marcar.
    Depurando el Código usando el AfterEdit, me di cuenta que cuando va a la posición del check (ejemplo (0,0)) este arroja un valor de «-2», cosa que al querer validar el campo «1»True o «0»False, no se va por ninguna opción.
    Por el momento nose porque coloca -2 en el tipo de dato GP_BOOLEAN
    ¿Alguna sugerencia?

    • Bueno para ser más concreto, utilice una forma que está en los ejemplos del UcGridPlus que es poner un edit, para desplegar un formulario de edición en el mismo Grid, a diferencia del ejemplo yo en vez del formulario de edición puse un Grid, es decir un Grid dentro del Grid, el grid que esta por debajo es el que me da problemas al momento de seleccionar el check

  23. Buen trabajo, ¿funciona con la base de datos MYSQL?

  24. Impresionante tato lo que estas haciendo increible todos los controles que hiciste

  25. it’s amazing .. waauuw.. thx leonardo for bring vb6 to the top again . thx u very much.. btw do you have any sample for editing grid using form inside for new record operation…thx very much one again..GBU

    • Hello, I don’t quite understand what the question is, you say edit a row through a modal form with controls?

      • hi leandro.. thx for reply.. sorry for unclearly my question.. in folder sample no 5 Edicion with panel.. there is sample show form edit with user clik edit button .
        how about new button…? do you have sample how to do in ucgridplus..
        thx lendro for yout reply

  26. Hello, this can be done by enabling the event of another column, for example, if you want column 2 to be displayed as if it were a type of buttonLink, just do this ucGridPlus1.ColLabelsEvents(1) = True

    now inside the event:
    Private Sub ucGridPlus1_LabelMouseDown(ByVal lRow As Long, ByVal lCol As Long, Button As Integer, Shift As Integer)

    I should check if lCol = 0 is click on column 1 and if lCol = 1 is click on column 2

    I am currently working on how to add buttons but I did not take the time to publish it, I will do it later

  27. Cómo se puede uno mover a la ultima fila del grid ejemplo si tengo uno 100 filas quiero que siempre se seleccione la ultima fila y que la barra de desplazamiento se ubique al final es posible?

Leave a Reply to Cristopher Villarreal Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)