Badge click to execute code in Controller class?

6 posts, 1 answers
  1. Anders
    Anders avatar
    11 posts
    Member since:
    Apr 2019

    Posted 03 Dec 2020 Link to this post

    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

     

     

  2. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 04 Dec 2020 Link to this post

    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/.

  3. Anders
    Anders avatar
    11 posts
    Member since:
    Apr 2019

    Posted 04 Dec 2020 in reply to Tsvetomir Link to this post

    Hi,

    Thanks for the response. I will investigate it.

    Regards, Anders

  4. Anders
    Anders avatar
    11 posts
    Member since:
    Apr 2019

    Posted 19 Feb Link to this post

    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>

     

  5. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 22 Feb Link to this post

    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/.

  6. Anders
    Anders avatar
    11 posts
    Member since:
    Apr 2019

    Posted 23 Feb in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

    It works great! Thanks!

    /Regards Anders

Back to Top