Kendo UI Grid弹窗下拉列表选中值不显示问题求助

Hey there! I see the problem with your Kendo UI Grid's genre dropdown not showing the pre-selected value when you open the edit popup. Let's break down what's going wrong and fix it step by step.

What's Causing the Issue? #

Looking at your genresDropDownEditor function, there are two key mismatches:

• Your DropDownList uses dataValueField: "Id", which means it uses the genre's ID to match and set the selected item. But you're trying to set the value to options.model.Genre.Title (the display text) instead of the corresponding ID.
• The input's name attribute is set to options.field (which is Genre.Title), but we need to bind the dropdown to the Genre.Id property so the selected ID is correctly sent back to your API when saving.

The Fixed Solution #

Here's the updated genresDropDownEditor function that addresses both issues:

function genresDropDownEditor(container, options) {
  // Get the current genre from the model to avoid repeated references
  const currentGenre = options.model.Genre;
  
  $('<input required name="Genre.Id"/>')
    .appendTo(container)
    .kendoDropDownList({
      autoBind: true,
      dataTextField: "Title",
      dataValueField: "Id",
      dataSource: {
        transport: {
          read: "http://localhost:62954/api/genres"
        }
      },
      // Set value to the genre's ID (matches dataValueField) instead of title
      value: currentGenre ? currentGenre.Id : null
    });
}

Key Changes Explained #

• Updated Input Name: Changed name="' + options.field + '" to name="Genre.Id" so the dropdown's selected ID is bound to the correct property in your model, ensuring proper data submission to your backend.
• Correct Value Binding: Now we use currentGenre.Id (instead of Title) to match the DropDownList's dataValueField, which tells Kendo exactly which existing genre item should be pre-selected.
• Null Safety: Added a check for currentGenre to avoid errors if the movie doesn't have an assigned genre yet.

Bonus: Grid Display Remains Correct #

Your Grid column is already set to field: "Genre.Title", which will continue to show the genre's display text correctly in the grid rows—no changes needed there!

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