ASP.NET MVC中Kendo Telerik网格过滤时能否设置行背景色等条件格式化？

Hey there! Let's tackle your two Kendo Telerik Grid questions for ASP.NET MVC one by one:

1. Does Kendo Telerik Grid support conditional formatting during filtering? #

Absolutely! You’ve got a couple of reliable ways to handle conditional formatting—whether you want styles to apply before filtering (so they’re part of the content that gets filtered) or after filtering (to highlight matching results):

• Column Templates (Persistent Formatting): Define a column template that applies conditional styling directly. This formatting stays intact even after filtering, since the template re-renders for every visible row post-filter.
  Here’s how to implement it in ASP.NET MVC Razor syntax:

  @(Html.Kendo().Grid<YourViewModel>()
      .Name("statusGrid")
      .Columns(columns => {
          columns.Bound(p => p.OrderStatus)
              .Template(@<text>
                  <span class="@(item.OrderStatus == "Completed" ? "text-success" : "text-pending")">
                      @item.OrderStatus
                  </span>
              </text>);
      })
      .Filterable()
      .DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("GetOrders", "Order")))
  )
  

  Pair it with simple CSS for the styles:

  .text-success { color: #2ecc71; font-weight: 600; }
  .text-pending { color: #f39c12; }
  

• dataBound Event (Dynamic Post-Filter Formatting): If you need to adjust formatting after filtering runs (like highlighting rows that meet specific filtered criteria), use the dataBound event. It triggers every time the grid’s data updates—including right after a filter is applied.
  Example JavaScript:

  $(document).ready(function() {
      $("#statusGrid").kendoGrid({
          // Existing grid config
          dataBound: function(e) {
              const grid = this;
              grid.tbody.find("tr").each(function() {
                  const dataItem = grid.dataItem(this);
                  // Apply conditional formatting to cells based on filtered data
                  if (dataItem.DaysOverdue > 7) {
                      $(this).find("td:eq(3)").addClass("overdue-alert");
                  }
              });
          }
      });
  });
  

2. Can I modify row background color after applying filters in ASP.NET MVC? #

Definitely! The dataBound event is perfect for this scenario—it fires automatically whenever the grid refreshes its data, which includes after filter operations. Here’s a step-by-step implementation:

1. Set up the grid in your Razor view:

   @(Html.Kendo().Grid<OrderViewModel>()
       .Name("orderGrid")
       .Columns(columns => {
           columns.Bound(p => p.OrderId);
           columns.Bound(p => p.CustomerName);
           columns.Bound(p => p.TotalAmount);
       })
       .Filterable()
       .Events(events => events.DataBound("onOrderGridDataBound"))
       .DataSource(dataSource => dataSource
           .Ajax()
           .Read(read => read.Action("FetchOrders", "Order"))
       )
   )
   

2. Add the JavaScript function to handle row styling:

   function onOrderGridDataBound(e) {
       const grid = e.sender;
       const rows = grid.tbody.find("tr");
   
       rows.each(function() {
           const dataItem = grid.dataItem(this);
           // Adjust background color based on filtered TotalAmount values
           if (dataItem.TotalAmount > 1500) {
               $(this).addClass("high-value-row");
           } else if (dataItem.TotalAmount < 300) {
               $(this).addClass("low-value-row");
           } else {
               // Reset styles for rows that don't meet criteria
               $(this).removeClass("high-value-row low-value-row");
           }
       });
   }
   

3. Define the CSS classes for row backgrounds:

   .high-value-row {
       background-color: #e8f5e9 !important;
       /* !important ensures it overrides default grid styles */
   }
   .low-value-row {
       background-color: #ffebee !important;
   }
   

Pro Tip: #

Using CSS classes instead of inline styles makes your code cleaner and easier to maintain. The !important flag ensures your custom styles take precedence over the grid’s default row styling (like hover or selected states).

内容的提问来源于stack exchange，提问作者Magg