Kendo editable grid, drop-down resets on click of add new row

See more:

Javascript

jQuery

AngularJs

Kendo

, +

I have a kendo editable grid, where I have a drop-down in one the column. On click of 'AddNew' the drop-down in the previous record gets empty. I have created DOJO where this issue can be reproduced. Please help. Any help would be highly appreciated.

DOJO link: [^]

What I have tried:

<div ng-controller="stockController">
    <br /><br />
    <div kendo-grid="stockGrid"
         options="stockGridOptions"></div>
</div>

<script>
    angularApp.controller('stockController', function ($scope, $http) {

        function readOnly(container, options) {
            container.removeClass("k-edit-cell");
            container.text(options.model.get(options.field));
        }

        $scope.stockGridOptions = {
            toolbar: ["create", "save", "cancel"],
            dataSource: {
                transport: {
                    create: {
                        url: "/Stock/InsertStockDetails",
                        type: "post",
                        complete: function (e) {
                            $scope.stockGrid.dataSource.data([]);
                            PopupSuccess(e.responseJSON.Message, 4000);
                        }
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            angular.forEach(options.models, function (value) {
                                value.Mfg_Dt = kendo.toString(value.Mfg_Dt, "s");
                                value.Exp_Dt = kendo.toString(value.Exp_Dt, "s");
                            })
                            return options;
                        }
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number", editable: false },
                            Product_Name: { type: "string", validation: { required: true } },
                            Product_Type: { editable: false, defaultValue: { Text: "None", Value: 0 } },
                            Batch_No: {type: "string", validation: {required: true}},
                            Mfg_Dt: { type: "date", validation: { required: true }, nullable: true },
                            Exp_Dt: { type: "date", validation: { required: true }, nullable: true },
                            Strip_No: { type: "number", validation: { required: true } },
                            Strip_Unit: { type: "number", validation: { required: true } },
                            Total: { type: "number" },
                        }
                    }
                },
                change: function (e) {
                    if (e.action === "itemchange" && e.field === "Strip_No" || e.field === "Strip_Unit") {
                        var totalValue = e.items[0].Strip_No * e.items[0].Strip_Unit;
                        e.items[0].set('Total', totalValue);
                    }
                }
            },
            autoBind: false,
            columns: [{
                field: "Product_Name",
                title: "Product Name"
            }, {
                field: "Product_Type",
                title: "Product Type",
                template: '<select kendo-drop-down-list k-options="typeOptions" style="width: 100%"></select>'
            },{
                field: "Batch_No",
                title: "Batch No"
            },{
                field: "Mfg_Dt",
                title: "Mfg Dt",
                format: "{0:dd-MM-yyyy}"
            },{
                field: "Exp_Dt",
                title: "Exp Dt",
                format: "{0:dd-MM-yyyy}"
            },{
                field: "Strip_No",
                title: "Number of Strip"
            },{
                field: "Strip_Unit",
                title: "Units in Strip"
            },{
                field: "Total",
                title: "Total",
                editor: readOnly
            }],
            editable: true
        };

        $scope.typeOptions = {
            dataSource: {
                transport: {
                    read: {
                        url: "/Stock/GetProductType",
                        type: "get",
                    }
                }
            },
            dataTextField: "Product_Type",
            dataValueField: "Id",
            optionLabel: "Select Type",
            select: function (e) {
                e.sender.$angular_scope.dataItem.Product_Type = e.dataItem.Id;
            }
        };

    });

</script>