Kendo UI grid dropdown and angular

Question

I try to setup custom dropdown in Kendo UI.

I have a reference to my issue.

http://dojo.telerik.com/aFIZa/13

My issue is that I do not know how I can setup the selected text in the template attribute? I want to show the text field but save the id as a value. And I do not want to use external datasource. I would like it as inline in the json.

The code is below:

 $scope.mainGridOptions = {
    dataSource: $scope.dataSource,
    pageable: true,
    height: 550,
    toolbar: ["create"],
    columns: [

      { field: "Category", title: "Category", width: "180px", 
       editor: function(container, options) {
    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"/>')
    .appendTo(container);

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

         , template:"selected text in the combo "
      }
  ], editable: true


}

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2015-05-12T18:46:09

Ok, this was a tough one, but I think I could achieve what you want, or at least I got closer:

$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:

data-bind="value:Category,events:{ change: onChange }" Look that I have added an events object in the bind, which I declare onChange as the change event handler. We'll talk about this in the 3rd item below;
For a complex template(with javascript code and logic) I created a script content and rendered it at the template property. The template is 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 simply check for the property OptionText in the model(dataSource's current item) and: if it exists, use it; else, use the default text. We'll talk about OptionText in the 3rd item, below;
Now, here I have added an edit event to the grid. In that event I created an observable object, where I define the onChange function handler. In that function I seek for the current dataSource(ds) and I add text of the selected item in the dropdownlist in it, as the property OptionText, which I use in the template above explained.

I hope this explains how it works(in fact I hate working with those binders and observables, but sometimes they are needed).

Good luck.

Kendo UI grid dropdown and angular

1 Answers