How to add a badge to button on document ready

[Timo]

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

I didn't find a way to do this. Did I miss something?

Kind regards

Timo

[Mihaela]

Hi Timo,

The easiest approach would be to include a hidden Badge in the Button initially (in the Button definition), and then show the Badge when the data is received from the server:

@(Html.Kendo().Button()
    .Name("postbox")
    .ImageUrl("../../images/mail-black.svg")
    .Content("Postfach")
    .Events(e => e.Click("onClickPostbox"))
    .HtmlAttributes(new { @class = "button-box", style = style })
    .Badge(b => {
        b.Visible(false); //Hide the Badge
        b.ThemeColor(BadgeColor.Error);
        b.Shape(BadgeShape.Circle);
        b.Align(BadgeAlign.TopEnd);
        b.Text("");
    })
)
<script>
$(document).ready(function () {
        $.ajax({
            contentType: 'application/json; charset=utf-8',
            ...
            success: function (data) {
                if (typeof data !== 'undefined' && data.length > 0) {
                    var unreadDocuments = data.filter(doc => doc.Read == false);
                    var badge = $("#postbox").find(".k-badge").data("kendoBadge"); //Get an instance of the hidden Button badge
                    badge.text(unreadDocuments.length); //Use the text() method to set the required text
                    badge.show(); //Show the badge
                }
            },
            error: function (error) {...}
        });
    });
</script>

I hope that helps.

 

Regards, Mihaela Progress Telerik

[Timo]

Thank's a lot.

Works great.