I am going to share the code sample for show/hide, enable/disable columns using kendo ui grid as given below.
Table of Contents
1. Kendo ui code sample using MVC 4
2. jQuery code sample
Kendo ui code sample using MVC 4
model
IEnumerable<PCX.Models.Contract>
@{
PCX.Models.UserSession userSession =
(PCX.Models.UserSession)Session["userSession"];
}
@(Html.Kendo().Grid(Model)
.Name("CSGrid")
.Pageable()
.Sortable()
.Resizable(e => e.Columns(true))
.Columns(columns =>
{
columns.Bound(clm =>
clm.CompanyName).Title("Company Name")
.Filterable(flt => flt.UI("CompanyFilter"));
columns.Bound(clm =>
clm.name).Title("Contract Name");
columns.Bound(clm =>
clm.installationdate).Title("IDate")
.Format("{0:dd
MMM yyyy}").Filterable(false);
columns.Bound(clm =>
clm.startdate).Title("SDate");
columns.Bound(clm =>
clm.enddate).Title("EndDate").Filterable(false);
columns.Template(clm =>
@Ajax.ActionLink("Renewal",
"Create", "ServiceContract",
new { ID = clm.ContractID },
new AjaxOptions { HttpMethod = "Post" },
new { @class = "btn
btn-primary" })).Width(100);
})
.Filterable(filterable => filterable
.Extra(false)
)
)
jQuery Code Sample
<script type="text/javascript">
$(document).ready(function () {
var role = '@User.IsInRole(userSession.TenantID
+ "_Admin")';
if (role) {
var grdView = $('#ContractExpiration').data('kendoGrid');
grdView.hideColumn("CompanyName"); //By Using Columns Name.
grdView.hideColumn(3);//By Using Index of columns.
}
});
</script>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|