Display checkbox or switch instead custom button kendo grid

Question

I have a Kendo UI ASP.Net Core Grid as:

                @(Html.Kendo().Grid(Model)
                    .Name("grid")
                    .ToolBar(t =>
                    {
                        t.Excel();
                        t.Pdf();
                        t.Search();
                        t.Custom().Name("ShowActive");
                    })
                    .DataSource(...
                    )

JS:

 $(document).on("click", ".k-grid-ShowActive", function(e){
                    $(".k-grid-search select").val(true).trigger("checkbox");
                  });

As you can see I have t.Custom().Name("ShowActive"); because I want to display a checkbox or switch, something that returns true or false in order to call the get method and refresh my data, but that code created a button instead checkbox

What is the checkbox or switch control of kendo grid?

Answer 1

The custom commands of the grid expose options to configure icon class, HTML attributes, Name, etc. However, the custom commands will always remain HTML button elements internally.

If you would like to customize the appearance, I recommend using a Toolbar template instead.

Alternatively, you can subscribe to the DataBound event handler, find the button and dynamically via JavaScript/jQuery remove its HTML and add the HTML of your choice. DOM manipulations are known to be a relatively slow operation and this potentially could lead to a negative impact on the performance of your application, especially because the DataBound event is triggered after almost any interaction with the grid.