页面加载时剑道网格高度不是 100%

Question

网格代码

我运行的程序网格高度太小，但是当我最小化或最大化页面网格封面和正常高度时。页面加载时如何将网格高度设为 100%？

 <div class="portlet-body form" >
                @(Html.Kendo().Grid<DoktorModel>()
                      .Name("DoktorGrid")

                      .Columns(columns =>
                      {
                          columns.Bound(p => p.Fotograf).ClientTemplate(@"<img class='doktor_photo' src='" + Url.Content("~/Photo/#:data.Fotograf#") + "'/>").Width(100).Title("Fotoğraf").Filterable(false).IncludeInMenu(false);
                          columns.ForeignKey(p => p.AkademikUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.AkademikUnvan), "KodId", "Aciklama").Width(200).ClientGroupHeaderTemplate("Akademik Unvan: #= foreignAkademikValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.Bound(p => p.Ad).Width(200).ClientGroupHeaderTemplate("Ad: #= value # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.Bound(p => p.Soyad).Width(200).Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.AnadalUzmanlikId, Uzmanlik.GetUzmanlikList(), "UzmanlikId", "UzmanlikAdi").Width(215).ClientGroupHeaderTemplate("Anadal Uzmanlik: #:foreignAnadalValues[value]# (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.GorevKurumId, Kurum.GetKurumCombo(), "KurumId", "Ad").Width(215).ClientGroupHeaderTemplate("Gorevli Olduğu Kurum: #= foreignGorevKValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.KadroKurumId, Kurum.GetKurumCombo(), "KurumId", "Ad").Width(215).ClientGroupHeaderTemplate("Kadro Kurum: #= foreignKadroKValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.KadroUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.ÇalıştığıUnvan), "KodId", "Aciklama").Width(215).ClientGroupHeaderTemplate("Kadro Unvan: #= foreignKadroUValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.CalistigiUnvanKodId, Kod.GetKodList((int)Enums.KodGrup.ÇalıştığıUnvan), "KodId", "Aciklama").Width(180).ClientGroupHeaderTemplate("Çalıştığı Unvan: #= foreignCalisanUValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));
                          columns.ForeignKey(p => p.IdariGorevUnvan, Kod.GetKodList((int)Enums.KodGrup.IdariGorevUnvan), "KodId", "Aciklama").Width(180).ClientGroupHeaderTemplate("İdari Görev Unvan: #= foreignIdariGorevValues[value] # (Sayı: #= count#)").Filterable(ftb => ftb.Multi(true));

                          columns.Bound(p => p.DocentlikTarihi).Format("{0:dd/MM/yyyy}")
                          ;
                      })

                       .ToolBar(tools => tools.Excel().Text("Excel Dosyası Olarak Kaydet"))
                        .ToolBar(t=>t.Custom().Text("Grupları Aç").HtmlAttributes(new { id = "GrupAc" }))
                       .ToolBar(t=>t.Custom().Text("Grupları Kapat").HtmlAttributes(new { id = "GrupKapat", type = "button", onclick = "GrupKapat(); return false;" }))
                      //.Pageable(x => x.Info(true))
                      .Resizable(x => x.Columns(true))
                        .ColumnMenu()
                      .Selectable()
                      .Sortable()
                      .Scrollable(scrollable => scrollable.Virtual(true))
                       .Excel(excel => excel
                       .FileName("Kendo UI Grid Export.xlsx")

                       .AllPages(true)
                       .ProxyURL(Url.Action("Doktor_Excel_Export_Save", "Doktor"))
                         )
                        .Filterable(filterable => filterable
                              .Extra(false)
                              .Operators(operators => operators
                               .ForString(str => str.Clear()
                               .Contains("İçerir")

                          )).Mode(GridFilterMode.Row))
                          .Groupable()
                          .Events(events => events.DataBound("datachange")
        )
                      .DataSource(dataSource => dataSource
                          .Ajax()
                          .PageSize(100)

                          //.Batch(false)
                          .Events(e => e.Error("error_handler"))
                          .Read(read => read.Action("Doktor_Read", "Doktor").Type(HttpVerbs.Post))
                            //.PageSize(20)
                            .Aggregates(aggregates =>
                            {
                                aggregates.Add(p => p.AkademikUnvanKodId).Count();
                                aggregates.Add(p => p.Ad).Count();
                                aggregates.Add(p => p.AnadalUzmanlikId).Count();
                                aggregates.Add(p => p.GorevKurumId).Count();
                                aggregates.Add(p => p.KadroKurumId).Count();
                                aggregates.Add(p => p.CalistigiUnvanKodId).Count();
                                aggregates.Add(p => p.KadroUnvanKodId).Count();
                                aggregates.Add(p => p.IdariGorevUnvan).Count();
                            })
                          .Model(m =>
                          {
                              m.Id(p => p.DoktorId);
                              m.Field(p => p.TCKimlikNo);
                              m.Field(p => p.Ad);
                              m.Field(p => p.Soyad);
                              m.Field(p => p.AkademikUnvanKodId);
                              m.Field(p => p.DocentlikTarihi);
                              m.Field(p => p.AnadalUzmanlikId);
                              m.Field(p => p.AnadalUzmanlikId2);
                              m.Field(p => p.YandalUzmanlikId);
                              m.Field(p => p.YandalUzmanlikId2);
                              m.Field(p => p.GorevKurumId);
                              m.Field(p => p.KadroKurumId);
                              m.Field(p => p.KadroUnvanKodId);
                              m.Field(p => p.CalistigiUnvanKodId);
                              m.Field(p => p.CalistigiUnvanKodId2);
                              m.Field(p => p.DayanakDurumKodId);
                              m.Field(p => p.Fotograf);
                          })))

            </div>

我的屏幕截图

这是我加载页面时的截图...

Answer 1

我将 resize 函数放在 ondatabund 函数中，但它不起作用。函数 ondatabund () { $(window).resize(function () { var gridElement = $("#DoktorGrid"), ... }); }

您在dataBound 中附加了一个window.resize 处理程序，但这并不意味着它会被执行——它不会。所以也可以在dataBound 中手动执行 Grid 的大小调整例程。

Answer 2

我解决了在数据绑定函数中赋予网格高度的问题。

function databound() { 

     var gridElement = $("#DoktorGrid"),
            newHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;

        //otherElements.each(function () {
            otherElementsHeight += $(".page-content").outerHeight();
            console.log("outerHeight" + $(".page-content").outerHeight() + "newHeight" + newHeight)
        //});

            gridElement.children(".k-grid-content").height( otherElementsHeight-290 );//290 grid outher elements height


}