Kendo Grid: How to set Height - kendo-ui

Question

I have some problems to set the height to a kendo grid's. It's simple what i'm trying to do. I want the grid fills all the div where it's placed.
This is my code
<div class="col-lg-6" style="height:316px;">
#(Html.Kendo().Grid<empresas_personas>(Model.empresas_personas)
.Name("empresas_personas")
.ToolBar(t => {
t.Create();
})
.Filterable(f=>f
.Enabled(true)
.Mode(GridFilterMode.Menu)
// .Extra(false)
//.Operators(ops=>ops.ForString(str=>str.Clear().Contains("Contains")))
)
.Excel(e=>e.FileName("Personas").AllPages(true))
.Sortable(s=>s.Enabled(true).SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
.Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
.Scrollable()
.HtmlAttributes(new { #style = "height:316px;"})
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden().ClientTemplate("#= Id #" +
"<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Id' value='#= Id #' />");
columns.Bound(c => c.NombreDomicilio)
.ClientTemplate("#= NombreDomicilio #" +
"<input required='true' type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].NombreDomicilio' value= '#= NombreDomicilio ? NombreDomicilio : '' #' />")
.Sortable(true)
.Filterable(f=>f.Operators(ops => ops.ForString(str => str.Clear().Contains("Contiene"))))
.Title("Nombre");
columns.Bound(c => c.Cargo)
.ClientTemplate("#= Cargo #" +
"<input required='true' type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Cargo' value= '#= Cargo ? Cargo : '' #' />")
.Sortable(true)
.Filterable(f => f.Operators(ops => ops.ForString(str => str.Clear().Contains("Contiene"))))
.Title("Cargo");
columns.Command(command =>
{
command.Edit().Text(" ").HtmlAttributes(new { #style = "padding:0px; min-width:25px; padding-left: 0.4em;" });
command.Destroy().Text(" ").HtmlAttributes(new { #style = "padding:0px; min-width:25px; padding-left: 0.3em;" });
}).Width(80);
//columns.Bound(c => c.Cargo)
// .ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Cargo' value='#= Cargo ? Cargo : '' #' />");
#*Hidden*#
columns.Bound(c => c.Calle).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Calle' value='#= Calle ? Calle : '' #' />");
columns.Bound(c => c.Codigo_postal).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Codigo_postal' value='#= Codigo_postal ? Codigo_postal : '' #' />");
columns.Bound(c => c.IdPoblacionAvalon).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].IdPoblacionAvalon' value='#= IdPoblacionAvalon ? IdPoblacionAvalon : '' #' />");
columns.Bound(c => c.Email).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Email' value='#= Email ? Email : '' #' />");
columns.Bound(c => c.Telefono_movil).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Telefono_movil' value='#= Telefono_movil ? Telefono_movil : '' #' />");
columns.Bound(c => c.Telefono_fijo).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Telefono_fijo' value='#= Telefono_fijo ? Telefono_fijo : '' #' />");
columns.Bound(c => c.Telefono_fax).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Telefono_fax' value='#= Telefono_fax ? Telefono_fax : '' #' />");
columns.Bound(c => c.Observaciones).Hidden().ClientTemplate("<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].Observaciones' value='#= Observaciones ? Observaciones : '' #' />");
columns.Bound(c => c.IdEmpresa).Hidden().ClientTemplate("#= IdEmpresa #" +
"<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].IdEmpresa' value='#= IdEmpresa #' />");
// columns.Bound(c => c.IdCargo).Hidden().ClientTemplate("<input name='empresas_personas[#= indexPersonasEmpresa(data)#].IdCargo' value='#= IdCargo ? IdCargo : '' #' />");
//columns.Bound(c => c.CargoStr).Hidden().ClientTemplate("#= cargos==null ? cargos.Nombre : '' #" +
// "<input type='hidden' name='empresas_personas[#= indexPersonasEmpresa(data)#].cargos.Nombre' value='#= cargos ? cargos.Nombre : '' #' />");
})
.Events(e => e.Edit("onEdit").Change("onChangePersona"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).CreateAt(GridInsertRowPosition.Top).TemplateName("popUpPersonas")
// .Window(w=>w.Events(ev=>ev.Activate("onOpenPersonasContacto")))
)
.DataSource(dataSource => dataSource.Ajax()
.Create(c => c.Action("FakeGridCreate", "Empresas"))
.Destroy(d => d.Action("FakeGridDestroy", "Empresas"))
.Update(d => d.Action("FakeGridUpdate", "Empresas"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.IdEmpresa).DefaultValue(Model.Id).Editable(false);
model.Field(p => p.Calle).DefaultValue(Model.Domicilio_social).Editable(true);
model.Field(p => p.Codigo_postal).DefaultValue(Model.Codigo_postal).Editable(true);
//model.Field(p => p.IdPoblacionAvalon).DefaultValue(Model.IdPoblacion).Editable(true);
model.Field(p => p.Telefono_fijo).DefaultValue(Model.Telefojo_fijo_empresa).Editable(true);
model.Field(p => p.Telefono_movil).DefaultValue(Model.Telefono_movil_empresa).Editable(true);
model.Field(p => p.Telefono_fax).DefaultValue(Model.Telefono_fax_empresa).Editable(true);
model.Field(p => p.Email).DefaultValue(Model.Email).Editable(true);
})
.ServerOperation(false)
)
)
</div>
However it renders like this:
As you can see a strange white band appears.
I have tried the solution provided by telerik: http://jsbin.com/yumexugo/1/edit?html,css,js,output changing my code like this:
//same thing here
.HtmlAttributes(new { #style = "height:100%;"})
//same here
<script type="text/javascript">
$(document).ready(function () {
//resizeWrapper();
resizeGrid();
});
function resizeGrid() {
debugger;
var gridElement = $("#empresas_personas"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
</script>
But in this case the height of the parent's div, it's completely ignored:
If i set the height to 316px, but i execute the javascript on document ready, it still appear a white band, and the scrollbar is too big:

Answer 1

It's been almost 3 years since the function your are using for the setting the height has been written. Since then, some DOM elements has been added to the grid and I had to review some part of the logic make sure to consider those new elements in the calculation and their state (because some of them may be hidden):
kendo.ui.Grid.prototype.redraw = function () {
var jqElement = this.element;
var gridHeight = jqElement.innerHeight();
var dataArea = jqElement.find(".k-grid-content");
var otherElements = jqElement.children().not(".k-grid-content");
var otherElementsHeight = 0;
otherElements.each(function (index, otherElement) {
otherElementsHeight += $(otherElement).is(':visible') ? $(otherElement).outerHeight() : 0;
});
dataArea.height(gridHeight - otherElementsHeight);
};
Actually, the code above is an extension to the kendoGrid object and it assumes you have already set the height of the root element. Once the height is set, you can call the redraw function like this: $("#YourGrid").data("kendoGrid").redraw