Kendo grid to add dropdownlist with data

See more:

grid

Kendo

Dear Sirs ,
Under MVC architecture , I put a kendo grid on view(.chtml) , and it can show data from database already. Now , I put dropdownlist into editable cell on grid , and , it can show up on grid already. But the dropdownlist can not show data from database.

Please give a guide.

Thanks.

Keny

What I have tried:

.................

<div class="asrsPanelBody" style="margin-top: 5px; padding: 10px">
    <div id="holidayShiftgrid"></div>
</div>

<div class="toolbar">
    <button id="btnSave">Save</button>
</div>


    <input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_01' data-bind='value:OFFICIAL_SHIFT_CODE' data-role='dropdownlist' data-source='options' data-text-field='Text' data-value-field='Value' />


    <input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_02' data-bind='value:LEAVE_SHIFT_CODE' data-role='dropdownlist' data-source='options1' data-text-field='Text1' data-value-field='Value1' />


    <input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_03' data-bind='value:NATIONAL_SHIFT_CODE' data-role='dropdownlist' data-source='options2' data-text-field='Text2' data-value-field='Value2' />

    
        $(document).ready(function () {
            var options = [{ Text: "OFFICIAL_SHIFT_DISPLAY", Value: "OFFICIAL_SHIFT_CODE" }]
            var options1 = [{ Text1: "LEAVE_SHIFT_DISPLAY", Value1: "LEAVE_SHIFT_CODE" }]
            var options2 = [{ Text2: "NATIONAL_SHIFT_DISPLAY", Value2: "NATIONAL_SHIFT_CODE" }]
            $("#holidayShiftgrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            type: "POST",
                            url: '/Rule/getHolidayShift',
                            dataType: "json",
                            cache: false
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                BA_AIRPORT_CODE: { type: "string" },
                                SPD_EMPLOYEE_TYPE_CODE: { type: "number" },
                                SPD_EMPLOYEE_TYPE_NAME: { type: "string" },
                                OFFICIAL_SHIFT_DISPLAY: { type: "string" },
                                OFFICIAL_SHIFT_CODE: { type: "number" },
                                LEAVE_SHIFT_DISPLAY: { type: "string" },
                                LEAVE_SHIFT_CODE: { type: "number" },
                                NATIONAL_SHIFT_DISPLAY: { type: "string" },
                                NATIONAL_SHIFT_CODE: { type: "number" }
                            }
                        }
                    }
                },
                dataBound: function (e) {
                    var holidayShiftgrid = this;
                    this.tbody.find('tr').each(function () {
                        var item = holidayShiftgrid.dataItem(this);
                        kendo.bind(this, item);
                    })
                },
                toolbar: kendo.template($("#template").html()),
                columns: [
                {
                    field: "BA_AIRPORT_CODE",
                    title: "Airport",
                    editable: false
                }, {
                    field: "SPD_EMPLOYEE_TYPE_NAME",
                    title: "Role",
                    editable: false
                }, {
                    field: "OFFICIAL_SHIFT_DISPLAY",
                    title: "Official",
                    template: kendo.template($("#officalHolidayTemplate").html())
                }, {
                    field: "LEAVE_SHIFT_DISPLAY",
                    title: "Leave",
                    template: kendo.template($("#leaveHolidayTemplate").html())
                }, {
                    field: "NATIONAL_SHIFT_DISPLAY",
                    title: "National",
                    template: kendo.template($("#nationalHolidayTemplate").html())
                }]
            });

            $("#btnSave").kendoButton();
        });