i need to have a column where it contains a clickable action button/image (3 vertical ellipse). When user clicks on the 3 vertical ellipse, it will show a dropdown with 2 more actions such as Delete or Update.
At youtube, i saw there is this "Advanced Column" but i cannot find component in the datagrid component list.
https://www.youtube.com/watch?v=nSkYP5U48S8
I have also tried to lookup the forum and came across a few promising ones but i cannot reproduce the result thus requesting for help.
https://www.outsystems.com/forums/discussion/66901/outsystems-data-grid-link-column-or-button/
https://www.outsystems.com/forums/discussion/72489/outsystems-data-grid-add-multiple-action-in-action-column/
1) When the user clicks on the 3 vertical ellipse, a div layer (container) or dropdown or some popup will appear below it so that a Delete or Update option is presented. Delete will just set entity isDelete flag to true while the Update will send them to another screen.
2) How can i remove the hamburger on the top left of the grid and also remove the row headers (that is, the wording 'title' and 'actions')?
3) Lastly, I do not want the user to collapse the grouped row, '2024-08-19 00:00'
How can i achieve the above criteria?
Hello @WeiWei
As mentioned, please share an oml with your attempts and share the parts where you're struggling so it can be more efficient and collaborative for the community instead of asking without trying.
I'm not a moderator, by the way; I'm just someone who loves the product and is willing to help whenever I have time.
The provider or underlying library is mentioned in several places and is called Wijmo Flexgrid. Check the documentation here; it is quite complete and easy to follow.
const theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider; theGrid.groupCollapsedChanging.addHandler(function (s, e) { e.cancel = true; // Cancel the collapse operation }); //where $parameters.GridWidgetId is the identifier of the Data Grid block
Hope it helps!
Cheers,GM
Hi @WeiWei
AFAIK that use case is not supported. Have you checked on Wijmo's Flexgrid documentation for a way to do that? If you can't find that same scenario it won't be possible as well in OutSystems Data Grid (that use case is more for a list than a spreadsheet-like component so I doubt they have it).
Hi GM,
Yes I checked Wijmo documentation too. I haven't finish combing the documentation.
Regarding Grid style:
1) How can I change the row height?
2) Remove or Hide or make the top left hamburger menu invisible?
3) Use javascript or react or CSS to make the group header collapsible/expandable icon disappear so that users cannot click on it?
In addition, regarding the right-click menu options,
A) How can I prevent user from right clicking?
B) How can I change the list of options presented to user?
In this post at wijmo forum, there is a way to remove the hamburger menu.
https://developer.mescius.com/forums/wijmo/remove-extra-column-from-the-left-of-the-grid-table
How can i use it in outsystems?
Please share an oml with your attempts and share the parts where you're struggling so it can be more efficient and collaborative for the community instead of asking without trying.
Hi GM, I have spent more than 16 hours across 2.5 days trying out various approach (CSS, javascript) to hack the datagrid and is a uphill battle.
I understood that there are only a few moderators in the forum compare to 100 odd newbies asking for help. Resource are scare. Understandable.
At least, could you give me the link to the documentation for "Provider", as in the provider list of properties or methods or functions in
OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider - this provider in particular.
I trial and error with my javascripts and css and these are what worked for me.
.grid-firstCol-transparent div[wj-part="rh"] .wj-header { color: transparent;}
.grid-firstCol-transparent div[wj-part="ch"] { display:none;}
.wj-cell { border: none !important; }
.wj-flexgrid .wj-cell .wj-cell-maker { vertical-align: middle;}
.wj-flexgrid .wj-cell button.wj-cell-maker { height: 40px;}
.wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph, .wj-flexgrid .wj-cell .wj-viewer .wj-control .wj-btn-glyph.wj-applybutton, .wj-viewer .wj-control .wj-flexgrid .wj-cell .wj-btn-glyph.wj-applybutton { display: none;}
div[wj-part='ch'] { display:none;}
.wj-cell.wj-header { display: none;}
.wj-cell.wj-state-active.wj-state-selected { background-color: #E3EFF8; border: 0px; box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0);}
.wj-cells .wj-cell[aria-selected='true']:not(.wj-state-multi-selected) { background-color: #E3EFF8; border: 0px; box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0);}
.wj-cell.wj-group.wj-wrap { background-color: white; font-weight: bold;}
a.wj-cell-maker:after { font-family: FontAwesome; font-size: 30px; display: inline-block; content: '\22EE';}
On the GridInitialize, i had the following:
Start > AddColumnsToGroupPanel > SetColumnWordWrap > Javascript 1 > Javascript 2 > End
[Javascript 1]
let theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);let gridProvider = theGrid.provider;gridProvider.groupHeaderFormat = '{value}'; // Set the group header formatgridProvider.headersVisibility = wijmo.grid.HeadersVisibility.Column; // Hide the left-most columngridProvider.selectionMode = 3; // Prevent multi-row selection
[Javascript 2]
let theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);
On Ready, I had the following:
Start > Javascript 3 > End
[Javascript 3]
OutSystems.GridAPI.ColumnManager.GetColumnById($parameters.ColumnWidgetId).provider.isContentHtml = true;