This is a migrated thread and some comments may be shown as answers.

Kendo Grid's Inline Kendo Dropdown values not binding

1 Answer 117 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kelum
Top achievements
Rank 2
Kelum asked on 13 Feb 2021, 05:47 AM

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 :)

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 16 Feb 2021, 12:07 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Kelum
Top achievements
Rank 2
Answers by
Tsvetomir
Telerik team
Share this question
or