Kendo Grid edit inline with dropdown list isn't show

Question

i have problem with my kendo grid edit inline using dropdownlist inside the grid, this is my ScreenShoot

screenShoot1->please look field "icon"

when i click the icon's field, the field is change to dropdown list like this screenshoot2 after i clicked the field icon

, so what must i do ,if i want the field icon is a dropdown list before clicked ??

this is my code:

$("#customers").kendoDropDownList({
        dataTextField: "pis_icon_url",
        dataValueField: "pis_icon_id",
        valueTemplate: '<span class="selected-value" style="background-image: url(\'#:pis_icon_url#\')"></span>',
        template: '<span class="k-state-default" style="background-image: url(\'#:pis_icon_url#\')"\></span>',
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "/api/icon-priority"
                }
            },
            schema:{
                data:'list'
            }
        },
        height: 400
    });

var dropdownlist = $("#customers").data("kendoDropDownList");

//in field: "pis_icon_id", please check "template", i already add property "id='customers'" in tag input but it doesn't work

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 550,
    columns: [
        { field:"pis_priority_name",title:"Priority Name", width: "180px"  },
        { field: "description", title: "Description", width: "380px" },
        { field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
            editor:categoryDropDownEditor

                // "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
        },
        { field: "pis_priority_color", title: "Color",
            width: "100px",
            editor: function (container, options) {
                $("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
                    .appendTo(container)
                    .attr("pis_priority_color", options.field)
                    .kendoColorPicker({
                        buttons: true

                    });
            },
            template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
        },
        { field: "is_default",
            title: "Default",
            width: "100px",
            template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
        },
        { field: "active",
            title:"Active",
            template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
            ,width: "130px"
        },
        { command: "destroy", title: " ", width: "150px" }],
    editable: {
        update:true
    }

Answer 1

I was able to get it working using a MVC wrapper and by following this post:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration

The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.

I tried implementing the same logic using the javascript implementation but could not get it working.