Скачать или смотреть Xojo DataGrid - Column settings

Product link:
https://basicapp.net/xojo-data-grid/

Company link:
https://basicapp.net

Welcome to this guide of Xojo DataGrid by BasicApp.
We will focus on the column settings, particularly on: column types, editable column, text alignment, icons, icon alignment, data format, lists, check boxes, and progressbar.
Let's reopen the project created in the previous guide. And start the project and load the data to check how the grid displays the data.
Let's copy from the example project downloaded from the site the "icon key" and "icon email" images that we will need later in this guide.
The column settings must always be done after running the "SelectSQL" method. Because this method loads the data and therefore also identifies the columns. Before the "SelectSQL" method the number of columns is zero, and therefore you would receive an error.
Let's enable the "Refresh" method.
This method is used to redraw the grid. Even though it is automatically redrawn after the "SelectSQL" method, you need to call this method after setting the column properties to display the grid correctly.
Now let's see the column settings.
The "EditingEnable" property indicates whether the entire grid is editable or not. Setting it to "true" will make all columns in the grid editable.
The "CheckBoxSize" property indicates the size of the checkboxes.
The first column is the key of our table, and it is of type "number". The alignment is right in the middle. It can have a maximum of 18 numbers. This column is not editable. It has an icon called "icon key" which is a Xojo "Picture" object. And the alignment of the icon is right in the middle.
The second column is a checkbox. The possible values ​​are "true/false" because in our table that column is of type boolean. The alignment of the checkbox is center in the middle.
The third table is of type "color". And it can have a maximum of 10 characters.
The fourth column is of type "link" with a maximum of 255 characters. It has an icon called "icon email". And the alignment of the icon is left in the middle.
Let's try to start the project and check how the grid is displayed now.
As you can see the first four columns have taken the style we have set.
The first is numeric and is aligned to the right with an icon always aligned to the right. If we try to double click it will not be possible to change the value because we have set this column as NOT EDITABLE.
The second no longer displays the text "true" or "false" but is a checkbox. With a simple click we can change the value.
The third displays the color and no longer the value.
The fourth is a link and has an icon aligned to the left. With a double click we can edit the cell.
Let's continue with the changes.
The fifth column is of type progressbar. We set the minimum and maximum value, randomly placed to make it clear that you can set any "double" value.
The sixth and seventh columns will contain the "surname" and "name" and are therefore of type "text". For this reason there is no need to specify it because the "text" type is the default. We only set the maximum length of the text.
The eighth column is of type "date". We set the format to display. And also the alignment to the center and in the middle.
The ninth column is of type "list". We add the possible values ​​to the list.
The tenth column is of type "link". We only set the maximum length.
Now let's start the project and check how the grid is displayed now.
We had already seen the first four columns.
The fifth column displays a "progressbar", and with a double click we can change the value.
The sixth and seventh columns are simple text fields, and with a double click we can edit the value.
The eighth column is of the "date" type and is displayed in the format we choose. With a double click we can edit the value.
The ninth column is a list. The chosen value relative to the values ​​in the list is displayed. So instead of 0, 1 and 2, is displayed empty", "man" and "woman". With a double click the list will appear where we can choose the new value.
The tenth column is of the "link" type. With a double click we can edit the value.
Well, that's all for this guide. We recommend that you watch all the video guides on the site to have an in-depth knowledge of all the features of the component.
Goodbye and thank you!