Asp.Net 코어의 Kendo Grid의 DropDownList

Question

미리 정의 된 문화를 선택하기 위해 간단한 드롭 다운 목록을 구현해야합니다.

내 그리드 :/공유/EditorTemplates에서

@(Html.Kendo().Grid<NewLibrary.ViewModels.BookViewModel>() 
    .Name("booksGrid") 
    .Columns(column => 
    { 
     column.Bound(m => m.Name); 
     column.Bound(m => m.Culture).EditorTemplateName("CultureSelectorTemplate"); 
    }) 
    .ToolBar(toolBar => 
    { 
     toolBar.Create(); 
     toolBar.Save(); 
    }) 
    .Sortable() 
    .Pageable(pageable => pageable 
     .Refresh(true) 
     .PageSizes(true) 
     .ButtonCount(10) 
    ) 
    .HtmlAttributes(new { style = "border-style: double; border-width: 5px" }) 
    .Editable(e => e.Mode(GridEditMode.InCell)) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(20) 
     .ServerOperation(false) 
     .Model(m => 
     { 
      m.Id(f => f.BookId); 
      m.Field(f => f.Name); 
      m.Field(f => f.Culture); 
     }) 
     .Create(create => create.Action("CreateBooks", "Books")) 
     .Read(read => read.Action("ReadBooks", "Books")) 
     .Update(update => update.Action("UpdateBooks", "Books")) 
     .Destroy(destroy => destroy.Action("DeleteBooks", "Books")) 
    ) 
) 

내 편집기 템플릿 :

@(Html.Kendo().DropDownList() 
    .Name("Culture") 
    .DataTextField("Text") 
    .DataValueField("Value") 
    .BindTo(new List<SelectListItem>() 
    { 
     new SelectListItem() 
     { 
      Text = "English", 
      Value = "en" 
     }, 
     new SelectListItem() 
     { 
      Text = "Spanish", 
      Value = "es" 
     }, 
     new SelectListItem() 
     { 
      Text = "French", 
      Value = "fr" 
     } 
    }) 
) 

내 뷰 모델 :

public class BookViewModel 
{ 
    public string BookId { get; set; } 

    public string Name { get; set; } 

    public string Culture { get; set; } 
} 

문제는 그 내가 바인딩 할 수 없습니다입니다 모델에서 드롭 다운 목록의 값을 선택하고 목록에서 선택하고 다른 책을 편집하면 목록의 값이 사라집니다.

이 구현의 문제점은 무엇입니까? 어떻게하면 제대로 할 수 있습니까? 수십개의 동일한 대답을 검색하는 동안 아무 것도주지 않았습니다.

그렇다면 Asp.Net Core를 통해 Kendo Grid에서 DropDownList를 구현하는 올바른 방법은 무엇입니까?

Answer 1

그래야합니다.

내보기 :

@(Html.Kendo().Grid<BookViewModel>() 
     .Name("booksGrid") 
     .Columns(column => 
     { 
      column.Bound(m => m.Name); 
      column.Bound(m => m.Culture).ClientTemplate("#=Culture.NativeName#").EditorTemplateName("CultureSelectorTemplate"); 
     }) 
     .ToolBar(toolBar => 
     { 
      toolBar.Create(); 
      toolBar.Save(); 
     }) 
     .Sortable() 
     .Pageable(pageable => pageable 
      .Refresh(true) 
      .PageSizes(true) 
      .ButtonCount(10) 
     ) 
     .HtmlAttributes(new { style = "border-style: double; border-width: 5px" }) 
     .Editable(e => e.Mode(GridEditMode.InCell)) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(20) 
      .ServerOperation(false) 
      .Model(m => 
      { 
       m.Id(f => f.BookId); 
       m.Field(f => f.Name); 
       m.Field(f => f.Culture).DefaultValue(ViewData["defaultCulture"] as CultureViewModel);//new SelectListItem() { Text = "English", Value = "en" }); 
      }) 
      .Create(create => create.Action("CreateBooks", "Books")) 
      .Read(read => read.Action("ReadBooks", "Books")) 
      .Update(update => update.Action("UpdateBooks", "Books")) 
      .Destroy(destroy => destroy.Action("DeleteBooks", "Books")) 
     ) 
     .Events(e => e.DataBound("onGridDataBound")) 
    ) 

내 viewmodels :

public class BookViewModel 
    { 
     public string BookId { get; set; } 

     public string Name { get; set; } 

     public CultureViewModel Culture { get; set; } 
    } 

public class CultureViewModel 
    { 
     public string NativeName { get; set; } 

     public string TwoLetterCode { get; set; } 
    } 

내 편집기 템플릿 :

@model CultureViewModel 
@(Html.Kendo().DropDownListFor(m => m) 
    .DataTextField("NativeName") 
    .DataValueField("TwoLetterCode") 
    .BindTo(new List<CultureViewModel>() 
    { 
     new CultureViewModel() 
     { 
      NativeName = "English", 
      TwoLetterCode = "en" 
     }, 
     new CultureViewModel() 
     { 
      NativeName = "Spanish", 
      TwoLetterCode = "es" 
     }, 
     new CultureViewModel() 
     { 
      NativeName = "French", 
      TwoLetterCode = "fr" 
     } 
    }) 
) 

가 마지막에, 당신은 색인 방법에 ViewData 당신 디폴트 값을 채워야합니다, 또는 그리드의 DefaultValue에 직접 입력하십시오.