Blank space above grid header

[Eric]

Please look at the attached image. There is a white space above the grid header. Why does this happen?

This is the default kendo theme and there is nothing else on this page. It is the default web site template in VS 2010 for MVC 4. No styles have been modified.

@(Html.Kendo().Grid<OpenXMLDemo.Models.AppointmentsDTO>().Name("Appointments")
                .Columns(columns =>
                {
                    columns.Bound(o => o.FirstName).Title("First Name").Width(80);
                    columns.Bound(o => o.LastName).Title("Last Name").Width(80);
                    columns.Bound(o => o.ClientMemberID).Title("ID").Width(80);
                    columns.Bound(o => o.ClientName).Title("Client").Width(80);
                    columns.Bound(o => o.VendorName).Title("Vendor").Width(90);                   
                    columns.Bound(o => o.ProviderID).Title("Provider ID").Width(75);
                    columns.Bound(o => o.NPI).Title("NPI").Width(70);
                    columns.Bound(o => o.AppointmentDateDisplay).Title("Date/Time").Width(120);         
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => { read.Action("BindAppointments", "Home"); }))
                
                )

[Dimo]

Hello Eric,

We have not come across such a problem so far. Did you inspect the Grid HTML elements with some web developer tool (e.g. Firebug) to check what CSS styles are being applied? Can you provide a demo?

Regards,
Dimo
the Telerik team

[Eric]

Just the basic web MVC project with nothing in it is over 40 meg.

This is the entire section of HTML surrounding the grid. The CSS classes all ship with Kendo and have not been modified.

<div>
<div class="k-widget k-grid" id="Appointments"><table cellspacing="0"><colgroup><col style="width:80px" /><col style="width:80px" /><col style="width:80px" /><col style="width:80px" /><col style="width:90px" /><col style="width:75px" /><col style="width:70px" /><col style="width:120px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="FirstName" data-title="First Name" scope="col"><span class="k-link">First Name</span></th><th class="k-header" data-field="LastName" data-title="Last Name" scope="col"><span class="k-link">Last Name</span></th><th class="k-header" data-field="ClientMemberID" data-title="ID" scope="col"><span class="k-link">ID</span></th><th class="k-header" data-field="ClientName" data-title="Client" scope="col"><span class="k-link">Client</span></th><th class="k-header" data-field="VendorName" data-title="Vendor" scope="col"><span class="k-link">Vendor</span></th><th class="k-header" data-field="ProviderID" data-title="Provider ID" scope="col"><span class="k-link">Provider ID</span></th><th class="k-header" data-field="NPI" data-title="NPI" scope="col"><span class="k-link">NPI</span></th><th class="k-header" data-field="AppointmentDateDisplay" data-title="Date/Time" scope="col"><span class="k-link">Date/Time</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="8"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Appointments").kendoGrid({"columns":[{"title":"First Name","width":"80px","field":"FirstName","filterable":{},"encoded":true},{"title":"Last Name","width":"80px","field":"LastName","filterable":{},"encoded":true},{"title":"ID","width":"80px","field":"ClientMemberID","filterable":{},"encoded":true},{"title":"Client","width":"80px","field":"ClientName","filterable":{},"encoded":true},{"title":"Vendor","width":"90px","field":"VendorName","filterable":{},"encoded":true},{"title":"Provider ID","width":"75px","field":"ProviderID","filterable":{},"encoded":true},{"title":"NPI","width":"70px","field":"NPI","filterable":{},"encoded":true},{"title":"Date/Time","width":"120px","field":"AppointmentDateDisplay","filterable":{},"encoded":true}],"scrollable":false,"dataSource":{"transport":{"prefix":"","read":{"url":"/Home/BindAppointments"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"VendorName":{"type":"string"},"ClientName":{"type":"string"},"FirstName":{"type":"string"},"LastName":{"type":"string"},"ProviderID":{"type":"string"},"ClientMemberID":{"type":"string"},"AppointmentDate":{"type":"date"},"AppointmentDateDisplay":{"editable":false,"type":"string"},"Resolved":{"type":"boolean"},"NPI":{"type":"string"}}}}}});});
</script>
</div>

[Dimo]

Hello Eric,

I see there are global margin styles applied to <table> elements in Site.css. Please do one of the following:

1. remove them
2. change the selector to be more specific and target only what you need
3. add another CSS rule, which resets the Grid tables' margins back to zero.

.k-grid  table
{
      margin: 0;
}

Greetings,
Dimo
the Telerik team

[Eric]

Thanks, I was looking at div tags.

Why on earth would MS just assume everyone would want a 75em margin on top of every table? Weird.