哥不靈程式日誌

Html顯示部份

​
​
主體Grid
<div id="Grid"></div>  
  
<div id="wnd">
        <div id="alldata"></div>
</div>

toolbar按鈕
<script id="custom" type="text/x-kendo-template">
    <a class="k-button" onclick="return show()">自訂按鍵名稱</a>
</script>

​

​

KendoGrid中 toolbar 使用的語法

 toolbar: [
            { template: kendo.template($("#custom").html()) }
          ],

要打開的視窗及顯示內容
 

<script>
    //建立kendoWindow
    function show(e) {
        var wnd = $("#wnd").kendoWindow({
            height: 400,
            width:400,
            modal: true,
            visible: false,
            resizable: false,
        }).data("kendoWindow").center();

        //取得要放到kendoWindow 的內容 kendoGrid
        var grid = $("#alldata").kendoGrid({
            dataSource: {
                dataType: "json",
                transport: {
                    read: {
                        url:
                    },
                },
                schema:
                    {
                        data: "Data",
                        total: "Total",
                        model: {
                            id: "ID",
                            fields: {
                                Name: { type: "string" },
                            }
                        }
                    },
                pageSize: 20
            },
            height: 550,
            pageable: {  refresh: true, pageSizes: true,
                messages: { display: "{0}到{1}筆  總計{2}筆", itemsPerPage: "筆每頁" }
            },
            toolbar: [
                { name: "create", text: "新棧點" }
            ],
            columns: [
                { field: "Name", title: "名稱", width: "100px" },
            ],
        }).data("kendoGrid");

        //應用啟動事件, 僅在動畫播放結束後引發
        wnd.one("activate", function () { grid.resize(); });

        //打開kendoWindow
        wnd.center().open();
    }