I have a grid nested within a tab control, with quite a few initially hidden columns.
This looks fine, until some of the hidden columns are shown, when most of the grid expands along with a horizontal scrollbar being shown. However, the toolbar which has the Export To Excel button in it, remains the original width, giving a messy unprofessional look to the screen.
<div class="panel-body" style="font-size:0.85em;">
@(Html.Kendo().TabStrip()
.Name("tab")
.Items(t =>
{
t.Add().Text("Listing")
.Selected(true)
.Content(@<text>
@(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
()
.Name("Grid")
.Columns(col =>
{
col.Bound(o => o.RequestID).Title("Ref.");
col.Bound(o => o.Directorate).Title("Directorate");
col.Bound(o => o.RechargeToDirectorate).Title("Recharge Directorate").Hidden();
col.Bound(o => o.RequestingUser).Title("Requester");
col.Bound(o => o.Site).Title("Site").Hidden();
col.Bound(o => o.Location).Title("Location").Hidden();
col.Bound(o => o.CreationDate).Title("Requested").Format("{0:d}").Width(70);
col.Bound(o => o.SessionDate).Title("Session").Format("{0:d}").Width(70);
col.Bound(o => o.PlannedStart).Title("Start").Format("{0:t}").Hidden();
col.Bound(o => o.PlannedEnd).Title("End").Format("{0:t}").Hidden();
col.Bound(o => o.ReasonType).Title("Reason Type").Hidden();
col.Bound(o => o.MedicName).Title("Req. Practitioner");
col.Bound(o => o.SessionType).Title("Type");
col.Bound(o => o.PointOfDelivery).Title("PoD");
col.Bound(o => o.ForecastCost).Title("Forecast £").Format("{0:C}").Width(70);
col.Bound(o => o.ActualCost).Title("Actual £").Format("{0:C}").Hidden().Width(70);
col.Bound(o => o.PaymentAmount).Title("Payment").Format("{0:C}").Hidden();
//col.Bound(o => o.ApprovalStatus).Title("Status");
//col.Bound(o => o.PaymentStatus).Title("Pay Status");
col.Bound(o => o.ActualMedicName).Title("Actual Practitioner").Hidden();
col.Bound(o => o.ActualStart).Title("Start").Format("{0:t}").Hidden();
col.Bound(o => o.ActualEnd).Title("End").Format("{0:t}").Hidden();
col.Bound(o => o.RequestTypeDescription).Title("Pathway").Filterable(false).Sortable(false);
col.Bound(o => o.PaymentBatchID).Title("Batch ID").Hidden();
col.Bound(o => o.ApprovalStatusCode).Title("Status").ClientTemplate("<span title='#=TotalStatusText#' data-toggle='tooltip' data-placement='top' ><img alt='#=TotalStatusText#' src='" + Url.Content("~/Content/Images/") + "#=TotalStatusGlyph#' /></span>").Sortable(false).Filterable(false).Width(40);
//col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=showSubmit#'><button onclick='submitRequest(#=RequestID#);' class='btn btn-primary btn-sm'>Submit</button></span>");
col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=QueryButton#'><button class='btn btn-warning btn-xs xssBtn' onclick='manageQuery(#=RequestID#);'><span class='glyphicon glyphicon-warning-sign' data-toggle='tooltip' data-placement='top' title='Manage query'></span></button></span><span style='margin-left:2px;'><button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='View Form' onclick='qwikView(#=RequestID#);'><span class='glyphicon glyphicon-search'></span></button></span>").Sortable(false).Filterable(false).Width(60);
col.Bound(o => o.Backdated).Title("").ClientTemplate("<button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='Admin' onclick='admin(#=RequestID#);'><span class='glyphicon glyphicon-flash'></span></button>").Sortable(false).Filterable(false).Visible((bool)ViewBag.IsAdmin);
col.Bound(o => o.RequestID).Title("").ClientTemplate("#=FinanceQueryButtonCode#").Sortable(false).Filterable(false).Visible((bool)ViewBag.ShowQueryButton);
})
.ClientDetailTemplateId("subdetailsTemplate")
.Events(e => e.DataBound("onBound").DataBound("exportUpdate"))
.ToolBar(toolBar =>
toolBar.Custom()
.Text("Export To Excel")
.HtmlAttributes(new { id = "export" })
.Url(Url.Action("ExportData", "Enquiry", new { page = 1, pageSize = "~", filter = "~", sort = "~", directorateID = 0, tStatusCode = 0 }))
)
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(p => p.RequestID))
.PageSize(15)
.Read(rd => rd.Action("RD_Requests", "Enquiry").Data("gridFilter")
)
)
.Pageable(p => p.Refresh(true))
.Sortable()
.Filterable()
.ColumnMenu()
)
</text>);