NG Grid Column Button & Multi-Selector Ctrl

Forum to discuss the new web client version of Servoy.

NG Grid Column Button & Multi-Selector Ctrl

Postby john1598360627 » Tue Nov 23, 2021 8:43 pm

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?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: NG Grid Column Button & Multi-Selector Ctrl

Postby swingman » Wed Nov 24, 2021 9:50 am

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,
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: NG Grid Column Button & Multi-Selector Ctrl

Postby john1598360627 » Tue Nov 30, 2021 1:45 am

swingman wrote: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).
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: NG Grid Column Button & Multi-Selector Ctrl

Postby john1598360627 » Wed Dec 01, 2021 4:06 am

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
Code: Select all
.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'?
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: NG Grid Column Button & Multi-Selector Ctrl

Postby swingman » Fri Dec 03, 2021 11:05 am

Hi John,

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

Code: Select all
.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.
You do not have the required permissions to view the files attached to this post.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London


Return to Servoy NGClient

Who is online

Users browsing this forum: Google [Bot] and 5 guests