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

TreeList Header - Client-side Click event

2 Answers 27 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 13 Apr 2017, 03:45 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 14 Apr 2017, 01:24 PM

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.
0
Paul
Top achievements
Rank 1
answered on 15 Apr 2017, 10:50 AM
Thanks for the quick response. I'm not using jquery, but with your response it was an easy conversion. Thanks.
Tags
TreeList
Asked by
Paul
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Paul
Top achievements
Rank 1
Share this question
or