Ajax Grid with custom template (template for kendo dropdown)

[sourabh]

Hi,
I have used Kendo ui ajax grid with custom template. Custom template enables dropdown list.

    <div class="upperBarType3">
        <div class="dataGrid">
            @(Html.Kendo().Grid(Model)
        .Name("alarGrid")
                .HtmlAttributes(new { style = "height:400px" })
                .Columns(columns =>
                {
                    columns.Bound(p => p.AlarmCode);
                    columns.Bound(p => p.AlarmName);
                    columns.Bound(p => p.DeviceClassification);
                   columns.Bound(p => p.PriorityList).ClientTemplate "<div class='TreeView' name='TreeView'></div>");
                })
                .Scrollable()
                .Pageable(p => p.PageSizes(true))
                .Sortable()
                .Events(e => e.DataBound("onDataBound"))
                .DataSource(datasource => datasource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>{model.Id(p => p.AlarmCode);})
                .Read(read => read.Action("AlarmConfiguration", "AlarmConfiguration"))
                )
                )
        </div>
    </div>
    
     <div class="btnBar" id="btnBarTabs">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="btnBarTbl">
<tr>
<td>
<input id="btnCancel" type="button" value="Cancel"  causesvalidation="false" />
<input type="submit" name="Submit" id="Submit" class="Submit"  value="Submit" onclick="index()"  />
                    <input type="hidden" id="priorityValue" name="priorityValue"/>
                    <input type="hidden" id="data" name="data"/>
</td>
</tr>
</table>
</div>

<script type="text/x-kendo-tmpl" id="template">
 <option id='${ID}'>${Name}
</option>
 </script>
 
<script>
    function onDataBound(e) {
        $("#alarGrid tbody tr .TreeView").each(function () {
        var currentDataItem = $("#alarGrid").data("kendoGrid").dataItem($(this).closest("tr"));
        $(this).kendoDropDownList({
                dataSource: {
                    data: currentDataItem.PriorityList
                },
                dataTextField: "Name",
                dataValueField: "Id"//,
                //template: kendo.template($("#template").html())
            })
        })
    }
    function index() {
        var data = $("#alarGrid").data("kendoGrid").dataSource.data().toJSON();
        var value = "";
        var count = $("form[id='AlarmConfigForm'] .dataGrid .k-grid-content span .k-input").length;
        for (i = 0; i < count; i++) {
            value = value +data[i].AlarmCode+";"+ $("form[id='AlarmConfigForm'] .dataGrid .k-grid-content span .k-input")[i].innerHTML + "+";
        }
        data = JSON.stringify({ 'data': data });
        $('#priorityValue').val(value);
        $('#data').val(data);
        return data;
    }
</script>


In the above code, if i click on pagination link or sort column then dropdownlist get reseted i.e. if i change value of dropdownlist and then click on say sort on column then dropdown list value get reseted. Also by exploring more on this, i find that this occur due to DataBound event is hitted every time. Is there any way to work on this.

Besides this i tried with Server editing, in that case, post back of page is done on every event like sorting,paging change click.

[Daniel]

Hello,

You could use the value configuration to set the value from the model when creating the dropdownlist and the dropdownlist change event to set it back to the model when the value has changed:

$("#alarGrid tbody tr .TreeView").each(function () {
    var currentDataItem = $("#alarGrid").data("kendoGrid").dataItem($(this).closest("tr"));
    $(this).kendoDropDownList({
        dataSource: {
            data: currentDataItem.PriorityList
        },
        dataTextField: "Name",
        value: currentDataItem.MyValueField,
        dataValueField: "Id",
        change: function(){
            currentDataItem.MyValueField = this.value();
        }
    })
})

Regards,
Daniel
the Telerik team