python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

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"];

            .Resizable(e => e.Columns(true))
            .Columns(columns =>
                columns.Bound(clm => clm.CompanyName).Title("Company Name")
                        .Filterable(flt => flt.UI("CompanyFilter"));
                columns.Bound(clm =>"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

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.



Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions