CODEWITHSUNDEEP
kendo-ui
Spidey
Spidey

Reputation: 1613

Hide and show kendo ui grid column

Is there any way to display and hide coloumn onEdit and Add mode. As display in the sample code. I want to display Unit Price on add and edit mode and hide in view mode. Please advise. But the following will shrink the grid. i want to make it still 100%. What event should i use if the user click cancel.

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);

    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid"))
    )
     .Events(ev => ev.DataBound("onDataBound").Edit("onEdit"))
)


<script type="text/javascript">

function onEdit(e) {
var grid = $('#Product').data('kendoGrid');
        if (!e.model.isNew()) {
            grid.showColumn(2);
        }
        else
        {
            grid.showColumn(2);
        }

function onDataBound(e) {
    var grid = $('#Product').data('kendoGrid');
    grid.hideColumn(2);
</script>

Upvotes: 1

Views: 10363

Answers (2)

Jitka Darbie H&#252;bnerov&#225;
Jitka Darbie H&#252;bnerov&#225;

Reputation: 174

For other grid properties (toolbar etc.) with .HtmlAttributes function you can use:

.ToolBar(toolbar => toolbar.Custom().Name("New item").HtmlAttributes(style = ViewData["isThisPropertyAllowed"] }))

And in Controller use for example:

ViewData["isThisPropertyAllowed"] =  (User.IsInRole("ADMIN")?"":"display:none");

Upvotes: 1

OnaBai
OnaBai

Reputation: 40887

Actually in popup mode hidden columns of the original grid are not hidden. If you remove your onEdit function it should be enough. You might even remove the dataBound and set it to hidden in the column initialization:

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@(Html.Kendo().Grid(Model)    
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Hidden( true );

    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Grid"))
    )
)

Check in http://jsfiddle.net/OnaBai/B2Ses/ how the column Freight is hidden in column mode but visible on popup (both for editing and creation).

Upvotes: 3

Related Questions