Prevent ClientTemplate from overriding EditorTemplate in Grid Form

[Collin]

I have a Kendo UI ASP.NET MVC grid with CRUD operations that is being submitted as part of a form. In the following snippet, I am trying to display a column with an inline editable combobox (bound to user names and IDs) that displays a user's name but has a value of the user's ID.

Submits form properly, but displays the user IDs rather than names:

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewBag.Users, "SystemUserId", "Name").Title("User").EditorTemplateName("ComboBoxInForm").Visible(true).ClientTemplate("#= UserId #" +
"<input type='hidden' name='Users[#= index(data) #].UserId' value='#= UserId #' />"
);

ComboBoxInForm EditorTemplate:

@model object
@(
  Html.Kendo().ComboBoxFor(m => m)
  .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)

If I remove the ClientTemplate that provides the form input tag, the user's name is what is displayed rather than the value of the user's ID which is what I want. However, I need to submit it in batch as a part of a form, so I cannot remove the form input tag.

Fails to submit the form (no input tag), but displays the user names rather than IDs correctly:

columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewBag.Users, "SystemUserId", "Name").Title("User").EditorTemplateName("ComboBoxInForm").Visible(true);

What solution can I use to combine these two requirements so that the grid column displays names (but with values of IDs) and also provides the form input tag?

Thanks.

Note: Cross-posted from here.

[Boyan Dimitrov]

Hello Collin,

The reason for this behavior is because the ForeignKey builder does offer displaying the text associated with the number value as built-in functionality. Under the hood the column is bound to field that contains only numeric value. In order to show the text representation in your client template some custom logic should be written. I would give some guidelines on how to achieve this in case that this might be helpful for others who face same difficulty: 

    1. The value of the input element can be defined as function that accepts the actual field value as first parameter and the field name (static text) as second parameter. 

    2.. The Telerik MVC wrappers render the HTML and JavaScript needed to initialize a Kendo UI widget. Each foreign key column is simply array of key-value pairs stored in the columns.values. 

    3. Here is a function body with some comments that should help you to illustrate a simple idea of finding the text from the columns.values associated with a specific number (current field value) :

function textValue(value, fieldName) {
        //$("#gridNameId").data("kendoGrid").options.columns contains the columns defined in the grid's configuration
        // iterate through the array and check the .field value of each column to find a column field with same name as the field name parameter (second parameter)
        //each column which is defined as  "foreign key" does have values array. It contains key-value pairs of each values displayed in the combo box.
        // return the text value associated with same value as the first first argument (value)
        //return text associated with the value
    }

ClientTemplate("#= ProductID #" +
                    "<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= textValue(data.ProductID, \'ProductID\') #' />"

 

Regards,
Boyan Dimitrov
Telerik by Progress