Advance script to remove column headers?

tford

I am building an application that needs to have NO headers on the query at all. I have stripped as much as possible using the various options in the Query parameters. In V6 that's all that was needed. But with V7, I'm left with column headers and the up and down arrows on the far right side of the query.

seat query.jpg

Does anyone know advanced scripts that would eliminate these?

johntalbott

Removing the column headers ... see this thread

using Advanced Scripts>

Remove column sorting ... in the Initialization script use
config.sortable=false;

Note: It may be obvious, but you shouldn't need this if you remove the column headers altogether.

Remove scroll bar ... in the Initialization script use
config.scrollable=false;

tford

Thanks John.

Your code for turning off scrollable worked fine.

I tried the code from https://www.awareim.com/forum/d/8391> and could not get the headers turned off.

Help 🙂

BenHayat

Honestly, this feature should by in Aware to turn on/off. Most of Kendo Properties should be switches in Configurator that we can turn on/off, rather than writing script. That what Aware is all about to get away from writing JS.

tford

Honestly, this feature should by in Aware to turn on/off. Most of Kendo Properties should be switches in Configurator that we can turn on/off, rather than writing script. That what Aware is all about to get away from writing JS.

Agreed .. but I really need to know how to do this NOW .. the app I'm writing this weekend depends on turning this off. It was really easy to accomplish in V6.

pureist

tford wrote
Honestly, this feature should by in Aware to turn on/off. Most of Kendo Properties should be switches in Configurator that we can turn on/off, rather than writing script. That what Aware is all about to get away from writing JS.

Agreed .. but I really need to know how to do this NOW .. the app I'm writing this weekend depends on turning this off. It was really easy to accomplish in V6.

Absolutely 100% agree that this should be possible in Aware. BUT, there doesn't even need to be a new setting added.
The logic is simple based on a setting already present: If all 'Displayed attributes\Column name' settings are set to 'None' then Aware should interpret this to mean that the column heading row should not appear and should switch the setting in the Kendo Grid accordingly.
As per below image:

pureist

and, yes, the vertical scrollbar should not appear on a grid unless there is content to scroll.
BUT the vertical scrollbar appears on all grids throughout Aware even if there aren't any records at all!
Strangely though, the horizontal scrollbar doesn't, and appears automatically as required (as it should).
AND, this is how the vertical scrollbar should also behave. Relevant Grid Property From Kendo:
'scrollable' Boolean |Object (default: true)
If set to true the grid will display a scrollbar WHEN the total row height (or width) exceeds the grid height (or width).
So if horizontal and vertical scrollbars are supposed to only appear WHEN the total row height/width warrants, then why do vertical (but not horizontal) scrollbars (even if dimmed out) appear on every grid even if there are no rows in the grid?

tford

Pureist -- PLEASE don't turn my posts requesting help to solve a current need into a platform for feature requests. I've been on this forum 9 years & it hasn't operated that way for the most part. If you want to post a feature request that is similar to someone's post for help, please start a new post.

Now ... can anyone provide the advanced script to turn off the headers? I REALLY need to solve this in the next couple of days.

pureist

Apologies, Tom.
I actually meant to reply to "second"/affirm Ben's post, but inadvertently clicked yours because Ben's post features prominently in your post.
..it was a long night.

johntalbott

Tom,

Are you seeing any js errors in your browser console (F12 -> Console tab) when the query widget loads?

This tutorial shows two ways to hide the header ... https://youtu.be/A82fCezQK_g?t=3m53s
#1 using jQuery - similar to the thread I reposted
#2 using CSS (a little more elegant)

tford

Thanks a million for your help, John!

Initialization script (remove scroller on right):
config.scrollable=false;

Render script: (removes header from queries):
$("#" + parser.m_gridId).find (".k-grid-header").css ("display", "none");

originally I had grabbed the incorrect Render Script from the other forum post & I had also place it in the Initialization script box instead of the Render script.

Thanks for the reminder on the video as well, John!

tford

With John's help I solved the query header and scroll bar issue.

Now I'm dealing with trying to strip off all the unwanted parts of a form. In V6, all you had to do was eliminate the buttons and the caption. In V7, I've turned off all headers and captions and still have the dark blue bar at the top and the light blue area. My goal is to just have the three cells that have the values 1, 2 and 3 below.

Can anyone help give them appropriate scripts to make this happen?

aware_support

The blue bar at the top is just a standard panel header. You can turn it off without any script in the Panel Header options of the query

tford

Actually this is a form and not a query.

johntalbott

tford wrote
With John's help I solved the query header and scroll bar issue.

Now I'm dealing with trying to strip off all the unwanted parts of a form. In V6, all you had to do was eliminate the buttons and the caption. In V7, I've turned off all headers and captions and still have the dark blue bar at the top and the light blue area. My goal is to just have the three cells that have the values 1, 2 and 3 below.

Can anyone help give them appropriate scripts to make this happen?

I'm not sure what's going on with the header if you have all options turned off.

If I understand the remainder of what you are looking for ,this goes in the render script ...

var myFormBody = $("#" + parser.m_formId).find (".aw-form-body");
myFormBody.css ("background-color", "#ffffff");
myFormBody.css ("border-style", "none");

Explanation:

Use the parser to return the id of the form panel. parser.m_formId
Use jQuery to find the .aw-form-body class within the form
Modify the CSS associated with the .aw-form-body class to set the background to white and remove the border.