能否在Kendo UI Grid行弹窗内添加文件附件？替换文件名显示为“file attachment”

Absolutely! You can definitely add a file attachment field to your Kendo UI Grid's row popup editor, and replace the dynamic filename with the fixed text "file attachment". Here's a step-by-step breakdown to make this work smoothly:

First, define your Grid's popup editor template to include a file input and a fixed display element. We'll use a custom template to control exactly what's shown:

<!-- Popup editor template -->
<script id="row-popup-template" type="text/x-kendo-template">
  <!-- Your existing form fields go here -->
  <div class="k-edit-label">
    <label for="attachment">Attachment</label>
  </div>
  <div class="k-edit-field">
    <input type="file" name="attachment" id="attachment-input" />
    <!-- Fixed text display -->
    <span class="file-label">file attachment</span>
  </div>
</script>

<!-- Grid initialization -->
<script>
$("#your-grid").kendoGrid({
  dataSource: yourDataSource,
  editable: {
    mode: "popup",
    template: kendo.template($("#row-popup-template").html())
  },
  columns: [
    // Your other columns
    { 
      field: "attachment", 
      title: "Attachment", 
      template: "<span>file attachment</span>" 
    }
  ]
});
</script>

We need to capture the selected file for upload, but keep the "file attachment" text visible no matter what file the user picks. Add this event listener:

$("#your-grid").on("change", "#attachment-input", function(e) {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    // Get the current editable data item to store the file
    const grid = $("#your-grid").data("kendoGrid");
    const dataItem = grid.editable.options.dataItem;
    
    // Store the file object for later upload
    dataItem.selectedAttachment = selectedFile;
    
    // Force the display text to stay fixed
    $(this).siblings(".file-label").text("file attachment");
  }
});

When the user saves the popup, we'll manually upload the file using FormData (since Kendo Grid's default save doesn't handle file uploads natively):

$("#your-grid").on("save", function(e) {
  const dataItem = e.model;
  
  // Check if a file was selected
  if (dataItem.selectedAttachment) {
    const formData = new FormData();
    formData.append("attachment", dataItem.selectedAttachment);
    // Add other form data you need to submit
    formData.append("recordId", dataItem.id);
    
    // Send the file to your server endpoint
    $.ajax({
      url: "/api/your-upload-endpoint",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        // Refresh the Grid after successful upload
        e.sender.dataSource.sync();
        alert("Attachment uploaded successfully!");
      },
      error: function(xhr) {
        console.error("Upload failed:", xhr);
        alert("There was an error uploading your attachment.");
      }
    });
    
    // Prevent the default Grid save behavior since we're handling upload manually
    e.preventDefault();
  }
});

Make sure the file input and display are reset every time the popup opens, even if a file was selected before:

$("#your-grid").on("edit", function(e) {
  $("#attachment-input").val("");
  $(".file-label").text("file attachment");
  // Clear the stored file from the data item
  e.model.selectedAttachment = null;
});

If you're using Kendo's built-in kendoUpload component instead of a native file input, you can customize its template to show the fixed text instead of filenames—just replace the file input with the Upload component and set its template to <span>file attachment</span>.

Let me know if you hit any roadblocks with this setup—I’m happy to help adjust it to fit your specific use case!

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