Impossible To Have Sorting Turned On For Column With Clickable Element In HeaderTemplate?

[David]

I'm wanting to put an HTML element in the HeaderTemplate() of a bound column.  I want to handle the click event of this HTML element.  This works fine as long as I have sorting turned off for the column.  However, if I have sorting turned on, then it seems that the grid automatically consumes the click of my HTML element and POSTs a sort on that column.  Is that by design?

If so, is there any way around it?  Turning off sorting for the column is not an option.  Is there a way to perform sorting from within the HeaderTemplate() that will also honor all other sorts/filters/paging/grouping on the grid?

If not that, is there a way to inject an HTML element via client-side code after the page has loaded that will not cause the column to sort when clicked?

I have tried both methods above but can't get them to work.  I'm hoping I'm missing something straightforward.

[Dimiter Madjarov]

Hello David,

To handle the click event only for your html element and not for any of his parents, you should stop the event from bubbling up the DOM tree. Clicking anywhere else in the header will still perform a sorting.
E.g.

$("#customButton").click(function (e) {
    e.stopPropagation();
    //custom logic
});

I hope this will work in your scenario.

 

All the best,
Dimiter Madjarov
the Telerik team

[Allan]

I was wondering if it might be possible to post more code for this feature?

For example, in the code below. Clicking on the "Certificate" button sorts the column.
How would I use your code snippet (also below) to have the "Certificate" button submit the form instead of sort the column?

Allan

Your Snippet:

$("#customButton").click(function (e) {
    e.stopPropagation();
    //custom logic
});

My Code:

var _grid = $("#KendoGrid").kendoGrid({

            dataSource: jsonDataHere,

            filterable: { extra: false },

            sortable: true,

            scrollable: false,

            pageable: { 

                pageSize: 10,

                pageSizes: true

            },

            columns: [

                {

                    field: "TrainingType",

                    title: "Delivery Type",

                    headerTemplate: function(dataItem) {

                        return "<div>" +

                        "<form action='@Url.Action("MyActionResultName", "MyControllerName")'

                               method='post' target='_blank'>" +

                        "<button class='btn btn-success'

                                 type='submit'>Certificate</button>" +

                        "</form></div>";

                    }

 

                }, {

 

                    field: "Location",

                    title: "Location",

                    filterable: false

                }

            ]

        }).data("kendoGrid");


[Dimiter Madjarov]

Hello Allan,


The same approach could be applied in the current scenario. You should just attach the click handler to the .btn-success button instead of #customButton. Any code after the e.stopPropagation(); call is not related to the current topic.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Allan]

>The same approach could be applied in the current scenario. You should just attach the click handler to the .btn-success button instead of #customButton.

Okay, thank you so much for your help. Can you possibly also tell me how to attach the click handler to .btn-success?

Allan

[Dimiter Madjarov]

Hello David,


This question is not related to Kendo UI, but here is a sample approach that you could take with the jQuery on method.
E.g.

$("#Grid").on("click", ".k-header .btn-success", function() {
    //custom actions
});

Regards,
Dimiter Madjarov
Telerik