DropDownList in Kendo Grid in Asp.Net Core

Question

I need to implement simple dropdown list to choose predefined cultures.

My grid:

@(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"))
    )
)

My editor template in /Shared/EditorTemplates:

@(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"
        }
    })
)

My viewmodel:

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

    public string Name { get; set; }

    public string Culture { get; set; }
}

The problem is, that I can't bind values from dropdown list to model, when I choose them from list, and then going to edit another book, the value from list disappear.

What's the problem with this implementation, how can I do it correct, while googling dozens of same answers, gave me nothing at all.

So, what is the right way to implement DropDownList in Kendo Grid via Asp.Net Core?

Answer 1

Ok, how it must be.

My view:

@(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"))
    )

My 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; }
    }

My editor template:

@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"
        }
    })
)

At last, you must populate you default value in ViewData in Index method, or, in grid's DefaultValue directly.