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

12 posts, 0 answers
  1. Nikhil
    Nikhil avatar
    9 posts
    Member since:
    Oct 2011

    Posted 24 Jul 2012 Link to this post

    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!
  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2014 in reply to Vasil Link to this post

    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.
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 Mar 2014 Link to this post

    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
     

    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.

     
  6. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 03 Apr 2014 in reply to Vasil Link to this post

    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.






  7. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Apr 2014 Link to this post

    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
     

    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. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 07 Apr 2014 in reply to Vasil Link to this post

    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?
  9. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 08 Apr 2014 Link to this post

    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
     

    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.

     
  10. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 29 Jul 2014 in reply to Vasil Link to this post

    Hi Vasil,

    sorry for answering so late.
    I would rather to use JavaScript to achieve that.
  11. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 01 Aug 2014 Link to this post

    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
     

    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.

     
  12. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 01 Sep 2014 in reply to Vasil Link to this post

    Hi Vasil,
    your solution does not work:

    this.parentNode.nextElementSibling is null


  13. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 04 Sep 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017