如何將多個命令按鈕放入Kendo網格中的一個拆分按鈕下拉菜單中？

Question

我是Kendo UI和Bootstrap的初學者。

我目前的問題是：我有一個包含四個自定義命令按鈕（檢查配置文件，聯繫人，編輯，刪除）的劍道網格。我想在一個Bootstrap拆分下拉按鈕（http://getbootstrap.com/components/#btn-dropdowns）中顯示這四個按鈕。按鈕本身應該是「檢查配置文件」，當我點擊小下拉框時，其他三個命令按鈕應該可用。

任何人都可以幫我解決這個問題嗎？

23/8/2016編輯：

這是我到目前爲止，但老實說，我不完全瞭解它，所以我不能夠改善它。

$('.profile-menu').each(function (i, e) { 
    var dropdownTemplate = "<div class='btn-group btn-group-xs'>" + 
           "<button type='button' class='btn btn-danger'> Check Profile </button>" + 
           "<button class='btn btn-danger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>" + 
            "<span class='caret'></span>" + 
           "</button>" + 
           "<ul class='profile-menu dropdown-menu' role='menu'>"; 
    var dropdownList = ""; 

    $('a', e).each(function (ind, elem) { 
     dropdownList = dropdownList + "<li><a href='#' class='" + $(this).attr("class") + "'>" + $(this).html() + "</a></li>"; 
    }); 

    dropdownTemplate = dropdownTemplate + dropdownList + "</ul></div>"; 
    $(this).html(dropdownTemplate); 
}); 

這裏的問題是下拉列表的風格與命令按鈕是內置在劍道網格，以便他們有默認的CSS按鈕的風格完全不同。此外，下拉按鈕（插入符號）以某種方式在「檢查配置文件」按鈕下。

需要修復的另一件事是「檢查配置文件」按鈕是無效的，但下拉列表中有四個項目，包括檢查配置文件，但我只需要下拉菜單中的其他三個命令，檢查配置文件應該轉到「檢查配置文件「按鈕。

Answer 1

使用命令列的模板。它應該是這樣的：

var $grid = $("#grid").kendoGrid({ 
    dataSource: { 
     type: "json", 
     transport: { 
      read: function (e) { 
       // Just an example 
       e.success({ 
        Items: [ 
         { 
          Id: 1, 
          Name: "Name1", 
          Surname: "Surname1" 
         }, 
         { 
          Id: 2, 
          Name: "Name2", 
          Surname: "Surname2" 
         } 
        ], 
        Total: 2 
       }); 
      } 
     }, 
     schema: { 
      data: "Items", 
      total: "Total", 
      model: { 
       id: "Id", 
       fields: { 
        Name: { type: "string" }, 
        Surname: { type: "string" } 
       } 
      }, 
     } 
    }, 
    pageable: { 
     pageSize: 10 
    }, 
    columns: [ 
     { field: "Id", hidden: true }, 
     { 
      field: "Name", 
      title: "Name", 
      width: 170, 
      headerAttributes: { 
       style: "font-weight: bold;" 
      } 
     }, 
     { 
      field: "Surname", 
      title: "Surname", 
      width: 170, 
      headerAttributes: { 
       style: "font-weight: bold;" 
      } 
     }, 
     { 
      command: [ { 
       template: 
       '<div class="btn-group">' + 
        '<button type="button" class="btn btn-primary">Check Profile</button>' + 
        '<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + 
         '<span class="caret"></span>' + 
         '<span class="sr-only">Toggle Dropdown</span>' + 
        '</button>' + 
        '<ul class="dropdown-menu">' + 
         '<li><a style="cursor:pointer">Contact</a></li>' + 
         '<li><a style="cursor:pointer">Edit</a></li>' + 
         '<li><a style="cursor:pointer">Delete</a></li>' + 
        '</ul>' + 
       '</div>' 
      }], 
      title: "Actions", 
      width: 50, 
      headerAttributes: { 
       style: "font-weight: bold;" 
      } 
     } 
    ] 
}).data("kendoGrid"); 

在你還可以設置CSS選擇器來操作按鈕的模板，然後點擊設置 - 處理他們。但是當你打開下拉菜單時，會出現細胞溢出的問題。爲了使工作組風格：

<style> 
    .k-grid td { 
     overflow: visible; 
     white-space: nowrap; 
    } 
    .k-grid tr { 
     height: 100px; 
    } 
</style> 

這裏是電網一個div：

<div id="example"> 
    <div id="grid"></div> 
</div> 

編輯： An image with the result of given code