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 (5.6 KiB) Viewed 19072 times

Does anyone know advanced scripts that would eliminate these?

[johntalbott]

Removing the column headers ... see this thread

http://www.awareim.com/forum/viewtopic.php?f=1&t=8391

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 http://www.awareim.com/forum/viewtopic.php?f=1&t=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]

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:

nocolumnheadingsrow.jpg (92.18 KiB) Viewed 19054 times

[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");

script.jpg (56.99 KiB) Viewed 19035 times

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.

form.png (2.34 KiB) Viewed 18989 times

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]

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:
1. Use the parser to return the id of the form panel. parser.m_formId
2. Use jQuery to find the .aw-form-body class within the form
3. Modify the CSS associated with the .aw-form-body class to set the background to white and remove the border.