Kendo UI網格下拉列表和角度

Question

我嘗試在Kendo UI中設置自定義下拉菜單。

我有提到我的問題。

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

我的問題是我不知道如何在template屬性中設置所選文本？ 我想顯示文本字段，但將ID保存為值。 而且我不想使用外部數據源。 我希望它是json中的內聯。

代碼如下：

 $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


}

Answer 1

好的，這很艱難，但是我想我可以實現您想要的目標，或者至少我可以接近：

$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);
    }
}});

演示

在代碼中，您可以注意到3個變化：

1. data-bind="value:Category,events:{ change: onChange }"看來我已經在綁定中添加了一個events對象，我將onChange聲明為change事件處理程序。 我們將在下面的第三項中對此進行討論；

2. 對於復雜的模板（帶有javascript代碼和邏輯），我創建了腳本內容，並在template屬性處對其進行了呈現。 模板是這樣的：

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

   在模板中，我只需檢查模型（dataSource的當前項目）中的OptionText屬性OptionText ：如果存在，請使用它； 否則，請使用默認文本。 我們將在下面的第三項中討論OptionText 。

3. 現在，在這里我向網格添加了一個edit事件。 在那種情況下，我創建了一個observable對象，在其中定義了onChange函數處理程序。 在該函數中，我尋找當前的dataSource（ ds ），然后在其中的下拉列表中添加所選項目的文本，作為屬性OptionText ，該屬性在上述模板中使用。

我希望這能解釋它是如何工作的（實際上，我討厭使用那些活頁夾和可觀察物，但有時需要它們）。

祝好運。