How to add custom buttons to kendo grid toolbar

[Bala]

@(Html.Kendo().Grid<Models.LwNotificationModel>()
    .Name("notifyGridBoard")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate(
"<input type='checkbox' class='rowCheckBox' />"
).Title("<input type='checkbox' id='selAll' />");
columns.Bound(p => p.EventDate).ClientTemplate(
"#= invalidFilterInElapsedTime(ElapsedTime, EventDate) #"
).Title("DATE").Width(130);
columns.Bound(p => p.Description).ClientTemplate(
"<div style='float:left;text-align:left'>#=Description#</div>"
).Title("UPDATES");
columns.Bound(p => p.Type).Title("TYPE").ClientTemplate(
"#= getType(Type) #"
).Filterable(false).Width(70);
columns.Bound(p => p.ContainerId).Title("CONTAINER");
columns.Bound(p => p.TruckVisitAppointmentNumber).Title("APPT");
columns.Bound(p => p.Notes).Template(@<text></text>).ClientTemplate(
"# if(hasNotes) { #" +
"# if(IsNotesRead) { #" +
"<div><img id='img_#=Gkey#' src='#=getImgPath('icon_note.png')#' onclick='noteView(#=Gkey#)' /><div>" +
"# } else { #" +
"<div><img id='img_#=Gkey#' src='#=getImgPath('icon_note_new.png')#' onclick='noteView(#=Gkey#)' /><div>" +
"# } #" +
"# } else { #" +
"<div><img id='img_#=Gkey#' src='' onclick='noteView(#=Gkey#)' /><div>" +
"# } #"
).Title("NOTE");
})
.ColumnMenu()
.Sortable(sortable => sortable.AllowUnsort(true).SortMode(GridSortMode.MultipleColumn))
.Filterable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Reorderable(reorder => reorder.Columns(true))
.Events(e => e.DataBound("onDataBound")
.Change("onChange").DataBinding("onDataBinding"))
.Pageable(
pager => pager
.Input(true)
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(true)
.ButtonCount(5)
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("WrapperApptRead", "Notification")
)
.PageSize(20)
.ServerOperation(false)
.Model(model => model.Id(p => p.Gkey))
)
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
        <div id="notifyBoardToolbar" style="display: none;">
            <ul id="notifyGirdMenu">
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnMsgDel' name='btnMsgDel' onclick='msgDel()' value='Delete' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnMsgDelAll' name='btnMsgDelAll' onclick='msgDelAll()' value='Delete All' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px">
                        <input type='button' class='generalButton' id='btnAllRead' name='btnAllRead' onclick='msgAllRead()' value='Mark All as Read' />
                    </div>
                </li>
                <li>
                    <div style="padding-right:4px" id="id_menu_filter">
                        <input type='button' class='generalButton' value='Mark as...' />
                    </div>
                    <ul>
                        <li>
                            <a style="text-decoration:none;" onclick="msgRead()">Read</a>
                        </li>
                        <li>
                            <a style="text-decoration:none;" onclick="msgUnread()">Unread</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <div>
                        <input type='button' class='generalButton' id='txtExport' name='txtExport' onclick='exportAppt()' value='Export' />
                    </div>
                </li>
                <li style="width:400px">
                    <div id="catFilter" style="float:right">
                    </div>
                </li>
                <li style="float:right;border-right:0px">
                    <div>
                        <span class="k-icon helpcentericon" role="presentation" style="margin-top: 5px; margin-right: 3px; float: right; border-right: 0px">updatesGrid</span>
                    </div>
                </li>
            </ul>
        </div>
</text>);
})
    )

[Nikolay]

Hi Bala,

Custom HTML elements can be rendered in the toolbar template by specifying the ClientTemplateId that references the template itself. This is demonstrated in the following official demo:

• https://demos.telerik.com/aspnet-mvc/grid/toolbar-template

@(Html.Kendo().Grid<Student>()
        .Name("grid")
        .ToolBar(toolbar =>
        {
            toolbar.ClientTemplateId("GridToolbarTemplate");
        })
...

<script id="GridToolbarTemplate" type="text/x-kendo-template">
   @*your template*@
</script>

Furthermore, I have created a sample MVC Core project based on the provided snipet. Please find it attached to my reply.

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Bala]

Hi, thank you

[Lino]

Hi Nikolay, this is not working for me, or maybe I misunderstood how to correctly set the components.
I tried these two options but no success:

<kendo-grid>

<toolbar clientTemplateId="GridToolbarTemplate"></toolbar>
...
</kendo-grid>

<kendo-grid>
<ng-template kendoGridToolbarTemplate="GridToolbarTemplate"></ng-template>
...

</kendo-grid>

Can you please advise ?

[Nikolay]

Hi Lino,

The correct way of setting the toolbar template is by passing the options as an attribute to the <kendo-grid> element:

<kendo-grid options="mainGridOptions">
</kendo-grid>

<script id="template" type="text/x-kendo-template">
         <button>Command</button>
 </script>
...
angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
        $scope.mainGridOptions = {
          toolbar: [
            { template: kendo.template($("#template").html()) }
          ],
         //other Grid options
        };
      })

Dojo demo: https://dojo.telerik.com/egoFuFUs

As a side note, please have in mind that since R2 2022, we officially dropped the support for AngularJS 1.x through Kendo UI for jQuery.

Please let me know if you have any questions.

Regards,

Nikolay