Kendo grid pagination into custom wrapper

Question

It is my kendo grid and i need to wrap pagination buttons into my custom wrapper, named

var grid = $("#taskTableKendo").kendoGrid({
        dataSource: tasksData,
        sortable: true,
        scrollable: false,
        autoBind: false,
        pageable: {
            refresh: true,
            pageSizes: [20, 50, 100]
        },
        dataBound: tasksDataBound,
        columns: [
            { field: "Responsibility_Code", title: " ", width: 30, encoded: false, template: '<span class="responsibility type#=Responsibility_Code#" title="#=Responsibility_Description#"></span>' },
            { field: "TaskRef", title: "Task Ref", encoded: false },
            { field: "Owner_FullName", title: "Owner", width: 80, template: "<span class='usercell'>#=Owner_FullName#</span>" },
            { field: "Property_PropertyRef", title: "Property Ref" },
            { field: "Property_Name", title: "Property Name" },
            { field: "Property_City", title: "City" },
            { field: "Property_Country_Name", title: "Country" },
            { field: "JobType_Name", title: "Job Type",width:700 },
            { field: "TaskStatus", title: "Status" },
            { field: "DueDate", title: "Due" },
            { field: "DateLogged", title: "DateLogged", hidden: true },
            { field: "Comments", hidden: true },
            { field: "Documents", hidden: true },
            {
                command: [{ text: "Click here to add a comment to this task", className: "addComment", click: addCommentCommand, template: '<div class="dropdown pull-right"><button class="btn btn-link dropdown-toggle text-green-lime" type="button" id="linkDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Actions <span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="linkDropdown"><li> <a href="" class="k-button k-button-icontext addComment k-grid-Clickheretoaddacommenttothistask" title="Click here to add a comment to this task"><span class="CommentsNumbers"></span></a></li>' },
                    { text: "Click here to add a document to this task", className: "addFile", click: documentCommand, template: '<li><a href="" class="k-button k-button-icontext addFile k-grid-Clickheretoaddadocumenttothistask" title="Click here to add a document to this task"><span class="DocumentsNumbers"></span></a> </li>' },
                    { text: "Click here to reallocate this task to a different person", className: "reallocate", data: { field: "Id" }, click: reallocateCommand },
                    { text: "Click here to close this task", className: "closeTask", click: completeTaskCommand },
                    { text: "Click here to view and edit this task", className: "viewTask", click: editTaskCommand, template: ' </ul>  </div>'}
                ],
                title: " ",
                width: 185 

            }
        ]
    });

I just need to change, kendo's go to previous page, go to next page buttons to custom ones created by me in html.

Answer 1

I've found solution, just for changing prev/next buttons you can use

  pageable: {
        previousNext: true,
        messages: {
            display: "{0}-{1} of {2} total tasks",
            select: "test",
            empty: "No tasks to display",
            first: "«",
            last: "»",
            next: "›",
            previous: "‹"
        },

I've searched all stack overflow, but haven't found correct answer for this.

Answer 2

It is possible to modify the HTML rendering of the Grid pager inside a setTimeout block (no timeout value is required) in the Grid's dataBound event.