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