Show detail form on row click

2 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 14 Dec 2011 Link to this post

    As part of my reworking to try and avoid having to use the standard FormView component - as sadly no-one has yet developed a good alternative :(  - I am trying to use RadGrids and RadTreeLists to allow for my New, Edit and View requirements.  

    I've got the new and edit forms kind of working (subject to some more help from support) but am having a dilemma re the view form.

    My Edit and New forms use a popup formtemplate and that works very well.  I'd like the view only form to be similar.  Has anyone had experience doing this?

    I see three potential ways to achieve this:
    1) Use some form of detail template to popup a form and show data - the downside is that it means maintaining a second template.
    2) Somehow use the FormTemplate and have some code to strip out the fields replacing them with labels showing the data.  I think that this would be the preferred option as it would mean consistency between forms and reuse of code.
    3) Same as above but make the fields all read only to prevent user editing.  Downside is that they will look grey.

    I haven't been able to find any demos for this kind of thing - some would be useful in the demos section :)

    Any pointers?

    Best Regards,

    Jon
  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 15 Dec 2011 Link to this post

    Hello Jon,

    I already answered the support ticket that you opened on that matter, but I am posting the reply here as well, if anyone is interested. If you have further questions, please post them in the support thread, so that we avoid duplicate posts on the same issue.

    What you require can be achieved using the DetailTemplate of RadTreeList. When you specify it, it renders a detail item for each TreeListDataItem. You can control its visibility on an autopostback checkbox (or other two state control) change.
    For example, you can have a treelist like this:
    <telerik:RadTreeList ID="RadTreeList1" runat="server" AllowPaging="True" DataKeyNames="ID"
        ParentDataKeyNames="TypeID" OnNeedDataSource="RadTreeList1_NeedDataSource" OnPreRender="RadTreeList1_PreRender">
        <Columns>
            <telerik:TreeListTemplateColumn UniqueName="templateCol">
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" Text="Show more details" />
                </ItemTemplate>
            </telerik:TreeListTemplateColumn>
        </Columns>
        <DetailTemplate>
            Detail item content:
            <br />
            <asp:Label ID="Label1" ForeColor="Orange" runat="server" Text='<%#"Name of item with ID: "+Eval("ID") %>'></asp:Label>
            <br />
            <asp:Label ID="Label2" ForeColor="Green" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
            <br />
        </DetailTemplate>
        <Columns>
        </Columns>
    </telerik:RadTreeList>

    And control the detail item visibility in the PreRender event of the control, depending on the checked state of the checkbox:

    protected void RadTreeList1_PreRender(object sender, EventArgs e)
    {
        foreach(TreeListDataItem item in RadTreeList1.Items)
        {
            CheckBox chk = item.FindControl("CheckBox1") as CheckBox;
            item.DetailItem.Visible = chk.Checked;
        }
    }


    Kind regards,
    Tsvetina
    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
Back to Top