[Data Grid Reactive] Researching Data Grid Reactive -  a few questions on functionality
Forge component by Bruno Martinho
Application Type
Reactive

Hi,

I am looking into the possibility of moving an Access app (with SQL server back end) over to Outsystems.  I am wanting to see if this reactive grid will offer some of the same functionality as the grid in Access.   

Here are my questions:

- Can I control the forecolor and backcolor of individual cells ?

- Can I use the wingdings, webdings, and similar type fonts in individual cells ?

- Can I put an icon or small image in individual cells ?

- Can you put a title over several columns to denote they go together, for example "Schedule Dates" or "Pricing" ?

- Can a cell have a button in it, for example "View" ?

- Can rows alternate the back color every other row ?

- Can you fire a different event based on which cell is clicked ?  (As opposed to the event being fired only on the row being selected or clicked)      - This event would pop up another form/page for more user interactions.  Upon closing the form/page it would return to the grid page and possibly refresh the grid.

- Are there third party data grids that can be used with Outsystems that offer more functionality?


Thanks

Hello @Brent Murphy ,

I will try to answer all the questions:

- Can I control the forecolor and backcolor of individual cells?

A: Right now, you can set CSS class for the cells, depending on it's value, using conditional format. We haven't released yet, but we are planning on having a client action that you can use to set a CSS class for a specific cell. With the CSS class you can define the forecolor and backcolor.

- Can I use the wingdings, webdings, and similar type fonts in individual cells ?

A: Using CSS you can set the font family. { font-family: wingdings }. You can also use emoji.

- Can I put an icon or small image in individual cells ?

A: You can use the same approach in the first question, to add that icon using CSS. Please check the second grid in this sample.

- Can you put a title over several columns to denote they go together, for example "Schedule Dates" or "Pricing" ?

A: That feature is called the column group. We are going to start working on a solution for that in the beginning of  June.

- Can a cell have a button in it, for example "View" ?

A: You can use the column type Action column. The column renders a link, but with CSS styling you can turn that into a button. Please, check the action column documentation.

- Can rows alternate the back color every other row ?

A: Maybe I don't understand the question, but they already have alternate backgrounds, white and grey:

- Can you fire a different event based on which cell is clicked ?  (As opposed to the event being fired only on the row being selected or clicked)      - This event would pop up another form/page for more user interactions.  Upon closing the form/page it would return to the grid page and possibly refresh the grid.

A: This can be achieved with Action column. This column triggers an event, with the row identifier, so you can open a pop up and load the data is a form or another way to change data. Then you can save that data in the server and then refresh the grid.  Please, check the action column documentation.

- Are there third party data grids that can be used with OutSystems that offer more functionality? 

A: I would say this is the grid component that has more features using OutSystems code, that don't force you to write JavaScript. If you are comfortable with JS, then you can even extend this grid's features because we are using Wijmo Flexgrid. I believe the alternatives would require you to master JavaScript and write a lot of code from scratch.

Please let me know if this helps and if you have any further questions.

Thanks,

Bruno Martinho

Hi Bruno,

Thanks for the very informative response!

The question on the alternate row color was my fault.   I now see it.  On my monitor, I could not see it unless the grid was straight level inline with my eyes.  If I had it at the bottom of my monitor looking at a downward angle, it wasn't visible.   Is that alternate row color adjustable by the developer ?

I was looking at the link for the Wijmo Flexgrid.   So does that mean all the functionality on that link page is currently in the Reactive data grid that Outsystems is using ?

Thanks again for the help,

Brent


Hello @Brent Murphy 

The alternate row color can be changed using CSS. The Data Grid rows color are set with a CSS variable: 

--datagrid-cell-background-alt: var(--color-neutral-1)

Not all the functionalities of the wijmo grid are available using the OutSystems Data Grid. In order to achieve some of those functionalities it is required to extend the component, writing your own JavaScript code instead of just using the OutSystems blocks and actions.

If you have specific questions about features we can try to let you know if they are achievable writing your own JS code or if they are not possible. 

Hi,

I am following this very interesting post. I am trying to determine if and how we can achieve the following functionality with this grid:

- Is it possible to create additional key-board shortcuts (like CTRL+C and CTRL+V)?

- Is it possible to define a context-menu function that responds to the cell that the user was right-clicking on? For example right-clicking on a field in the Price column has a different set of context menu options than right-clicking on the Stock column?

- Is it possible to retrieve the currently selected cell from the grid?

- Is it possible to set a given filter by code instead of manually? The OnFiltersChange-event passes the list of current active filter values, but as far as I am aware there is no way to assign this to the grid, right?

Best regards,
Alfio Esposito.

Hello @Alfio Esposito 

Sorry for such a delay to answer.

I will try to answer all the questions:

- Is it possible to create additional key-board shortcuts (like CTRL+C and CTRL+V)? 

A: Yes, but you need to create that logic using JavaScript using the wijmo feature to detect key strokes in the grid. You can check an example in the link. 

- Is it possible to define a context-menu function that responds to the cell that the user was right-clicking on? For example right-clicking on a field in the Price column has a different set of context menu options than right-clicking on the Stock column? 

A: Right now it isn't possible, but we already have an internal event that is raised when the context menu is opened or closed. Making this event public would allow to handle the event and change the context menu items depending on the context.

- Is it possible to retrieve the currently selected cell from the grid? 

A: Yes, currently there are client actions that retrieve this information. You can check GetAllSelections and GetAllSelectionsData from the Data Grid API

- Is it possible to set a given filter by code instead of manually? The OnFiltersChange-event passes the list of current active filter values, but as far as I am aware there is no way to assign this to the grid, right? 

A: Right now it isn't possible, but we already have the mechanism and the data structure to expose the filters, so it wouldn't be difficult to make the other way around.

If you are interested the JavaScript code used in the Data Grid Reactive component is public and available in our GitHub. Take a look and if you have interest, any feature or correction you feel that the component needs, we invite you to implement to solve your use case and share with everyone doing a Pull Request. We will consider it and include it in the product.

Please let us know if there is anything else that we can help.

Thanks,

Bruno Martinho


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.