CODEWITHSUNDEEP
c#asp.netmodel-view-controllerkendo-ui
Cameron
Cameron

Reputation: 11

Kendo ASP.NET MVC - Adding Dropdown to Grid

So I have been following a few tutorials as well as some examples on other SO posts on how to add a drop down list to my Kendo grid, though I've been having little success in getting it to work. My grid is as follows:

@(Html.Kendo().Grid<SampleUserModel>()
.Name("SearchResults")
.Deferred()
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("Search", "Users")
    )
    .PageSize(ViewConstants.PageSizeGridDefault)
)
.Columns(columns =>
{
    columns.Bound(e => e.Name).Title("Name");
    columns.Bound(c => c.MappedValue).EditorTemplateName("_MappingValueDropDown")
    .ClientTemplate("#:MappedValue#");
})
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Pageable(pageable => pageable.Refresh(true).PageSizes(true).PageSizes(ViewConstants.PageSizes).ButtonCount(5))
.Events(events => events.DataBound("sampleController.onDataBoundGrid"))
.AutoBind(false)
.HtmlAttributes(new { id = "userKendoGrid", style = "display:none;", data_form = "userMappingForm" }))

And my drop down list, which I placed in Views/Shared/EditorTemplates/_MappingValueDropDown.cshtml:

@using Kendo.Mvc.UI
@model string

@(Html.Kendo().DropDownListFor(o => o)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Route("GetUserMappingCodes");
        });
    })
    .OptionLabel("[Select]")
    .DataValueField("ID")
    .DataTextField("DisplayText")
    .Name("MappingDropdown"))

However, the dropdown never appears in the grid. The data in the grid is not populated until the user populates search filters and clicks a search button, so I'm not sure if this is part of the issue? I can't find anything different in what other people are doing so I'm baffled as to what I'm doing wrong. I have a breakpoint in the controller action the dropdown calls but it is never hit, it feels like the template isn't even being rendered.

Upvotes: 0

Views: 1217

Answers (1)

Cameron
Cameron

Reputation: 11

I figured out the cause, my grid was missing Editable and Model configurations. I updated my grid to add the following and the dropdowns work now. Making the grid editable:

    .Editable(editabe => editabe.Mode(GridEditMode.InCell))

And the adding the model call in DataSource:

.Model(model =>
    {
        model.Id(o => o.ID);
        model.Field(d => d.Name).Editable(false);
        model.Field(d => d.MappedValue);
    }

Upvotes: 1

Related Questions