可见列取决于 kendo mvc 中的模型字段

Question

控制器

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

型号

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

public enum Choices
{
    First=1,
    Second,
}

在视图中显示数据，但当我更改选择时列不会消失。

   @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);
                               } )

供选择的标记

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

选择活动

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

如何管理 kendo 列中的可见性？

Answer 1

这仅适用于初始化网格

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

你应该使用dataBound Event

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

并定义函数：

<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

在 Choice 更改时隐藏列

$('#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")
}