Kendo UI toolbar buttons

Question

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.

Solution 1

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");
});

Solution 2

In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands. To solve this problem you can reference following steps:

1. create a template for toolbar

   <script id="grid_toolbar" type="text/x-kendo-template">
         <button class="k-button" id="grid_toolbar_queryBtn">Query</button>
   </script>
   

2. apply tempate to toolbar

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

3. add event listener to button

   $("#grid_toolbar_queryBtn").click(function(e) {  
       console.log("[DEBUG MESSAGE] ", "query button clicked!");
   });
   

Comments

[Lajos Arpad]

Thank you for your answer, OnaBai, but $(".k-grid-Add", "#grid") is not correct as it will always run my event whenever I click inside my grid which is obviously not the goal. But #grid is needed to make sure I run exactly the event associated with the grid, to prevent the problem when two grids are existent and two toolbar items have the same name. So the selector should be $("#grid .k-grid-add"). If you edit your answer accordingly I will accept your answer as the correct one. Thank you again.

[OnaBai]

I think that I wrote is correct. What I did $(".k-grid-Add", "#grid") is basically the same than $("#grid .k-grid-add") but using a different notation (using context). Please, check this api.jquery.com/jQuery/#jQuery1

[Lajos Arpad]

Thank you very much for your answer

[sendreams]

@OnaBai, if i want to use my own button to invoke the grid's addnew popup editor, how can i do? thanks

[OnaBai]

@sendreams not sure I understand your problem. Do you want to open default popup but using your button?

[sendreams]

@OnaBai, yes, and i found the answer: just invoke gird.addrow() .

[automagic]

Here is the link to the acutal spot supporting this: docs.telerik.com/kendo-ui/api/javascript/ui/…