Hey all I'm new to Kendo and I'm trying to fix my grid data in its spot and not move when I resize the browsers window. Currently when resizing it lower it starts cutting off the column names and the data below them. This is not the results I want.
I want to be able to resize it and the "table" grid stay the same size no matter what.
My .cshtml page code:
@(Html.Kendo().ToolBar().....
@(Html.Kendo().Grid < Demo.Tool.Web.Core.Entities.BatchItem > ()
.Name("batches")
.Columns(c => {
c.AutoGenerate(false);
c.Bound(b => b.Id).Visible(false).HeaderHtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
c.Bound(b => b.Description).Width("200").HeaderHtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
c.Bound(b => b.PercentageComplete).Width("200").HeaderHtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
})
/*Percentage Complete*/
.HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
})
.ClientTemplate("<div class='not-progress'>" +
"<div class='batch-not-progress'></div>" +
"<span>0%</span>" +
"</div>" +
"<div class='progress batch-progress'></div>")
.Width("200");
c.Bound(b => b.SubmissionTime).Format("{0:MM/dd/yyyy hh:mm:ss}")
/*Submission Time*/
.HeaderHtmlAttributes(new {
style = "text-align: center;"
})
.HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
})
.Width("200");
c.Bound(b => b.Status).ClientTemplate("#= BatchMonitor.getStatusTemplate(Status) #")
/*Status*/
.HeaderHtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
})
.Width("200");
c.Bound(b => b.Rank).Title("Priority").ClientTemplate("<span/>")
/*Priority*/
.HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
})
.HeaderHtmlAttributes(new {
style = "text-align: center;", @class = "batch-monitor-grid-batches-header"
})
.Filterable(false)
.Sortable(false)
.Width("200");
})
.HtmlAttributes(new {
@class = "batch-monitor-grid batch-monitor-detail-grid batch-monitor-grid-batches"
})
.ClientDetailTemplateId("grdBatchMonitorJobTemplate")
.AutoBind(false)
.DataSource(ds => {
ds.WebApi()
.ServerOperation(true)
.Model(m => {
m.Id(b => b.Id);
})
.Read(r => r.Url(string.Format("{0}://{1}/api/v1/jobbatch", HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host)).Type(HttpVerbs.Get)).PageSize(10);
})
.Events(e => e.DataBound("BatchMonitor.onDatabound")
.DetailExpand("BatchMonitor.onDetailViewExpand")
.DetailCollapse("BatchMonitor.onDetailViewCollapse")
.Change("BatchMonitor.onBatchGridChange"))
.Pageable(p => p.Refresh(true)
.PageSizes(new int[] {
5,
10,
25,
50,
100
})
.Numeric(true))
.Scrollable(s => s.Virtual(GridVirtualizationMode.Columns).Height("auto"))
.Resizable(r => r.Columns(true))
.Sortable(s => s.SortMode(GridSortMode.SingleColumn))
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.ColumnMenu(c => c.Columns(false))
.Filterable())
<script type = "text/kendo-tmpl" id = "grdBatchMonitorJobTemplate">
@(Html.Kendo().Grid < Demo.Tool.Web.Core.Entities.JobItem > ()
.Name("grdJobs_#=Id#")
.HtmlAttributes(new {
@class = "batch-monitor-grid batch-monitor-detail-grid batch-monitor-grid-no-alt-row-color"
})
.Columns(c => {
c.AutoGenerate(false);
c.Bound(j => j.Description).Width("200").HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
c.Bound(j => j.PercentageComplete).ClientTemplate("<div><div class='not-progress'><div class='job-not-progress'></div><span>0%</span></div><div class='progress job-progress'></div></div>")
.Width("200")
.HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
c.Bound(j => j.Id).Width("200").ClientTemplate("<span></span>");
c.Bound(j => j.Status).Width("200").ClientTemplate("\\#= BatchMonitor.getStatusTemplate(Status)\\#").HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
c.Bound(j => j.Rank).Width("200").HtmlAttributes(new {
style = "text-align: center; white-space: nowrap; table-layout: fixed;"
});
})
.Events(e => e.DataBound("BatchMonitor.onJobGridDatabound")
.Change("BatchMonitor.onJobGridChange")
.DetailCollapse("BatchMonitor.onJobGridDetailViewCollapse")
.DetailExpand("BatchMonitor.onJobGridDetailViewExpand"))
.ClientDetailTemplateId("grdBatchMonitorActionTemplate")
.DataSource(ds => ds.WebApi().Read(r => r.Url(string.Format("{0}://{1}/api/v1/jobbatch/jobs/#=Id#",
HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host)))
.PageSize(10))
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.ToClientTemplate())
</script>
<script type = "text/kendo-tmpl" id = "grdBatchMonitorActionTemplate">
@(Html.Kendo().Grid < Demo.Tool.Web.Core.Entities.ActionItem > ()
.Name("grdAction_#=Id#")
.HtmlAttributes(new {
@class = "batch-monitor-grid batch-monitor-grid-no-alt-row-color"
})
.Columns(c => {
c.Bound(a => a.Description).Width("200");
c.Bound(a => a.PercentageComplete).ClientTemplate("<div class='not-progress'><div class='action-not-progress'></div><span>0%</span></div><div class='progress action-progress'></div>").Width("100")
.Width("200")
.HtmlAttributes(new {
style = "text-align: center;"
});
c.Bound(a => a.Id).Width("200").ClientTemplate("<span></span>");
c.Bound(a => a.Status).Width("200").ClientTemplate("\\#= BatchMonitor.getStatusTemplate(Status) \\#");
c.Bound(a => a.ParentId).Width("200").ClientTemplate("<span/>");
})
.Events(e => e.DataBound("BatchMonitor.onActionGridDatabound")
.Change("BatchMonitor.onJobGridChange"))
.DataSource(ds => ds.WebApi()
.Read(r => r.Url(string.Format("{0}://{1}/api/v1/jobbatch/actions/#=Id#",
HttpContext.Current.Request.Url.Scheme, HttpContext.Current.Request.Url.Host))).PageSize(10))
.ToClientTemplate())
</script>
This is what the code above produces:
Now, oddly enough, if I manually size one of the column headers and then resize it seems to work just fine?
Am I missing a setting somewhere in order to correct this behavior?