NG Grid Column Button & Multi-Selector Ctrl

I got two questions;

COLUMN BUTTON
Let’s say there’s a blank column in the NG Grid. The user selects a record. That blank row then shows a button in the blank column.

Is there any way of doing that? Showing a button for a selected record from within the grid itself?

MULTI-SELECT CTRL
The normal behavior of the multi-selector is;

  • Click: Selects one record
  • Ctrl + Click: Adds another selection of a record
  • Shift + Click: Adds multiple sections of records in a row

I want to change the behavior so that Click works just like Ctrl + Click. Is this possible?

Hi John,

the following in an outline of what I would try, but I have not checked the actual class names so you need to look them up.

COLUMN BUTTON

I would add a calculated column in the table the grid is based which calculates to ‘hidden_button’ if you don’t want to show the button. You do this in the table under the database node, maybe second or third tab.
Apply it (the name of the calculated column) to the button using the style_provider (column to be used as a CSS class) of the grid cell in the properties inspector in the Servoy Developer.

Your grid will have a class like “row_selected” or whatever which marks the selected row. Check the documentation or with the web inspector in your browser to find the exact name.

By default the button is hidden so I would use a class in my CSS. Something like
.hidden_button {
visible: false;
}
.hidden_button .row_selected {
visible: true;
}

in your CSS (found under the Media node).

MULTI-SELECT

The grids have multi select behaviour built in – there is a checkbox somewhere to enable this in the properties inspector, and but you should be able to override by attaching methods to the various events that you can see.
I have never tried overriding myself.

Hope this helps,

swingman:
Hi John,

the following in an outline of what I would try, but I have not checked the actual class names so you need to look them up.

COLUMN BUTTON

I would add a calculated column in the table the grid is based which calculates to ‘hidden_button’ if you don’t want to show the button. You do this in the table under the database node, maybe second or third tab.
Apply it (the name of the calculated column) to the button using the style_provider (column to be used as a CSS class) of the grid cell in the properties inspector in the Servoy Developer.

Your grid will have a class like “row_selected” or whatever which marks the selected row. Check the documentation or with the web inspector in your browser to find the exact name.

By default the button is hidden so I would use a class in my CSS. Something like
.hidden_button {
visible: false;
}
.hidden_button .row_selected {
visible: true;
}

in your CSS (found under the Media node).

MULTI-SELECT

The grids have multi select behaviour built in – there is a checkbox somewhere to enable this in the properties inspector, and but you should be able to override by attaching methods to the various events that you can see.
I have never tried overriding myself.

Hope this helps,

COLUMN BUTTON

Hmmm I’m still a bit confused. So how do I put a button itself into the calculated column? Like a Servoy button. Or should I just make a label that emulates a button?

MULTI-SELECT

I already have the multi-select enabled. What I’m talking about is changing the behavior of the multi-select itself. What methods override the multi-selects functionality? I just want the click behavior to act like the ‘ctrl + click’ behavior (aka, every click be additive).

COLUMN BUTTON

I did what you said and it didn’t work. The result was that the

row selected from https://github.com/Servoy/svyThemeRolle … less#L1469

.hidden_button {
visible: false;
}
.hidden_button .ui-grid-row.ui-grid-row-selected{
visible: true;
}

If you have any idea where the style class of ‘row_selected’ is feel free to tell me.

Is there any way to just add the button on the onCellClick event for the NG Grid? All I want to do is when the row is selected, change the style class for the specific ‘button’ column.

I’m also not sure what creating a calculated column would be for. There is no ‘button’ edit type, and there is no way for the calculated column to see when a row is selected.

Basically, how to I actually obtain this ‘row_selected’?

Hi John,

Yes, I did not test your exact scenario. Looking at your CSS, the button should be inside the row, not outside:

.ui-grid-row.ui-grid-row-selected .hidden_button {
visible: true;
}

Yes, you can simply use a onCellClick handler for the button action, checking which column has been clicked. The sample code generated by the developer shows this.

I’m doing something slightly different using calculations to generate strings containing divs with css classes to make flags for records.