Dropdownlist in a Grid using ajax binding.

[Stanley]

I'm asking this question again after spending additional hours trying to get this to work without success.   I have a Grid using Ajax binding to display a dropdown list of items in a grid from a collection in the model.    The items are on the server in a List<SomeItems> collection.      This list is not in the model the grid itself is bound to - it is coming from a separate source.    I'm really tired of mucking around with something that is very easy to do in every other tool kit I've ever used.   

My code currently looks like this.   I get no drop down list in my grid at all.  I get an edit box.

@(Html.Kendo().Grid<Models.AutomationDevicePartsMapping>()

       .Name("GridAutomationDevicePartsMapping")

       .Columns(columns =>

                    {

                        columns.Bound(p => p.QuantityMultiplier).Title("Quantity");

                        columns.Bound(s => s.PartNumberName)

                            .Width(300)

                            .ClientTemplate(Html.Kendo().DropDownList()

                                                .Name("PartNumberxyz")

                                                .Events(ev => ev.Change("AutomationDeviceMappingDDLChanged"))

                                                .BindTo(ViewBag.MeterParts)

                                                .DataTextField("Text")

                                                .DataValueField("Value")

                                                .HtmlAttributes(new {style = string.Format("width:{0}px", 200)}).ToClientTemplate()

                                                .ToHtmlString()

                            );

                    })

       .ToolBar(toolbar => toolbar.Create())

       .Editable(editable => editable.Mode(GridEditMode.InLine))

       .Pageable()

       .Sortable()

       .Scrollable()

       .Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))

       .DataSource(dataSource => dataSource

                                     .Ajax()

                                     .Model(model => { model.Id(p => p.AutomationDeviceId);

                                     model.Field(p => p.PartNumberName).Editable(false);

                                     })

                                     .Create(update => update.Action("CreateNewAutomationDevicePartsMap", "AutomationDevice").Data("AutomationDeviceID"))

                                     .Read(read => read.Action("GetAutomationDeviceMaps", "AutomationDevice").Data("AutomationDeviceID"))

                                     .Update(update => update.Action("UpdateAutomationDevicePartsMap", "AutomationDevice"))

                                     .PageSize(50)

       )

 

       )

[Vladimir Iliev]

Hi Stanley,

You should use the KendoUI Grid ForeignKeyColumn functionality in your case. Such implementation can be:

@(Html.Kendo().Grid<Models.AutomationDevicePartsMapping>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.QuantityMultiplier).Title("Quantity");
        columns.ForeignKey(p => p.PartNumberName, (System.Collections.IEnumerable)ViewData["MeterParts"], "PartNumberName", "PartNumberName");

Also please note that you can view the source code of the ForeignKeyColumn demo using the drop-down menu "SELECT SOURCE FILE" (please see the attached screen-shot) to select the "foreignkeycolumn.cshtml" source. 

Kind Regards,
Vladimir Iliev
the Telerik team