kendo grid height not 100% when page onload

Question

GRİD CODE

I run the program grid height too small but when I minimize or mazimize page grid cover page and normal height. How to grid height 100% when page load?

 <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>

MY SCREENSHOT

this is my screenshot when page loaded...

Have your tried adding a style? .HtmlAttributes(new { style = "height: 600px;" }) [See this as well](http://stackoverflow.com/questions/14078875/how-to-set-the-height-of-kendoui-grid-with-its-asp-mvc-complete-wrapper) — Steve Greene, Oct 21 '16 at 15:39
Obviously, you have some script that runs on window resize and does the job. Make it also run after Grid initialization. http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#set-100-height-and-auto-resize — dimodi, Oct 21 '16 at 19:11
I put the resize function in ondatabund function but it is not working. function ondatabund () { $(window).resize(function () { var gridElement = $("#DoktorGrid"), ... }); } @dimodi — user3452425, Oct 24 '16 at 06:38
when I put height: 600px; , my grid height increase but on small screens, I dont want to scroll on page @SteveGreene — user3452425, Oct 24 '16 at 06:46
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized — The Dread Pirate Stephen, Oct 26 '16 at 15:11

score 0 · Accepted Answer · answered Oct 25 '16 at 18:28

0

I put the resize function in ondatabund function but it is not working. function ondatabund () { $(window).resize(function () { var gridElement = $("#DoktorGrid"), ... }); }

You are attaching a window.resize handler in dataBound, but this does not mean it will be executed - it won't. So execute the Grid's resizing routine manually in dataBound as well.

answered Oct 25 '16 at 18:28

dimodi

3,969
1
13
23

1

Thank you @dimodi. I solve the problem thanks to you. I change window resize function little accoring to my metronic template and it works. – user3452425 Oct 26 '16 at 07:09

score 0 · Answer 2 · answered Oct 26 '16 at 07:12

I solve the problem give heigth to grid in databound function.

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 grid height not 100% when page onload

GRİD CODE

MY SCREENSHOT

2 Answers2