隐藏并显示kendo ui网格列

时间:2013-03-11 05:36:47

标签: kendo-ui

有没有办法显示和隐藏coloumn onEdit和Add模式。如示例代码中所示。我想在添加和编辑模式下显示单价并在视图模式下隐藏。请指教。但以下将缩小网格。我想让它仍然是100%。如果用户点击取消,我应该使用什么事件。

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

2 个答案:

答案 0 :(得分:2)

实际上在popup模式下,原始grid的隐藏列未隐藏。如果您删除了onEdit功能,那就足够了。您甚至可以删除dataBound并在列初始化中将其设置为hidden

@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"))
    )
)

检入http://jsfiddle.net/OnaBai/B2Ses/Freight如何在列模式下隐藏但在弹出窗口中可见(用于编辑和创建)。

答案 1 :(得分:1)

对于具有.HtmlAttributes功能的其他网格属性(工具栏等),您可以使用:

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

在Controller中使用例如:

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