Kendo сетка с кнопкой в ​​заголовке для доступа к данным

Question

Мне нужно иметь кнопку в панели заголовка сетки кендо. Эта кнопка должна иметь возможность вызывать функцию (GetFoo) в объекте сетки.

UPDATE: Извините за путаницу, но я только хочу одна кнопка на строке заголовка таблицы с текстом «First Name», «Фамилия» и т.д ... Таким образом, мы должны были бы

---

[th] | Имя | Фамилия | Название | (звонки getFoo())

---

[td] | Joe |

[td] | Joe | Боб | Нет |

[Конец обновление]

Вот некоторые модифицированный код кендо UI

$(document).ready(function() { 
    var grid = $("#grid").kendoGrid({ 
    dataSource: { 
     pageSize: 20, 
     data: createRandomData(50) 
    }, 
    getFoo:function(){ 
     alert('bar'); 
    }, 
    pageable: true, 
    height: 550, 
    columns: [ 
     { field: "FirstName", title: "First Name", width: "140px" }, 
     { field: "LastName", title: "Last Name", width: "140px" }, 
     { field: "Title" }, 
     { field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }] 
    }).data("kendoGrid"); 
}); 

Любая помощь приветствуется!

Answer 1

Вы можете использовать событие DataBound и введите такую ​​кнопку:

$(document).ready(function() { 
var grid = $("#grid").kendoGrid({ 
dataSource: { 
    pageSize: 20, 
    data: createRandomData(50) 
}, 
getFoo:function(){ 
    alert('bar'); 
}, 
pageable: true, 
height: 550, 
dataBound: grid_dataBound, 
columns: [ 
    { field: "FirstName", title: "First Name", width: "140px" }, 
    { field: "LastName", title: "Last Name", width: "140px" }, 
    { field: "Title" }, 
    { field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }] 
}).data("kendoGrid"); 
}); 

function grid_dataBound(e) { 
var grid = this; 

var lastHeaderCell = grid.thead.find("th").last(); 
var button = $("<button value='foo'>sdf</button>"); 
lastHeaderCell.html(button); 
$(button).click(function(){ 
    grid.options.getFoo(); 
}); 
} 

Answer 2

Существует несколько способов добавления пользовательских кнопок в сетку Kendo. Можно было бы добавить его как элемент панели инструментов. Вы можете прочитать больше о реализации здесь Kendo custom command button in toolbars

.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>")) 

Следующая будет иметь один встроенный в строке. Вы можете прочитать, как реализовать, что один здесь Kendo grid custom commands

Но код, который вы хотите, чтобы обратить внимание на:

$(document).ready(function() { 
       var grid = $("#grid").kendoGrid({ 
        dataSource: { 
         pageSize: 20, 
         data: createRandomData(50) 
        }, 
        pageable: true, 
        height: 550, 
        columns: [ 
         { field: "FirstName", title: "First Name", width: "140px" }, 
         { field: "LastName", title: "Last Name", width: "140px" }, 
         { field: "Title" }, 
         { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }] 
       }).data("kendoGrid"); 

       wnd = $("#details") 
        .kendoWindow({ 
         title: "Customer Details", 
         modal: true, 
         visible: false, 
         resizable: false, 
         width: 300 
        }).data("kendoWindow"); 

       detailsTemplate = kendo.template($("#template").html()); 
      }); 

Более того эта линия:

{ command: { text: "View Details", click: showDetails } 

Вы также можете использовать шаблоны для настройки Решетки Кендо. Ознакомьтесь с этой ссылкой, чтобы узнать больше: Toolbar using templates

Надеюсь, что это поможет, и счастливое кодирование!

Answer 3

Обычно для этого используется шаблон Kendo.

в вашем JavaScript изменить эту линию:

{ field: " " title: " ", template: kendo.template($("#button-template").html()) } 

И в вашем HTML разметке добавить:

<script id="button-template" type="text/x-kendo-template"> 
    <button type="button" onClick='getFoo()' value='foo'> 
     Button Action 
    </button> 
</script> 

Или, вот как вы можете добавить одну кнопку в заголовок вашей сетки :

Создать шаблон кендо:

<script type="text/x-kendo-template" id="GridToolbar"> 
    <div class="toolbar"> 
     <button type="button" onClick='getFoo()' value='foo'>Button Action</button> 
    </div> 
</script> 

Установите это свойство на вашем кендо сетке в JS:

toolbar: kendo.template($("#GridToolbar").html()), 

Answer 4

я думаю, что вы можете использовать HeaderTemplate для этого проверки этого рабочего пример

dojo example

$("#grid").kendoGrid({ 
columns: [{ 
    field: "name", 
}, { 
    field: "FirstName", 
    title: "First Name", 
    width: "140px" 
}, { 
    field: "LastName", 
    title: "Last Name", 
    width: "140px" 
}, { 
    field: "Title", 
    headerTemplate: 'Title <button id="foo" onclick="foo()">foo</button>' 
}], 
dataSource: [{ 
    name: "Jane Doe" 
}, { 
    name: "John Doe" 
}]});