Hi,

I have Badges that display different sums of data. I would like to filter a Grid based on clicking a them.

Is it possible to execute code in Controller class when clicking on a Badge, or do I have to rethink this? Can you please point me in the right direction?

Regards, Anders

Hi,

Thanks for the response. I will investigate it.

Regards, Anders

Using the code below I can invoke the Controller fine when clicking on "Get total" text.

<div id="badge-total">
    Get total
</div>

<script>
    $("#badge-total").click(function () {
        $.ajax({
        url: '@Url.Action("ShowTotalGrid")', 
        dataType: "json", 
        type: "POST", 
        contentType: 'application/json; charset=utf-8', 
        cache: false, 
        data: {}, 
        success: function (data) {           
            if (data.success) {
                alert(data.message);
            }
        },
        error: function (xhr) {
            alert('error');
        }
    });
});
</script>

But, when trying to invoke by means of clicking the Badge nothing happens. Please advise on how to execute the ajax call using clicking on the badge.

<div class="badge-section">
    @(Html.Kendo().ToolBar()
        .Name("toolbar")
        .Items(items =>

        {
            items.Add().Template(@"
                <a class='k-button'>Total" +
                    Html.Kendo().Badge()                    
                        .Name("badge-total")
                        .Text(ViewBag.Total)
                        .ThemeColor(BadgeColor.Primary)
                        .Shape(BadgeShape.Rounded)
                        .Size(BadgeSize.Large)
                        .ToHtmlString() +
                "</a>"
            );   
        })
    )
</div>

Hi Anders,

When the Kendo UI Badge is nested within another widget, then its elements will be rendered only when the parent has finished rendering. Therefore, you are attaching the click event at time when the element is non-existent.

What I can recommend is that you attach the event to the document and filter the elements:

<script>
    $(function () {
        $(document).on("click", "span", function (e) {
            if ($(e.target).attr("id") == "badge-total") {
                $.ajax({
                    url: '@Url.Action("ShowTotalGrid")',
                    dataType: "json",
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    cache: false,
                    data: {},
                    success: function (data) {
                        if (data.success) {
                            alert(data.message);
                        }
                    },
                    error: function (xhr) {
                        alert('error');
                    }
                });
            }
        });
    });
</script>

Kind regards,
Tsvetomir
Progress Telerik

Hi Tsvetomir,

It works great! Thanks!

/Regards Anders