我有一些问题要将高度设置为剑道网格。我想要做的很简单。我希望网格填充它放置的所有div。
这是我的代码
<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>
然而它呈现如下:
你可以看到一个奇怪的白色乐队出现。
我尝试过telerik提供的解决方案:http://jsbin.com/yumexugo/1/edit?html,css,js,output改变我的代码:
//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>
如果我将高度设置为316px,但我在文档就绪时执行javascript,它仍然显示为白色条带,并且滚动条太大:
答案 0 :(得分:1)
自用于设置高度的功能以来已经差不多3年了。从那以后,一些DOM元素被添加到网格中,我不得不重新审视逻辑的某些部分,确保在计算中考虑这些新元素及其状态(因为其中一些可能是隐藏的):
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);
};
实际上,上面的代码是对kendoGrid对象的扩展,它假定您已经设置了根元素的高度。设置高度后,您可以调用redraw
函数,如下所示:$("#YourGrid").data("kendoGrid").redraw