Kendo UI grid dropdown and angular

Ok, this is tough, but I think I can achieve what you want, or at least I can get close:

$scope.mainGridOptions = 
{
    dataSource: $scope.dataSource,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [
    { 
        field: "Category", title: "Category", width: "180px", 
        editor: function(container, options) 
        {
            // #1
            var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category,events:{ change: onChange }"/>')
            .appendTo(container);

            $compile(editor)($scope);
            editor.css("visibility", "visible");
        }, 

        // #2
        template:kendo.template($("#column-template").html())
    }], 
    editable: true,

    // #3
    edit: function(e) 
    {
        var ko = kendo.observable(
        {
            onChange: function(e) 
            {
                var el = $(e.sender.element);
                var ddl = el.data("kendoDropDownList");
                var ds = $scope.dataSource.getByUid(el.closest("tr").data("uid"));

                ds.OptionText = ddl.text();
            },
        });

        var widget = $(e.container).find("input");
        kendo.bind(widget, ko);
    }
}});

demo .

In the code, you can notice 3 changes:

1. data-bind="value:Category,events:{ change: onChange }"It looks like I'm adding an object eventsto the binding , which I declare onChangeas an event handler. We will discuss this in the third item below;change

2. For complex templates (with javascript code and logic) I create script content and render it at that templateproperty . The template is like this:

   <script id="column-template" type="text/x-kendo-template">
       # if (data.hasOwnProperty('OptionText')) { #
       #: OptionText #
       # } else { #
       #: "selected text in the combo" #
       # } #
   </script>
   

   In the template I just check the property OptionTextin the model (the current item of the datasource) and then: if it exists, use it; otherwise, use the default text. We will OptionTextdiscuss in the third item below;

3. Now, here I add an event editto the grid . In that case I created an object in which the function handler was defined. In that function, I look for the current dataSource( ) and add the text of the selected item in the dropdown within it, as an attribute , which is used in the above template.observableonChangedsOptionText

I hope this explains how it works (actually, I hate using those binders and observables, but need them sometimes).

good luck.