This is a migrated thread and some comments may be shown as answers.

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

1 Answer 220 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Radoslav
Top achievements
Rank 1
Radoslav asked on 09 Feb 2015, 09:27 AM
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>

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 11 Feb 2015, 09:24 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
DropDownList
Asked by
Radoslav
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or