How to add custom buttons to kendo grid toolbar

1 Answer 790 Views
Grid
Bala
Top achievements
Rank 1
Bala asked on 28 Apr 2021, 05:25 AM
@(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>);
})
    )

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 30 Apr 2021, 03:01 PM

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:

@(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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Bala
Top achievements
Rank 1
commented on 03 May 2021, 05:28 AM | edited

Hi, thank you
Tags
Grid
Asked by
Bala
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or