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!
11 Answers, 1 is accepted
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
![](/forums/images/avatarimages/default.gif)
Please, any other idea to solve that?
Thank you,
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
Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.
![](/forums/images/avatarimages/default.gif)
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.
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
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.
![](/forums/images/avatarimages/default.gif)
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?
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
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.
![](/forums/images/avatarimages/default.gif)
sorry for answering so late.
I would rather to use JavaScript to achieve that.
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
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.
![](/forums/images/avatarimages/default.gif)
your solution does not work:
this.parentNode.nextElementSibling is null
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
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.