Badge click to execute code in Controller class?

[Anders]

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

 

 

[Tsvetomir]

Hi Anders,

The Badge widget of the Kendo UI is intended to visualize information. In order to make it interact with the Controller, you should attach the click event to its element via jQuery:

https://api.jquery.com/click/

Within the handler, perform a custom AJAX request that would call an ActionMethod on the Controller where you would be able to perform custom logic.

https://api.jquery.com/jquery.ajax/

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik

[Anders]

Hi,

Thanks for the response. I will investigate it.

Regards, Anders

[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>

 

[Tsvetomir]

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

[Anders]

Hi Tsvetomir,

It works great! Thanks!

/Regards Anders