Hide Grid Column Header Row Help

[Randy]

Hi,
I was able to hide the grid header (containing the column names) by putting a display:none; override on the .k-grid-header class.

We upgraded to version "RadControls_for_Windows_8_HTML_2013_1_417" and that override now causes the group header rows to be duplicated (see attached image "TelerikGrid_DoubleGroupHeader.jpg")

Also attached is an image without the override ("TelerikGrid_ColumnHeaderSingleGroupHeader.jpg").
This image is to show you that the header row I want to hide is the one with the column names, in my case "Select a payee from the list".

I have tried to use your grid style guide to try different combinations, but I'm the opposite of a css guru.
Can you help me hide the grid header row using css - or if there's a property of the grid itself, etc?

Thanks,
Randy

Here is the CSS that used to work

.billpay #main #gridSectionBillPay .k-grid-header {
    display: none;
    /*Hiding Grid Column Header Row*/
}

Here is my html

<div id="divbillpay" class="billpay fragment">
    <section id="peek"></section>

    <div id="rBpSbSpSectionHeader"></div>

    <div aria-label="Main content" role="main" id="main">
        <div id="divProgressRing" class="displayElement">
            <progress id="progressRing" class="win-ring win-medium"></progress>
        </div>
        <div id="divbillpayContainer" class="billpayControlGrid hideElement">
            <div id="gridSectionBillPay"></div>
        </div>
    </div>
</div>

Here is my .js grid code (sorry I don't have the datasource duplicated in here for you, but I could recreate that if you need it)

// Build The RadGrid
new Telerik.UI.RadGrid(document.getElementById("gridSectionBillPay"), {
    dataSource: {
        data: vm.getPayeeListForGrid(),
        group: { field: "getTelerikGroupByString", dir: "asc" },
        schema: {
            model: {
                fields: {
                    getPayeeListSingleLineDisplay: { type: "string" },
                    getTelerikGroupByString: { type: "string" }
                }
            }

        },
        sort: [
            { field: "getPayeeListSingleLineDisplayForSorting", dir: "asc" }
        ]
    },
    columns: [
        { field: "getTelerikGroupByString", title: "Payee Group", width: "0px", hidden: true, groupHeaderTemplate: "#='zzzzzzzzzzzzzzzzzzzz'==value ? 'Ungrouped Payees' : value#" },
        { field: "getPayeeListSingleLineDisplay", title: "Select a payee from the list" }
    ],

    sortable: "none",
    selectable: (hasPayees ? "row" : "none"),
    filterable: false,
    groupable: { enabled: false, staticHeaders: true },
    reorderable: false,
    resizable: false,
    ondatabound: function (e) { $(".k-grouping-row .k-icon").remove(); },
    onchange: payeeGrid_OnSelected
});

[Martin Yankov]

Hello Randy,

Thank you for sharing this problem with us. I have contacted our developers and this bug will be fixed in our Q2 2013 official release, that will be available by the end of next week.

In the meantime, you can use the following workaround - just add this to your CSS rules:

.billpay #main #gridSectionBillPay .t-fixedGroupHeader {
     margin-top: -33px;
}

Note that if you later upgrade to our Q2 2013 official release, this CSS rule has to be removed, because the bug will be fixed internally and the rule will most probably break your grid layout again.

I hope this helps. Also, I have updated your Telerik points for your valuable feedback.

Regards,
Martin Yankov
Telerik

[Adrian]

Hello Randy,

After a further research on the issue, we found that it is better to hide column headers individually, not all of them by hiding their parent.
You can find below a code snippet which you can use instead of the approach where you hide the entire header element.

.billpay #main #gridSectionBillPay .k-grid-header .k-header {
    display: none;
    /*Hiding Grid Column Header Row*/
}

Regards,
Adrian
Telerik

[Randy]

Thanks Adrian!

It does take both overrides you showed above to hide the grid header cells AND keep the duplicate group header row from appearing.

That'll work for us until the new version, thanks again.

Randy