I'd like to know how the column headers in a grid may be hidden. The effect I wish to achieve is something like the following:
Instead of:
Order ID Employee Ship Address
10251 Janet Leverling 2, rue du Commerce
10252 Margaret Peacock Boulevard Tirou, 255
I wish to make my grid look like:
10251 Janet Leverling 2, rue du Commerce
10252 Margaret Peacock Boulevard Tirou, 255
Just the same thing, but without the headers. Please let me know how to achieve this.
1 Answer, 1 is accepted
Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved:
- Using CSS:
.k-grid .k-header {
display
:
none
;
}
- Through JavaScript:
$(
".k-grid .k-grid-header"
).hide();
Iliana Nikolova
the Telerik team
Yes, hiding the headers can be achieved only for the detailGrid-s in Kendo UI Grid for ASP.NET MVC. For this purpose you can use the same approaches:
- CSS:
<style>
.k-grid tbody .k-grid .k-grid-header
{
display
:
none
;
}
</style>
- JavaScript:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
//....
.Events(events => events.DetailInit(
"hideDetailGridHeaders"
))
)
<script>
function
hideDetailGridHeaders() {
$(
".k-grid tbody .k-grid .k-grid-header"
).hide();
}
</script>
Regards,
Iliana Nikolovathe Telerik team
Regards,
parsanamoni
If I have grouped by multiple columns, Can I hide the header for the first column and display only the second header? Right now, after grouping by two columns, we have two headers. I can get the details of the first groupby and display in the headertemplate of the second grouping.. So, want to do away with the header created by the first grouping.
As shown in the screenshot, I want to retain the header encircled in GREEN and do away with the one in red. I would still want the grouping but just don't want the header.
Generally speaking you could achieve this using the suggested approach in my previous replies, however you should use custom logic to find the correct grouping rows. As a possible approach I can suggest the following:
- Find the first group field (using dataSource' group() method):
//get reference to the Grid's widget
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
//get the first group field
var
firstGroup = grid.dataSource.group()[0].field;
- Get the first group field's title from the grid.options.columns array;
- Check if the grouping row contains the particular title and if yes remove this row. As an example:
$(
'#grid tbody .k-grouping-row:contains("City")'
).hide();
//City is the first group column's title
Regards,
Iliana NikolovaTelerik
$(".k-grid .k-grid-header").hide();
that works like magic but only problem i have is i have two grids say grid1 and grid2 and above code hides the column headers for both.
how can i achieve this only on one grid.
Thanks,
Shahid
In order to hide the headers only for a single Grid you could use its id:
$(
'#firstGridID .k-grid-header'
).hide();
Regards,
Iliana Nikolova
Telerik
Hi Iliana Nikolova
First of all thanks for the help though :) .. Using your code I am able to hide the detail grid headers name from the grid. but when I tried to export them to excel it still appears there. Is there any way to hide the detail grid column name from the excel sheet as well ?
Thanks
The column headers cannot be removed using the same approach as the export depends on the fields and the data in the dataSource.
The output can be modified on the excelExport event:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-excelExport
I made an example demonstrating how the header can be accessed and modified:
http://dojo.telerik.com/azeBE
Regards,
Stefan
Telerik by Progress
I have multiple columns for kendo grid. Can't I use the headerAttributes on each column to give style: 'display: none;', instead of overwriting css class? Which one is the better way and why?
[quote]Iliana Nikolova said:Hello Joonu,
Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved:
- Using CSS:
.k-grid .k-header {
display
:
none
;
}
- Through JavaScript:
$(
".k-grid .k-grid-header"
).hide();
Iliana Nikolova
the Telerik team
Hiding the headers in Kendo UI Grid for ASP.NET MVC is not supported out of the box, however it could be easily achieved:
- Using CSS:
.k-grid .k-header {
display
:
none
;
}
- Through JavaScript:
$(
".k-grid .k-grid-header"
).hide();
Iliana Nikolova
the Telerik team
In general, using the CSS or the JavaScript approach is the same in terms of end result.
The jQuery hide mothed is actually internally setting the style of the element to display none the same as the CSS rule.
In this case, it depends on the developer preferences which approach is more clear and readable.
Regards,
Stefan
Progress Telerik