Kendo Grid's Inline Kendo Dropdown values not binding

[Kelum]

I'm just trying to create a kendo grid with an inline kendo dropdown. like the following

example 1

example 2

I keep Database Values like following

So, the SampleModel, I created like this, I just keep only TypeId in DB

public class SampleModel {
    public int Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }


    public int TypeId { get; set; }

    public string TypeName{ get; set; }

} public class ListItem
{
    public int Id { get; set; }
    public string Name { get; set; }
}

 

this is the grid code snippet that includes, EditorTemplate name

 

@(Html
                    .Kendo()
                    .Grid<SampleModel>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Name);
                        columns.Bound(e => e.TypeId).EditorTemplateName("Type").Title("Type").ClientTemplate("#:TypeName#");
                        columns.Bound(p => p.Description);

                        columns.Command(p =>
                        {

                            p.Edit();
                            p.Destroy();
                        });

                    })
                    .ToolBar(t =>
                    {
                        t.Create();
                    })

                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(m =>
                        {
                            m.Id(mr => mr.Id);

                        })
                        .Create(cr => cr.Action("Create", "Sample"))
                        .Read(read => read.Action("Read", "Sample"))
                        .Update(upd => upd.Action("Update", "Sample"))
                        .Destroy(dest => dest.Action("Delete", "Sample"))
                    )
        )

 

So this is my Editor template code snippet

@using System.Collections
@model System.Int32
@(Html.Kendo().DropDownList().BindTo((IEnumerable)ViewBag.Types).DataValueField("Id").DataTextField("Name").Name("TypeId"))

 

so I implement the code like following

public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {

        ViewBag.Types = GetTypes();
        var res = sampleService.GetDB_Data();

        return Json(res.Data.ToDataSourceResult(request));
    }

    public List<ListItem> GetTypes()
    {
        List<ListItem> types = new List<ListItem>();

        types.Add(new ListItem()
        {
            Id = 1,
            Name = "Good"
        }
        );
        types.Add(new ListItem()
        {
            Id = 2,
            Name = "Bad"
        }
        );
        return types;
    }

 

but this is not mapping or not loading the dropdowns as seen on these images
Not Mapping values as seen in this image,

Not even load kendo dropdown, in the backend I can see GetTypes() return values, but when it comes to frontend it's showing like this

 

Appreciate if can show the mistake or modification required for this :)

 

 

 

 

[Tsvetomir]

Hi Kelum,

I have ivestigated the provided code snippets and I have noticed that the editor is setup via the Name property. This might be causing the issue as the binder will modify the name to "TypeId.TypeId" that is invalid.

Set the following option and remove the Name property:

@(Html.Kendo().DropDownListFor(m=>m).BindTo((IEnumerable)ViewBag.Types).DataValueField("Id").DataTextField("Name"))

Give the suggestion above a try and let me know if the issue persists.

 

Kind regards,
Tsvetomir
Progress Telerik