CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Kevin
Kevin

Reputation: 69

visible column depend on model field in kendo mvc

Controller 

 public PartialViewResult grid(int Id, Choices? field)
            {
      var model =  new Model
                {
                   Id = Id,
                    Choice = choice.HasValue ? section : choice.First
                };
                return PartialView("_Grid",  model);
            }

Model

public class Model
{
 public int Id { get; set; }
 public Choices? Choice { get; set; }
}

public enum Choices
{
    First=1,
    Second,
}

In View data shows but column doesnt dissapear when I change Choice. 

   @model Model
        @(Html.Kendo().Grid<Item>()
                  .Name("Grid")
                  .Columns(columns =>
                               {
     columns.Bound(c => c.f).HtmlAttributes(new { style = "font-weight:bold;" }).Hidden(Model.Section != Choices.Second);
                               } )

Markup for choice 

<select id="Choice" name="Choice">
    <option selected="selected" value="1"> First</option>
    <option value="2">Second</option>
</select>

event for choice 

$('#Choice').on('change', function () {
    var selectSection = $('#Choice').val();
    var orderId = $('#OrderId').val();
   $.post("@Url.Action("grid", "Project")"), { orderId: orderId, section: selectSection }, function (data) {
    });
}

How I can manage visible in column in kendo?

Upvotes: 1

Views: 1388

Answers (1)

layonez
layonez

Reputation: 1785

This will work only on initialize grid

.Hidden(Model.Section != Choices.Second)

You should use dataBound Event

.Events(events => events.DataBound("onDataBound"))

and define function:

<script type="text/javascript">   
function onDataBound(arg) {
    var grid = this.wrapper.data("kendoGrid");
    if(Model.Section != Choices.Second)
        grid.hideColumn("f");
    else
        grid.showColumn("f")
}
</script>

Some kendo docs about dataBound event

hide column on Choice change

$('#Choice').on('change', function () {
    var grid=$('grid')..data("kendoGrid");
    var selectSection = $('#Choice').val();
    var orderId = $('#OrderId').val();
    if(selectSection = 1)  
        grid.hideColumn("f");
    else
        grid.showColumn("f")
}

Upvotes: 2

Related Questions