Data Grid Customization

UI Builder
1

I’m trying to make use of the Data Grid component from the Marketplace. Has anyone discovered a way to set the width of the columns as a % of the full width?

Also, has anyone discovered whether the Data Grid component can display check boxes in the left-hand column and then return a “list” of the checked rows?

Thanks.

2

Hello @Howard_Jacobson,

Unfortunately, you cannot set the column width as a percentage of the full width. However, we can offer you to set the maximum and minimum width for a column as follows:

[
  { "field": "name", "width": 150, "maxWidth": 300, "minWidth": 100},
  { "field": "age", "width": 200, "maxWidth": 400, "minWidth": 100},
  { "field": "city", "width": 300, "maxWidth": 500, "minWidth": 250}
]

Regarding your second question, we are looking into ways to implement this and will update you on this soon.

Regards
Nazar

3

@Howard_Jacobson,

Regarding your second question, you can add a checkbox to the desired column by adding the following in the column settings "checkboxSelection": "true":

[
  { "field": "name", "checkboxSelection": "true", "width": "400"}
]

However, now you won’t be able to return the selected rows, for this we need to modify the Data Grid component. Specify how you want to get the rows:
Do you want to select multiple rows and use a separate button to return the selected rows, or do you want the selected rows to be returned when the checkbox is clicked?

Regards
Nazar

4

Nazar.

Thanks so much for the great support. You folks are excellent.

To answer your questions:
. For sure, I’d want to “select multiple rows and use a separate button to return the selected row”
. Having an on-checkbox-click event that would fire whenever a checkbox were clicked and return the row clicked would be nice but not essential.

Are there any other settings available for the data grid component that are not documented in the GitHub readme.md?

Thanks again, and have a great day. Backendless is awesome.

Howard Jacobson

icon(919) 341-9140

icon[PO Box 98566, Raleigh, NC 27624](Google Maps Box 98566, Raleigh, NC 27624)

5

Hello @Howard_Jacobson,

We have created an internal task to implement this functionality for the Data Grid component. We will let you know when as soon as it is done.

You can learn more about all the features of Data Grid by reading this documentation - React Data Grid: Get Started with AG Grid

Regards
Nazar

7

Good day. Any update on when this functionality will be implemented? As always, thanks for the fabulous support.

8

Hello @Howard_Jacobson

For now, the task is in an “Open” state. We will let you know when it is available.

Regards,
Inna