Kendo Grid重复值高亮及非弹窗错误提示实现求助

Hey there, let's tackle your two issues one by one — I’ve worked with Kendo Grid and ASP.NET MVC quite a bit, so I think I can help you get past this roadblock!

Absolutely, you can use a label instead of an alert. Here's how to set it up:

• Step 1: Add a hidden error label to your view
  Place this somewhere near your Kendo Grid (so users see it right next to the action that caused the error):

  <label id="duplicateErrorLabel" style="display: none; color: #dc3545; font-weight: bold; margin-bottom: 10px;"></label>
  

• Step 2: Update your Kendo Grid’s error event
  Replace the alert with code that updates and shows the label:

  $("#yourGridId").kendoGrid({
    // ... your existing grid configuration ...
    error: function(e) {
      // Stop the default alert from popping up
      e.preventDefault();
      // Grab the error message from your backend response
      var errorMessage = e.responseJSON.Errors;
      // Update the label text and make it visible
      $("#duplicateErrorLabel").text(errorMessage).show();
    }
  });
  

• When to hide the label?
  You’ll want to hide it whenever the user starts a new action that might fix the error:

  • When the user begins editing any cell (use the Grid’s edit event):

    edit: function(e) {
      $("#duplicateErrorLabel").hide();
    }
    

  • When the Grid finishes loading new data (use the dataBound event, e.g., after a successful save):

    dataBound: function(e) {
      $("#duplicateErrorLabel").hide();
    }
    

  • If your Grid has a "Cancel" button, you can also hide the label when that button is clicked.

To highlight the problematic cell and revert it when fixed, we’ll need a small backend tweak and some frontend CSS/JS:

• First, adjust your backend to return specific error details
  Right now your backend returns a generic error message. Let’s modify it to include the duplicate value, which helps frontend target the right cell:

  // Replace your current error return line with this:
  return this.Json(new DataSourceResult { 
    Errors = new { 
      ProviderTypeName = $"Provider type '{ProviderTypeMaster.ProviderTypeName}' already exists." 
    } 
  });
  

• Add a CSS class for highlighting
  Put this in your view’s <style> tag or your site’s CSS file:

  .duplicate-cell {
    background-color: #ffebee; /* Soft red background */
    border-color: #ef5350; /* Darker red border to make it stand out */
  }
  

• Modify the Grid’s error event to highlight the cell
  Update the error event code to find the duplicate cell and apply the CSS class:

  error: function(e) {
    e.preventDefault();
    var errorDetails = e.responseJSON.Errors;
    // Show the error label
    $("#duplicateErrorLabel").text(errorDetails.ProviderTypeName).show();
    
    // Find the currently edited row and target the ProviderTypeName cell
    var grid = this;
    var editedRow = grid.tbody.find(".k-edit-row");
    if (editedRow.length > 0) {
      var duplicateCell = editedRow.find("[data-field='ProviderTypeName']");
      duplicateCell.addClass("duplicate-cell");
    }
  }
  

• Restore the cell style when the user fixes the value
  Listen for changes in the problematic input field and remove the highlight class:

  edit: function(e) {
    // Hide the error label first
    $("#duplicateErrorLabel").hide();
    // Get the input element for ProviderTypeName
    var inputField = e.container.find("[name='ProviderTypeName']");
    // Remove the highlight when the user types a new value
    inputField.on("input", function() {
      $(this).closest("td").removeClass("duplicate-cell");
    });
  }
  

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