用Kendo Grid中的按鈕添加一行

我現在正在嘗試在3個並排按鈕的頂部添加一行。我是否需要添加任何HTML或者是否通過js動態添加？有點像下面的網址，但它只是一個按鈕（可能的圖像），而不是一個下拉菜單（這就像編輯會控制，刪除和添加列按鈕）：用Kendo Grid中的按鈕添加一行

http://demos.kendoui.com/web/grid/toolbar-template.html

<!doctype html> 
<head> 
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
    <link href="styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script src="js/kendo.web.min.js" type="text/javascript"></script> 


</head> 
<body> 
<div id="grid"></div> 

<script> 
$(function(){ 

    var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }, 

    {patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }, 

    {patientName: "Jane Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }, 

    {patientName: "Bert Jones", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" }, 

    ]; 


    $("#grid").kendoGrid({ 
    columns: [{field: "patientName", title: "Patient Name"}, 
       {field: "MRN", title: "MRN"}, 
       {field: "account", title: "Account#"}, 
       {field: "dateOfBirth", title: "Date of Birth"}, 
       {field: "room", title: "Room"}, 
       {field: "bed", title: "Bed"}, 
       {field: "admitDate", title: "Admit Date" }], 
    dataSource: { 
     data:people 
    }, 

    height:300, 
    scrollable:true, 
    pageable: true, 
    pageSize: 2, 
    sortable: true     
    }); 

}); 
</script> 
</body> 
</html>

來源

2013-02-06 user763460

您可以添加一個toolbar部分，將kendoGrid的配置，並提供您想要添加按鈕的列表：



$("#grid").kendoGrid({ 
    columns: [{field: "patientName", title: "Patient Name"}, 
       {field: "MRN", title: "MRN"}, 
       {field: "account", title: "Account#"}, 
       {field: "dateOfBirth", title: "Date of Birth"}, 
       {field: "room", title: "Room"}, 
       {field: "bed", title: "Bed"}, 
       {field: "admitDate", title: "Admit Date" }], 

    toolbar: [ 
     {"name": "create"}, 
     {"name": "save"}, 
     {"name": "cancel"} 
    ], 

    dataSource: { 
     data:people 
    }, 

    height:300, 
    scrollable:true, 
    pageable: true, 
    pageSize: 2, 
    sortable: true     
    });

如果你不能得到的東西看你要使用工具欄的方式，你可以提供自己的HTML到這個選項：


toolbar: "<div>stuff here</div>"

有一個在文檔的詳細信息，在這裏：http://docs.kendoui.com/api/web/grid#toolbar-array

來源

2013-02-06 19:25:56

德里克，說我想三個圖像（這將是可點擊）添加到頂杆將作用於下面的數據右側 - 像更新，刪除，刷新 - 將通過模板完成嗎？不太確定我理解模板（還） – user763460

用Kendo Grid中的按鈕添加一行

回答

相關問題