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

6 posts, 0 answers
  1. David
    David avatar
    8 posts
    Member since:
    Oct 2012

    Posted 11 Feb 2013 Link to this post

    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.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2278 posts

    Posted 12 Feb 2013 Link to this post

    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!
  3. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 10 Jul 2013 Link to this post

    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");
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2278 posts

    Posted 11 Jul 2013 Link to this post

    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!
  5. Allan
    Allan avatar
    18 posts
    Member since:
    Jan 2013

    Posted 11 Jul 2013 Link to this post

    >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


  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2278 posts

    Posted 12 Jul 2013 Link to this post

    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!
Back to Top