Grid with Generic Dropdown Partial View

[Brian]

I am trying to do the following:

1. Use a Kendo UI Grid
2. Have columns that have dropdowns for editors
3. Have a re-usable method to implement those dropdowns
4. Send the values from the grid to the server when the form posts

Here's what I've done so far:
I have the grid showing on my page and editable.  I am able to send the values from the grid to the server with the form post (using a method similar to the one shown here: http://www.telerik.com/support/code-library/submit-form-containing-grid-along-with-other-input-elements)
I have looked at the custom editor examples here (http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html) and here (http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates) but this method involves creating a partial view for each dropdown.  I would prefer not to have to copy/paste/edit this code every time I need a new dropdown.  I think there should be a way to create a re-usable partial view that can perform this function.  Along these lines, I have created a small view model and partial view like what is mentioned here (https://stackoverflow.com/questions/11498215/asp-net-mvc-built-in-support-for-dropdownlist-editor-template).

Current status:
The dropdown appears in my grid as expected, and I can select a value.  I don't know how to get the text and value of the selected item so I can include them in the ClientTemplate, however.

My grid looks like this:

@(Html.Kendo().Grid<AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentSettingViewModel>()
                    .Name("DocumentSettings")
                    .Columns(columns => {
                            /*
                            columns.Bound(ds => ds.FormID)
                                .ClientTemplate("#= FormID #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].FormID' value='#= FormID #' />"
                                );
                            */
                            columns.Bound(ds => ds.FormsViewModel)
                                .ClientTemplate("#= 'test' #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].FormID' value='#:data.Value #' />"
                                );
                            columns.Bound(ds => ds.DocumentDateTypeName)
                                .ClientTemplate("#= DocumentDateTypeName #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].DocumentDateTypeName' value='#= DocumentDateTypeName #' />"
                                );
                            columns.Bound(ds => ds.RemoveIfOlderThanDays)
                                .ClientTemplate("#= RemoveIfOlderThanDays #" +
                                    "<input type='hidden' name='DocumentSettings[#= index(data)#].RemoveIfOlderThanDays' value='#= RemoveIfOlderThanDays #' />"
                                );
                            columns.Command(command => command.Destroy());
                        }
                    )
                    .ToolBar(toolbar => {
                        toolbar.Create();
                    })
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .ServerOperation(false)
                        .Events(events => events.Error("error_handler"))
                        .Model(model => model.Id(ds => ds.FormID))
                        .Read("RehireDocumentSetting_Editing_Read", "RehireSetup")
                    )
                )

The small viewmodel for my dropdown partial editor looks like this:

public class DropDownViewModel
    {
        public string SelectedID { get; set; }
        public IEnumerable<SelectListItem> Items { get; set; }
    }

My partial view looks for the dropdown editor looks like this:

@model AccountManagement.Business.ViewModels.Areas.DM.DropDownViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("Value")
    .DataTextField("Text")
    .BindTo(new SelectList(Model.Items, "Value", "Text", Model.SelectedID))
    .Value("SelectedID")
)

So my question is: is there a way to fix my ClientTemplate for the FormsViewModel column so that it displays the text of the selected item when not being edited (instead of 'text' as it does now) and submits the ID of the selected item to the server?  Alternatively, is there another way to do this that meets items 1-4 at the top of this post?

Any ideas are appreciated.

Thanks,
Brian

[Petur Subev]

Hello,

Inside the template you can use variables which are only part of your Grid model, no matter what kind of editor template you are using. In your case you are displaying "#= 'test' #", instead you should reference the text field.

e.g.

#= data.FormsViewModel.someText #

Once again, you cannot reference some variables from the editor template or any widgets that are used as editor template. Instead change your model so it has the text representation and with the DropDownList update the whole nested object (thus the text field will also be changed when you switch the values).

The following demo shows how the whole nested Category object is replaced with a new one:

http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html

Kind Regards,
Petur Subev
Telerik