This is a migrated thread and some comments may be shown as answers.

Badge click to execute code in Controller class?

5 Answers 21 Views
Badge
This is a migrated thread and some comments may be shown as answers.
Anders
Top achievements
Rank 1
Veteran
Anders asked on 03 Dec 2020, 09:42 AM

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

 

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 04 Dec 2020, 02:48 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Anders
Top achievements
Rank 1
Veteran
answered on 04 Dec 2020, 03:47 PM

Hi,

Thanks for the response. I will investigate it.

Regards, Anders

0
Anders
Top achievements
Rank 1
Veteran
answered on 19 Feb 2021, 09:33 AM

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>

 

0
Tsvetomir
Telerik team
answered on 22 Feb 2021, 05:03 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Anders
Top achievements
Rank 1
Veteran
answered on 23 Feb 2021, 10:41 AM

Hi Tsvetomir,

It works great! Thanks!

/Regards Anders

Tags
Badge
Asked by
Anders
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Anders
Top achievements
Rank 1
Veteran
Share this question
or