Queries with high data density like a spreadsheet.

MichaelQ

Please forgive me but my knowledge of CSS is poor and I was wondering:

Is there a simple way to change a setting (probably in css) to reduce vertical padding in query rows so that on-screen data density is increased for users with bigger screens? If so, what should be changed and where?
It seems that when action buttons are incorporated into rows, the buttons add a lot of row height. It is possible to incorporate clickable buttons or icons into rows without increasing the row height achieved in #1 above (for users of bigger screens)?

Many thanks,

Michael

pureist

A Custom Query can do that and a whole lot more.

However, what you want to achieve can be done in a Standard Query via Advanced.
I think there is even a Post in this forum which mentions the Script required in the Render Script panel.

I never explored using Script in the Advanced panels to find and manipulate elements, because I think Custom Queries are King, thus I can't help you. :mrgreen:

BLOMASKY

1st, you know there are different themes and some of them have higher vertical density. Like you, I want to display as much possible info to my users. in the CUSTOM / CSS folder i have my css file with a line:

.k-grid td {
padding-top: 0.3em !important;
padding-bottom: 0.3em !important;
}

This will make the rows slight closer together

Bruce

MichaelQ

Thanks very much.
I got the rows to compress vertically sufficiently using your code (providing that there are no buttons in the rows).
However the vertical padding inside buttons is still too large. I don't know how to find the css setting that controls this.

Many thanks,
Michael

BLOMASKY

/* THE FOLLOWING TRY TO MAKE INLINE MENU ON GRID SMALLER */
.k-toolbar {
line-height: 0em !important;
height: 0em !important;
}

.k-toolbar-resizable {
min-height: 1.7em !important;
}

.k-button {
line-height: 1.5em !important;
padding-top: 0em !important;
padding-bottom: 0em !important;
}

MichaelQ

Bruce you are a star. Thank you!

I don't suppose you know how to show just a clickable edit icon in a row, without a button around it?

Michael

johntalbott

It's hacky, but this will work ...

Put this in the grid's Advanced Initialization script:

Part 1

config.dataBound = function(e) {
		removeButtonClass(e);
}

Part 2

function removeButtonClass(e){
	
let gridId = e.sender.element[0].id;
let buttons = $("#" + gridId).find("a.k-button");
$(buttons).removeClass("k-button");	

}

If you have multiple grids you want to apply this to, I suggest putting Part 2 in a custom JS file.

MichaelQ

Thanks John.

But I couldn't get that to work.
Its not a critical feature but I was hoping that there was an elegant easy way to do this in AwareIM.

Actually on second thoughts I really need to be able to show a "check" icon in a column instead of "Yes/No."
"No" values need to be blank rather than having an "X". This does not need to be clickable.
Can you point me in the right direction please?

Thanks.
Michael

tford

Actually on second thoughts I really need to be able to show a "check" icon in a column instead of "Yes/No."

"No" values need to be blank rather than having an "X". This does not need to be clickable.

In each BO attribute you can define icon rules by clicking on the "presentation" button. The icons determined by those rules can then be used in a query column. In the Query definition for the attribute where you want to show a "check", you will specify "icon only" instead of the default "value only".

johntalbott

I'm not sure why it's not working for you. Here's what it looks like for me ...

Tom has you covered on your checkbox requirement.

MichaelQ

Perhaps I'm doing this wrong?
Here is my Query's output & Advanced Initialisation:

Screenshot (1).png

Screenshot (2).png

johntalbott

If you run it with Developer Tools > Console tab open do you see any errors?

You can open Developer Tools using the F12 key.

MichaelQ

I suspect the "Access is denied" error is spurious. The app functions ok.
Not sure where the ';' is missing.

Screenshot (4).png

johntalbott

Does it work in Chrome?

MichaelQ

Yes!!
It works in Chrome.
I guess IE is up to its usual non-standard behavior.

Thank you very much for your help.

Michael

MichaelQ

"If you have multiple grids you want to apply this to, I suggest putting Part 2 in a custom JS file."

I assume that a custom JS file would be named something like Myapp.js but where would I store this and how would I reference it?

Many thanks.

johntalbott

MichaelQ wrote
"If you have multiple grids you want to apply this to, I suggest putting Part 2 in a custom JS file."

I assume that a custom JS file would be named something like Myapp.js but where would I store this and how would I reference it?

Many thanks.

Put it in the AIM custom JS folder. Example below:
C:\AwareIM64\Tomcat\webapps\AwareIM\Custom\JS\MyApp.js

Any JS filles in that folder will be "automatically" referenced.

MichaelQ

Thank you John.