Reference to Kendo UI (ASP.NET MVC) dropdown on a grid

Question

I am using ASP.NET MVC 3 with Kendo UI and Jquery.

This is similar to a previous question that I asked, but not the same.

I have a Kendo UI grid, there is a drop down on this grid. So each row has a drop down. I want to iterate through each row of the grid and set all of the values to a specified value. The Kendo drop down has methods that will allow me to get and set the values of the drop down, but I am having a problem getting a reference to the drop down so I can use those get and set methods (within the context of the grid).

Here is what my grid looks like:

Html.Kendo()
.Grid<MyProject.Models.Domain.Students>()
.Name("Students")
.Sortable(settings => settings.Enabled(false))
.Filterable(settings => settings.Enabled(false))
.Resizable(resizing => resizing.Columns(true))
.Scrollable(settings => settings.Enabled(true))     
.HtmlAttributes(new { style = "font-size: 85%;" })
.Columns(columns =>
    {
        columns.Bound(o => o.StudentId).Title("StudentId").Hidden();
        columns.Bound(o => o.Name).Title("Student Name").Width(200);
        columns.Bound(o => o.teacher).Title("Teacher")
            .ClientTemplate("#=data.teacher ? teacher.teacherName : ''#")
            .Width(150)
            .Filterable(false);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id(c => c.StudentId);
            model.Field(c => c.teacher);                                                       
        })
        .Events(events => events.Error("Field_onError"))
        .Read(read => read.Action("_AjaxGetFields", "Student"))
        .Update("_AjaxUpdateFields", "Student")
        .Destroy("_AjaxDelFields", "Student"))
        .Events(events => 
            events
                .DataBound("Fields_onDataBound")
                .Change("onFieldSelect")
                .Edit("onFieldEdit")
        )
        .ToolBar(commands =>
        {
            commands.Save().HtmlAttributes(new { id = "saveField" }); 
        })
        .Scrollable(scrollable => scrollable.Height("375px"))
        .Selectable()
        .Editable(editing =>
            editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell)
        ).Render();

Here is the template for the drop down column:

@(Html.Kendo().DropDownList()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.DataValueField("TeacherId")       
.DataTextField("TeacherName")
.DataSource(source =>
{
    source.Read(read =>
    {
        read
            .Action("_SelectTeacherList","Teacher")
            .Data("onTeacherDataBinding");
    })
    .ServerFiltering(true);
})
.Events(e => e           
    .Change("dropdownlist_change")
)

)

And here is where I iterate the rows of the grid in a jquery script:

$("#fieldDef tr:has(td)").each(function ()
{
     //HERE IS WHERE I WANT TO REFERENCE THE DROP DOWN FOR THE CURRENT GRID ROW
    // I WANT TO SET EACH DROPDOWN TO A SPECIFIED VALUE HERE
}

So how can I get a reference to this drop down within the grid? Once I get a reference, I can use all of the Kendo methods to set it up. Kendo documentation shows us how to get a reference to a drop down, but not when it is within a grid.

Atanas Korchev Atanas Korchev · Accepted Answer · 2014-02-07T11:03:10

You can use the edit event of the grid:

.Events(events => events.Edit("edit"))

<script>
function edit(e) {
 var ddl = e.container.find("[data-role=dropdownlist]").data("kendoDropDownList");
}
</script>

Reference to Kendo UI (ASP.NET MVC) dropdown on a grid

2 Answers