剑道网格：如何设置高度

Question

我在将高度设置为剑道网格时遇到了一些问题。我想做的很简单。我希望网格填充它所在的所有 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>

但在这种情况下，父 div 的高度完全被忽略了：

如果我将高度设置为 316px，但我在准备好文档时执行了 javascript，它仍然会出现一个白带，并且滚动条太大：

Answer 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