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

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 - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions