Questions on UI for ASP.NET Core Forum

1 question

1 answer

93 views

How to add a badge to button on document ready

I tried to add a badge to a button after successfull retrieving data by an ajax call:

@(Html.Kendo().Button()
    .Name("postbox")
    .ImageUrl("../../images/mail-black.svg")
    .Content("Postfach")
    .Events(e => e.Click("onClickPostbox"))
    .HtmlAttributes(new { @class = "button-box", style = style }))

When document is loaded i use ajax to retriev data:

$(document).ready(function () {
        $.ajax({
            contentType: 'application/json; charset=utf-8',
            url: '/Dks/GetPostboxData',
            type: 'GET',
            cache: false,
            data: null,
            success: function (data) {
                console.log(data);
                if (typeof data !== 'undefined' && data.length > 0) {
                    var unreadDocuments = data.filter(doc => doc.Read == false);
                    console.log(unreadDocuments);
//Here I want to do something like this:
                    $("#postbox").data('kendoButton').Badge({
                        text: unreadDocuments.length,
                        shape: "circle",
                        themeColor: "error",
                        align: "top end",
                        visible: unreadDocuments.length > 0
                    });
                }
            },
            error: function (error) {
                console.log(JSON.stringify(error));
                
            }
        });
        
    });