RadGrid Client Side Header Click Event

8 posts, 0 answers
  1. David
    David avatar
    11 posts
    Member since:
    Jun 2014

    Posted 01 Oct 2014 Link to this post

    Is there a client side event for when the header is clicked in the RadGrid?  I am seeing that there is a ColumnClicked event, but I need an event just prior to that being fired since the CellSelecting event fires before the ColumnClicked event and the CellSelecting event does not appear to indicate whether the header was clicked or not that I have been able to see.

  2.
  3. Angel Petrov
    Admin
    Angel Petrov avatar
    1105 posts

    Posted 06 Oct 2014 Link to this post

    Hello David,

    Generally there is no exposed event to which you can subscribe that would fit the requirements. However you can attach a mousedown handler to the grid and check if a header is click using the following code.

    ASPX:
    <telerik:RadGrid ID="RadGrid1" onmousedown="onGridMouseDown(this,event);">
            </telerik:RadGrid>

    JavaScript:
    function onGridMouseDown(s, e) {
                    if (e.target.className.indexOf("rgHeader") !== -1) {
                        //header was clicked
                    }
                }


    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. David
    David avatar
    11 posts
    Member since:
    Jun 2014

    Posted 07 Oct 2014 in reply to Angel Petrov Link to this post

    When I add this code to my .aspx page and run it I get the following error: Parser Error Message: Type 'Telerik.Web.UI.GridClientEvents' does not have a public property named 'OnMouseDown'.

    I also do not see an OnMouseDown event under RadGrid ClientEvents
  7. Angel Petrov
    Admin
    Angel Petrov avatar
    1105 posts

    Posted 10 Oct 2014 Link to this post

    Hello David,

    The illustrated behavior is expected. The grid does not have an OnMouseDown client event exposed. If you examine the code provided in my previous post you will notice that the handler is attached directly in the markup(an approach also illustrated here). Considering the aforementioned I recommend applying the same principle to the real application and testing it again.

    Regards,
    Angel Petrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. Jonathan
    Jonathan avatar
    8 posts
    Member since:
    Oct 2018

    Posted 15 Dec 2018 in reply to David Link to this post

    I know this is a really old post, but maybe this will help someone.  I needed to do the same thing, so I just use a mouse click event to check whether the e.location was within the area of the header I was wanting to assign an event to.
  11. John
    John avatar
    6 posts
    Member since:
    Jul 2015

    Posted 20 Nov 2019 in reply to Angel Petrov Link to this post

    Sorry, this is reviving old post. This works for me but also seems to cancel everything else I would expect. For example, when I click on the header to sort, the onGridMouseDown javascript executes but the sort never happens. And there is no postback or calling of NeedDataSource. It's also trapping when I click on the filter dropdown and executing the same js but the filtering never happens either. any ideas?
  13. Jonathan
    Jonathan avatar
    8 posts
    Member since:
    Oct 2018

    Posted 20 Nov 2019 in reply to John Link to this post

    If (e.locaction < RadGridView1.GridViewElement.TitleLabelElement.Size.Height)

         'perform action(s);
  14.
  15. Eyup
    Admin
    Eyup avatar
    3892 posts

    Posted 21 Nov 2019 Link to this post

    Hello,

     

    I am also posting the reply here so it could be helpful to other developers as well:

    The proper way to achieve this requirement is to use the built-in event handlers and the API of the grid - OnUserAction or OnCommand:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onuseraction

    Hope this helps.

     

    Regards,
    Eyup
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top