Queries with high data density like a spreadsheet.

[MichaelQ]

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

1. 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?

2. 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.

[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

Code: Select all

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

Part 2

Code: Select all

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 ...

icons-nobutton.PNG (17.42 KiB) Viewed 28806 times

Tom has you covered on your checkbox requirement.

[MichaelQ]

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

[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 (13.86 KiB) Viewed 28756 times

[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