【问题标题】:c# html - hide kendo grid when emptyc# html - 为空时隐藏剑道网格
【发布时间】:2016-02-16 18:48:00
【问题描述】:

我的 html 代码中有以下剑道网格,如果没有数据,我会尝试隐藏它。我对如何执行此操作感到困惑,因为我使用的是数据源而不是迭代某些内容来添加数据。

 @(Html.Kendo().Grid<CustomerQuickHistory>()
                  .Name("TransactionDetails")
                  .Columns(cols => {
                      cols.Bound(c => c.DateOfItem).Format("{0:MM/dd/yyyy}");
                      cols.Bound(c => c.ProductName);
                      cols.Bound(c => c.Price);
                  })
                  .DataSource(ds => ds
                      .Ajax()
                      //.Group(g => g.Add(d => d.CustomerName))
                      .Sort(s => s.Add(ad => ad.DateOfItem).Descending())
                      .Read(r => r.Action("TransactionHistory_Read", "Customers", new { customerId = Model.CustomerId }))
                  )
                  )

【问题讨论】:

    标签: c# html kendo-ui kendo-grid kendo-asp.net-mvc


    【解决方案1】:

    如何使用 DataBound 事件处理程序来定义检查数据源绑定并显示或隐藏网格。

    这是一个类似的例子,但在这种情况下,它会在网格为空时显示一条消息。

    http://blog.falafel.com/displaying-message-kendo-ui-grid-empty/

    代码示例:

     @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.ProductName).Title("Product Name");
                columns.Bound(p => p.UnitPrice).Title("Unit Price");
                columns.Bound(p => p.UnitsInStock).Title("Units In Stock");
            })
            .Events(events => events.DataBound("onGridDataBound"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Products_Read", "Grid"))
             )
        )
    
    <script>
    
      function onGridDataBound(e){
        var grid = e.sender;
        
        if (grid.dataSource.total() == 0 ){
        //Hide grid
          $(grid).hide();
        }
        else{
          //Show grid
          $(grid).show();
        }
      }
      
    </script>

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-05
    • 2014-11-14
    • 1970-01-01
    • 2014-08-01
    • 2016-06-12
    • 2016-11-15
    • 1970-01-01
    相关资源
    最近更新 更多