kendo grid height not 100% when page onload - kendo-ui

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

Answer 1

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.

Answer 2

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
}