Enable/Disable

Kendo Grid columns Hide Show, Enable/Disable

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

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

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^