Problem with Select control in ClientTemplate

[Mike]

I'm trying to put a select control in a grid column using ClientTemplate. The select control shows in the grid column, and I can select a value from the control, but after I select the value, the select control disappears from the cell and the value from the select option (i.e. the ID) appears in the cell. When I click off of the cell, the select control reappears, and the value selected is the original value, not the value I had just selected.

I'm probably missing some script, e.g. onchange script for the select control. Can someone tell me what I'm missing?

Here's the grid (with some columns omitted):

@(Html.Kendo().Grid(Model.MatrixLines)
      .Name("Matrix")
      .ToolBar(tools => tools.Create().Text("Add new Matrix"))
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
      .Columns(columns =>
      {
   columns.Bound(p => p.TaxabilityId).ClientTemplate(
     "#= taxabilityDropdown(data) #" +
     "<input type='hidden' name='MatrixLines[#= index(data)#].TaxabilityId' value='#= TaxabilityId #' />"
   ).Title("Trans Code").Width(40);
      })
      .DataSource(dataSource => dataSource.Ajax()
    .Model(model =>
    {
        model.Id(p => p.Id);
        model.Field(p => p.Id).Editable(false);
    })
    .ServerOperation(false)
      )
)

Here's the JavaScript function that returns the select control:   

function taxabilityDropdown(data) {        var selectControl = '<select>'
        var selected = '';        for (i = 0; i < taxabilityCodes.length; i++) {

            if (taxabilityCodes[i].id == data.TaxabilityId) {
                selected = ' selected';
            }
            else {
                selected = '';
            }
            selectControl += '<option value="' + taxabilityCodes[i].id + '"' + selected + '>' + taxabilityCodes[i].code + '</option>';
        }
        selectControl += '</select>';        return selectControl;
    }

Here's the JavaScript that generates the client-side array of objects, generated from the model:   

var taxabilityCodes = [
        @{string comma2 = "";}
        @for (int i = 0; i < Model.AllTaxabilities.Count; i++)
        {
            WriteLiteral(comma2);
            WriteLiteral("{id:'");
            WriteLiteral(Model.AllTaxabilities[i].Id);
            WriteLiteral("', code: '");
            @(Model.AllTaxabilities[i].Code);
            WriteLiteral("', description: '");
            @(Model.AllTaxabilities[i].Description);
            WriteLiteral("'}");                 
            comma2 = ", ";
        }
    ];

[Daniel]

Hello Mike,

The select will disappear because the grid is configured for InCell editing and clicking a cell will put it in edit mode. You could use a template column:

columns.Template(p => { }).ClientTemplate(
     "#= taxabilityDropdown(data) #" +
     "<input type='hidden' name='MatrixLines[#= index(data)#].TaxabilityId' value='#= TaxabilityId #' />"
   ).Title("Trans Code").Width(40);

or make the bound field not editable in order to avoid this.

.Model(model =>
{
    model.Id(p => p.Id);
    model.Field(p => p.Id).Editable(false);
    model.Field(p => p.TaxabilityId).Editable(false);
})

If the select element should be used to edit the grid TaxabilityId field then you should also update the model value when the selected item is changed e.g.

$(function () {
    $("#Matrix").on("change", "select", function () {
        var grid = $("#Matrix").data("kendoGrid");
        var select = $(this);
        var row = select.closest("tr");
        var dataItem = grid.dataItem(row);
        dataItem.set("TaxabilityId", select.val());
    });
});

Regards,
Daniel
Telerik