KendoUI Grid自定义下拉框视图模式无文本显示问题求助

Hey Stefan, let's work through this Kendo UI Grid issue together—this is a common gotcha when dealing with foreign key values that only store IDs instead of nested objects!

Core Problem Breakdown #

The root issue here is that your Grid doesn’t know how to map the raw foreign key number (like Category: 1) to a human-readable text value when switching back to view mode. The Telerik example works because it uses nested objects with both ID and display text, but your data structure only holds the ID. The red dirty marker confirms the value is being updated, but there’s no logic to render the corresponding text.

Solution 1: Use Kendo’s Built-in ForeignKey Column (Recommended) #

Kendo Grid has a dedicated foreignKey column type designed exactly for this scenario—no custom editor required! It automatically handles rendering display text in view mode and a dropdown in edit mode. Here’s how to set it up:

// First, define your category data source (the options for the dropdown)
const categoryDataSource = new kendo.data.DataSource({
  data: [
    { CategoryID: 1, CategoryName: "Beverages" },
    { CategoryID: 2, CategoryName: "Condiments" },
    // Add other categories here
  ]
});

// Initialize the Grid with a foreignKey column
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName", title: "Product Name" },
    { 
      field: "Category", 
      title: "Category",
      foreignKey: true,
      values: categoryDataSource.data() // Link to your category options
    },
    // Add other columns...
  ],
  editable: "incell",
  dataSource: {
    data: [
      { ProductID: 1, ProductName: "Chai", Category: 1 },
      // Your main data here
    ],
    schema: {
      model: {
        fields: {
          Category: { type: "number" } // Ensure the foreign key is typed correctly
        }
      }
    }
  }
});

This will automatically:

• Show the CategoryName in view mode
• Render a dropdown with your category options in edit mode
• Handle the dirty marker and value persistence correctly

Solution 2: Fix Your Custom Editor with a Column Template #

If you need to stick with a custom editor, you’ll need to add a column template to render the display text in view mode, and ensure your editor properly updates the model.

1. Add a Template for View Mode
   This template looks up the corresponding text from your category data source using the stored ID:

   columns: [
     { 
       field: "Category", 
       title: "Category",
       template: function(dataItem) {
         // Find the matching category from your data source
         const category = categoryDataSource.get(dataItem.Category);
         // Return the name if found, otherwise an empty string
         return category ? category.CategoryName : "";
       },
       editor: function(container, options) {
         // Your custom dropdown editor code
         $('<input name="Category"/>')
           .appendTo(container)
           .kendoDropDownList({
             dataSource: categoryDataSource,
             dataTextField: "CategoryName",
             dataValueField: "CategoryID",
             select: function(e) {
               const selectedItem = this.dataItem(e.item.index());
               // Update the model with the selected ID (critical for persistence)
               options.model.set("Category", selectedItem.CategoryID);
             }
           });
       }
     }
   ]
   

2. Ensure Editor Binds Correctly
   Make sure your dropdown’s name attribute matches the field name (Category), so Kendo Grid can properly link the editor to the model. This should also fix the missing closeCell event trigger, as Grid will recognize when the edit is complete.

Quick Check: Verify Data Source Schema #

Double-check your main data source’s schema to ensure the Category field is defined as a number (matching the foreign key type). Mismatched types can cause unexpected rendering issues:

schema: {
  model: {
    fields: {
      Category: { type: "number" },
      ProductID: { type: "number" },
      ProductName: { type: "string" }
    }
  }
}

Either of these approaches should resolve the issue—you’ll see the selected category text in view mode while keeping the dirty marker functionality intact.

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