Can I give data souce to Detail template of RadTreeList at runtime?

[Nikhil]

Hi Telerik Team,

Greetings to You!

Can I bind Detail Template of RadTreeList runtime? I need to show DetailTemplate on selected row click and DetailTemplate content  may vary in Sync for each row.
If it is possible then please let me know how?.

Thanks!

[Vasil]

Hello Nikhil,

DetailTemplate supports biding as shown in this online demo: http://demos.telerik.com/aspnet-ajax/treelist/examples/appearance/detailitemtemplate/defaultcs.aspx
In the given example you can set Visible to the whole <table> inside the template, and show it only if some datafield from your database is "true" or hide it if it is "false".

Kind regards,
Vasil
the Telerik team

[Sonia]

I would like to show/hide details when the user clicks on an icon of the row. I have tried to set style display=none for the table inside the template and although the information is hidden, the space reserved for the details is not removed and i do not like it.

Please, any other idea to solve that?

Thank you,
Sonia.

[Vasil]

Hi Sonia,

I just tested that and the place is removed. Could you share with us more details about your page and your browser.

Regards,
Vasil
Telerik

 

 

[Sonia]

Hi Vasil,
This is the snippet of code of DetailTemplate, when visible is false, the Description label is not show but the space is reserved.

           <DetailTemplate>
                    <table runat="server" visible=<%# Convert.ToInt32(Eval("Id"))==5?true:false %> >
                         <tr>
                              <td>
                                 Description: <asp:Label ID="Descripcion" Text='<%# Bind("Descripcion") %>' runat="server" />
                              </td>
                         </tr>
                    </table>
               </DetailTemplate>

Thanks in advance.

[Vasil]

Hello Sonia,

If you want to hide the whole row. You can set display to the container of the current item. Here is an example that will hide row with ID 5:

Aspx:

<DetailTemplate>
<table runat="server" visible='<%# Convert.ToInt32(Eval("EmployeeID"))!=5 || Hide(Container)%>'>
        ....
</DetailTemplate>

C#

public bool Hide(Control c)
{
    c.Visible = false;
    return true;
}

You can refactor it further according to your needs, for example:

<table runat="server" visible='<%# IsVisible(Container , Convert.ToInt32(Eval("EmployeeID")))%>'>

public bool IsVisible(Control c, int ID)
{

    c.Visible = ID != 5;
    return ID != 5;
}

The shortest way will be as simple as (probably not very suitable):

<DetailTemplate>
    <%# (Container.Visible = Convert.ToInt32(Eval("ID")) == 5)?"":"" %>
    <table runat="server">

Regards,
Vasil
Telerik

 

 

[Sonia]

It works! Thank you Vasil.

Now, I would like to show/hide details when clicking on TreeListButtonColumn. But i do not know how to access details view when clicking on it. Could you please help me again to achieve that?

[Vasil]

Hello Sonia,

The solution will depend on your requirement. Do you want to show/hide them using JavaScript in the browser or using C# in the server?

Regards,
Vasil
Telerik

 

 

[Sonia]

Hi Vasil,

sorry for answering so late.
I would rather to use JavaScript to achieve that.

[Vasil]

Hi Sonia,

In this case, you will need to hide the table using Display css style, instead of the asp Visible attribute. Because if the table is hidden using the Visible=false, it will not be rendered client side, so you can't show it using JavaScript.

Here is an example:

<DetailTemplate>

    <asp:Button runat="server" ID="button1" Text="show/hide"
        OnClientClick="this.parentNode.nextElementSibling.style.display = this.parentNode.nextElementSibling.style.display =='none'? '' : 'none'; return false;" />
    <table runat="server" style="display: none">
        <tr>
            <td>
                <img src='<%# Page.ResolveUrl("~/TreeList/Examples/Appearance/DetailItemTemplate/Img/") + Eval("EmployeeID")  %>.jpg' alt="Employee Image" />
            </td>
            <td>
                <asp:Label ID="lblNotes" runat="server" Text='<%# Eval("Notes") %>'></asp:Label>
            </td>
        </tr>
    </table>
</DetailTemplate>

This button will show/hide the table inside the template.

Regards,
Vasil
Telerik

 

 

[Sonia]

Hi Vasil,
your solution does not work:

this.parentNode.nextElementSibling is null

[Vasil]

Hello Sonia,

If you are using IE8, the nextElementSibling will be not supported in the browser, but you can use the jQuery .next() function instead. Please make sure that the table is not hidden using Visible=False, because in his case, it will not be accessible client side. If you want to change it's display client side, hide it using style="display: none" instead of visible="false"


Regards,
Vasil
Telerik