Kendo UI 工具栏按钮
Posted
技术标签:
【中文标题】Kendo UI 工具栏按钮【英文标题】：Kendo UI toolbar buttons 【发布时间】：2013-01-30 09:54:08 【问题描述】：我正在使用 Kendo UI 网格，如下所示：
function refreshGrid()
$(".k-pager-refresh.k-link").click();
var editWindow;
var fields= FullName: type: "string", Email: type: "string", LogCreateDate: type: "date";
var gridColumns =
[
width: 90,
command:
name: "edit",
text: "Edit",
click: function(e)
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow(
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
);
editWindow.data("kendoWindow").center().open();
return false;
,
width: 90,
command:
name: "delete",
text: "Delete",
click: function(e)
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
$.ajax(
type: 'POST',
url: '@Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) refreshGrid(); ,
async: false
);
return false;
,
field: "FullName",
title: "Full Name",
type: "string"
,
field: "Email",
title: "Email",
type: "string"
,
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
];
//getSorts the columns of the grid
function getColumns()
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns)
if (!!gridColumns[col].field)
if (columns.length > 0)
columns += ";";
columns += gridColumns[col].field + "," + gridColumns[col].type;
return columns;
function getSorts(sortObject)
if (!(sortObject))
return "";
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0))
return "";
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr)
var type = "";
for (var col in gridColumns)
if (gridColumns[col].field === arr[index].field)
type = gridColumns[col].type;
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
return returnValue;
var grid;
$(function ()
$("#grid").kendoGrid(
dataSource:
transport:
read:
url: "mydatasourceurl",
type: "POST",
,
parameterMap: function (data, type)
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
,
schema:
fields: fields,
data: "Data",
total: "Total"
,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
,
toolbar: [
name: "Add",
text: "Add new record",
click: function(e)console.log("foo"); return false;
],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable:
refresh: true,
pageSizes: true
,
columns: gridColumns
);
grid = $("#grid").data("kendoGrid");
);
点击时不会触发我的创建工具栏操作。我该如何解决这个问题，Kendo UI 是否能够处理工具栏点击事件？我想出的最佳解决方案如下所示：
$(".k-button.k-button-icontext.k-grid-add").click(function ()
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow"))
grids[gridContainerID].addWindow.kendoWindow(
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
);
//Otherwise we just open it
else
grids[gridContainerID].addWindow.data("kendoWindow").open();
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
);
提前致谢。
【问题讨论】：
【参考方案1】：不要使用那个复杂的选择器，而是使用 Kendo UI 从name 创建的选择器：
toolbar: [
name: "Add",
text: "Add new record",
click: function(e)console.log("foo"); return false;
],
然后：
$(".k-grid-Add", "#grid").bind("click", function (ev)
// your code
alert("Hello");
);
【讨论】：
感谢您的回答，OnaBai，但是 $(".k-grid-Add", "#grid") 不正确，因为每当我在我的网格内单击时它都会运行我的事件显然不是目标。但是需要#grid 以确保我准确地运行与网格关联的事件，以防止存在两个网格并且两个工具栏项具有相同名称时出现问题。所以选择器应该是 $("#grid .k-grid-add")。如果您相应地编辑您的答案，我将接受您的答案作为正确答案。再次感谢您。 我认为我写的是正确的。我所做的 $(".k-grid-Add", "#grid") 与 $("#grid .k-grid-add") 基本相同，但使用不同的符号（使用上下文）。请检查这个api.jquery.com/jQuery/#jQuery1 非常感谢您的回答 @OnaBai，如果我想使用自己的按钮来调用网格的 addnew 弹出编辑器，我该怎么办？谢谢 @sendreams 不确定我是否理解您的问题。您想使用您的按钮打开默认弹出窗口吗？【参考方案2】：在 kendogrid 文档中，here 显示网格工具栏按钮（如 grid.colums.commands）没有单击配置。 要解决此问题，您可以参考以下步骤：
为工具栏创建模板
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
将模板应用到工具栏
toolbar:[text:"",template: kendo.template($("#grid_toolbar").html())]
为按钮添加事件监听器
$("#grid_toolbar_queryBtn").click(function(e)
console.log("[DEBUG MESSAGE] ", "query button clicked!");
);
【讨论】：
这里是支持这一点的实际点的链接：docs.telerik.com/kendo-ui/api/javascript/ui/…以上是关于Kendo UI 工具栏按钮的主要内容，如果未能解决你的问题，请参考以下文章