I'm using Data Grid 2.9.0. What I want to accomplish:
Open the item in a new window using the middle mouse button, you can see the screenshot. Basically, I have a list of items, and I want to open record details either in the same window or in the new window, but now, if I use the middle mouse button, it's just opening the current screen, instead of executing the action assigned to that column.
Is it possible to extend the action column functionalities so it opens in a new tab when I click with the middle mouse button?
Hello @Mateusz Kołodziejczyk
Can you please share what you've tried so far? Or at least what you've found on Wijmo's documentation about this particular use case?In JavaScript, you can handle the middle button of a mouse using the mousedown event and checking the event.button property. However, after finding out if Wijmo's library allows this, you need to understand that from a UX point of view, this is not ideal not the normal purpose of the middle mouse button since not all mice have a middle button, so this code may not work for all users.
Cheers,GM
I took the chance to do a quick test based on the Wijmo documentation here.
You can place this on the Initialized event of the Grid itself (not the screen):
let theGrid = OutSystems.GridAPI.GridManager.GetGridById('YourGridId').provider; theGrid.addEventListener(theGrid.hostElement, 'mousedown', function (e) { if (e.button === 1) { // Code to handle middle mouse button click // Add your code here console.log('clicked mouse middle button',ht); } else { console.log('clicked another key', e.button); } });
It handles the middle button of the mouse and you just need to implement the behaviour you need.
Finally I've been able to solve this, since @Gonçalo Martins solution wasn't handling middle mouse button propertly - it still was redirecting to new window, instead of standard link behaviour - opening in new tab and still staying on the same page. That's the only way to open multiple items without switching back and forth between list and details pages. My solution requires cloning Datagrid module, but maybe someone would be able to write extension. Still, its not perfect but working. I've modified ActionColumn in the Gridframework to look like this:
var ActionColumnFactory;
(function(ActionColumnFactory) {
function MakeActionColumnCellTemplate(type, binding, callback) {
let cellTemplate;
const hasFixedText = binding.charAt(0) === '$';
const text = hasFixedText ? binding.substring(1) : '${item.' + binding + '}';
switch (type) {
case OSFramework.DataGrid.Enum.ActionColumnElementType.Button:
cellTemplate = wijmo.grid.cellmaker.CellMaker.makeButton({
text,
});
break;
case OSFramework.DataGrid.Enum.ActionColumnElementType.Link: {
cellTemplate = wijmo.grid.cellmaker.CellMaker.makeLink({
href: '${item.' + binding + '_url}'
Since I have no idea how to extend standard column with additional binding parameter, to make it fully work, you have to create new column in data preparation, and just name it with "_url" addition.
This way datagrid takes that column and knows where to redirect you. I'll prepare solution to demonstrate that and attach here later. Also you can refer to this documentation or support my idea submission :
https://www.outsystems.com/ideas/13117/datagrid-link-column/
https://www.grapecity.com/wijmo/demos/Grid/CustomCells/CellMaker/Hyperlinks/purejs