TreeList Header - Client-side Click event

3 posts, 1 answers
  1. Paul
    Paul avatar
    34 posts
    Member since:
    Aug 2011

    Posted 13 Apr 2017 Link to this post

    Hi,

    I am using the RadTreeList (Ajax) and trying to get a client-side click event for a left click on the header. This does not appear to be directly supported by the control.  Is there an indirect way to get a client-side click event for the header row and determine the column of the event?

     

    Thanks

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4128 posts

    Posted 14 Apr 2017 Link to this post

    Hello Paul,

    You can easily use jQuery and get the text of the header, if that works for you

    <script>
        function OnTreeListCreated(sender, args) {
            $telerik.$(sender.get_element()).delegate(".rtlHeader th", "click", function (evt) {
                alert($telerik.$(evt.target).text());
            })
        }
    </script>
    <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowSorting="True" DataSourceID="SqlDataSource1" DataKeyNames="LocationID"
        ParentDataKeyNames="ParentLocationID" AllowPaging="true" PageSize="7" AutoGenerateColumns="false">
            <ClientSettings>
                <ClientEvents OnTreeListCreated="OnTreeListCreated" />
            </ClientSettings>
        <Columns>
            <telerik:TreeListBoundColumn DataField="LocationID" HeaderText="LocationID"></telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="LocationName" HeaderText="Name">
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="Population" HeaderText="Population" DataFormatString="{0:#,#}">
                <HeaderStyle HorizontalAlign="Right"></HeaderStyle>
                <ItemStyle HorizontalAlign="Right"></ItemStyle>
            </telerik:TreeListBoundColumn>
            <telerik:TreeListBoundColumn DataField="Area" HeaderText="Area" DataFormatString="{0:#,# km<sup>2</sup>}">
                <HeaderStyle HorizontalAlign="Right"></HeaderStyle>
                <ItemStyle HorizontalAlign="Right"></ItemStyle>
            </telerik:TreeListBoundColumn>
        </Columns>
    </telerik:RadTreeList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]"></asp:SqlDataSource>


    Regards,

    Marin Bratanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Paul
    Paul avatar
    34 posts
    Member since:
    Aug 2011

    Posted 15 Apr 2017 in reply to Marin Bratanov Link to this post

    Thanks for the quick response. I'm not using jquery, but with your response it was an easy conversion. Thanks.
Back to Top