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>