Problem with DropDownList in a client template of a Grid after sorting by a column

[Radoslav]

Hello.
I use a grid. One of its columns is using client template which is building a DropDownList in the column. I have two problems:
1. When the user sorts the grid the grid is being reinitialized(refreshed) and therefore the client templates are being executed one more time. The input fields are shown, the js function attachDropDown() is executed but the DropDownList is not attached to the input fields. Have i made any mistake or there is more convenient way?
2. When the user selects something in some dropdowns and then he/she decides to sort the column the input data from these DropDownLists is lost because of the reinitialization of the grid.

This is the code for my view.

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string fundsJson = serializer.Serialize(Model.Funds);
}

<script id="dropdown-template" type="x-tmpl-mustache">
    <input type="hidden" name="[{{index}}].IndexInXml" value="{{indexInXml}}" />

    <input id="_{{index}}__FundId" name="[{{index}}].FundId" style="width: 300px" type="text" />
    {{attachComboBox}}
</script>

<script>
    var currentDropDownIndex = 0;
    var fundsJson =@Html.Raw(fundsJson)@(";")

        function attachDropDown(dropDownIndex) {
            jQuery("#_" + dropDownIndex + "__FundId").kendoDropDownList(
                    {
                        "dataSource": fundsJson,
                        "dataTextField": "FundName",
                        "height": 250,
                        "headerTemplate": "<div class=\"dropdown-header\"><span class=\"k-widget k-header\">Fund</span><span class=\"k-widget k-header\">Reg</span></div>",
                        "template": "<span class=\"k-state-default\">#: data.FundName #</span><span class=\"k-state-default\">#: data.Reg #</span>",
                        "valueTemplate": "<span>#:data.FundName#</span>",
                        "dataValueField": "FundId",
                    });
        }

    function getDropDown(indexInXml) {
        var view = {
            index: currentDropDownIndex, indexInXml: indexInXml,
            attachComboBox: function () {
                (function (currentDropDownIndex) {
                    jQuery(function () {
                        console.log(currentDropDownIndex);
                        attachDropDown(currentDropDownIndex);
                    });
                })(currentDropDownIndex);
            }
        };

        var template = $('#dropdown-template').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, view);

        currentDropDownIndex++;

        return rendered;
    }

    function init() {
        currentDropDownIndex = 0;
    }

</script>

@(Html.Kendo().Grid<Administration.ViewModels.UnmappedFundInfoViewModel>(Model.ImportedFundData)
               .Name("funds-mapping")
           .Sortable()
           .Columns(columns =>
           {
               columns.Bound(c => c.ImportedFundName)
               .Title("Imported fund name");
               columns.Bound(c => c.FundId).Title("Fund ID").Width(100);
               columns.Template(@<text> </text>).Title("Linked fund").ClientTemplate("#= getDropDown(data.IndexInXml)#");
           })
                           .Scrollable(x => x.Enabled(true).Height("250px"))
                           .DataSource(dataSource =>
                           dataSource.Ajax().ServerOperation(false)
                           )
                           .Resizable(resize => resize.Columns(true))
           )

<script>
    $(document).ready(function () {
        var grid = $("#funds-mapping").data("kendoGrid");
        grid.bind("dataBinding", function () {
            init();
        });
    });
</script>

[Daniel]

Hello Radoslav,

The dropdownlist will not be initialized because the code relies on the document ready handler to be triggered after the element is added to the DOM which will not be the case when the grid is rebound. You should use the dataBound event instead to initialize the dropdownlist:

function onDataBound() {
    var view = this.dataSource.view();
    for (var i = 0; i < view.length; i++) {
        attachDropDown(i);
    }
}

 In order for the value to be persisted you should use the dropdownlist change event to update the grid model:

function attachDropDown(dropDownIndex) {
    jQuery("#_" + dropDownIndex + "__FundId").kendoDropDownList(
    {
        ...
        change: function () {
            var grid = $("#funds-mapping").data("kendoGrid");
            var item = grid.dataItem(this.element.closest("tr"));
            item.set("FundId", this.value());
        }
    });
}

You should also set the value to the input or to the dropdownlist options in order for the corresponding item to be selected. 

Regards,
Daniel
Telerik