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

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

5 Answers 133 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 11 Feb 2013, 09:10 PM
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.

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Feb 2013, 02:16 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Allan
Top achievements
Rank 1
answered on 11 Jul 2013, 12:20 AM
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");
0
Dimiter Madjarov
Telerik team
answered on 11 Jul 2013, 03:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Allan
Top achievements
Rank 1
answered on 11 Jul 2013, 03:53 PM
>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


0
Dimiter Madjarov
Telerik team
answered on 12 Jul 2013, 08:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Allan
Top achievements
Rank 1
Share this question
or