Kendo UI toolbar buttons

grid, kendo-grid, kendo-ui, telerik

Solution

Instead of using that complex selector use the one that Kendo UI creates from `name`:

toolbar: [
    {
        name: "Add",
        text: "Add new record",
        click: function(e){console.log("foo"); return false;}
    }
],

and then:

$(".k-grid-Add", "#grid").bind("click", function (ev) {
     // your code
     alert("Hello");
});

Problem

I am using a Kendo UI grid, which looks like this: ``` 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"); }); ``` My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this: ``` $(".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; }); ``` Thanks in advance.

Original source