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

Question

GRİD 代码

我运行程序网格高度太小但是当我最小化或最大化页面网格封面和正常高度时。如何在页面加载时将网格高度设置为 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

I put the resize function in ondatabund function but it is not working. function 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


}

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

kendo grid height not 100% when page onload

kendo-ui

kendo-grid

kendo-asp.net-mvc

GRİD 代码

我的截图