Question

我的html代码中有以下Kendo网格，如果没有数据，我试图隐藏它。我对如何做到这一点很困惑，因为我使用的是数据源，而不是通过迭代来添加数据。

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

Answer 1

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

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

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>

c＃html - 空时隐藏kendo网格

1 个答案: