Expand RadPanelBar in NestedViewTemplate - Client Side

[Brian]

Hi

I'm using a RadPanelBar in the NestedViewTemplate of my grid and would like to expand the RadPanelBar automatically when the NestedView for a particular row is shown (the NestedView is displayed when a row is clicked as follows):

function RowClicked(sender, args)
var gridItem = args.get_item();
ridItem.set_expanded(!gridItem.get_expanded());
}

If I expand the RadPanelBar server-side on page load then I lose the animation effect, so I would like to find the RadPanelBar client-side and run the .expand() method on it, something like this:

<div class="colorizedcode">var panelBar <font color="red">=</font> <font color="black">$find(</font><font color="purple">"<%= RadPanelBar1.ClientID
%>"</font><font color="black">);<br>var panelItem</font> <font color="red">=</font> <font color="black">panelBar.findItemByText(</font> <font color="purple">"Paris"</font><font color="black">);<br>panelItem.disable();</font></div><span style=" "><span style=" margin-left: 0px !important;"><br></span></span>

The main problem seems to be that I'm having trouble finding the control in the RadPanelBar in the NestedViewTemplate client-side - I'm assuming that identifying the control client-side in function RowClicked will allow me to achieve what I'm looking for, which is a nice sliding effect when the NestedView is displayed.  Additionally, I would like to collapse any other NestedViewTemplates if they are visible before displaying the template for the selected row.

The relevant bits of code for the RadGrid are below - any suggestions are greatly appreciated and please let me know if more information is required

Thanks

Brian

<telerik:RadGrid ID="grid_items" runat="server" DataSourceID="sqlds_items" GridLines="None"<br>        AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" Skin="Sitefinity"<br>        Font-Names="Trebuchet MS" ForeColor="#669999"><br>        <ClientSettings><br>            <Selecting AllowRowSelect="True" /><br>            <ClientEvents OnRowClick="RowClicked" /><br>        </ClientSettings><br>        <MasterTableView DataKeyNames="itemID" DataSourceID="sqlds_items" ClientDataKeyNames="itemID"<br>            HierarchyLoadMode="Client"><br>

...

<NestedViewSettings DataSourceID="sqlds_itemImages">
        <ParentTableRelation>
            <telerik:GridRelationFields MasterKeyField="itemID" />
            <telerik:GridRelationFields DetailKeyField="itemID" />
        </ParentTableRelation>
    </NestedViewSettings>

<NestedViewTemplate>
        <div style="float: left; padding-left: 25px;">
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="800px" Skin="Sitefinity">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="some text here or remove?" Visible="True"
                        Expanded="false">
                        <ContentTemplate>
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/items/itemImages/bowl_whiteSmall.png" />

                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
                <ExpandAnimation Duration="500" Type="Linear"></ExpandAnimation>
            </telerik:RadPanelBar>
        </div>
    </NestedViewTemplate>

[Maria Ilieva]

Hello Brian,

Unfortunately getting the NestedViewTemplate elements on the client is not possible in RadGrid. The object is not serialized in order to be accessed on the client. As for the animation problem when you are placing your logic on the server it is expected as on the server the NestedViewTemplate is get expanded and this cause the animation to disappear.

Greetings,
Maria Ilieva
the Telerik team

[Brian]

Hi Maria - thank you for the response

I'm not sure I follow you - it is definitely possible to access items in the NestedViewTemplate from the client, as the following code works:

function expanded() {

var nestedViewItem = args.get_nestedViewItem();
var label = $telerik.findElement(nestedViewItem, "MyLabel");
label.innerText = "this text coming from js expanded()";

}

So theoretically, shouldn't the code below work?

function expand_panel() {

var nestedViewItem = args.get_nestedViewItem();
varthumbnails = $telerik.findElement(nestedViewItem, "RadPanelBar1");
var panelItem = thumbnails.findItemByText("Root"); <--PROBLEM HERE IT SEEMS
panelItem.expand();

}

Please elaborate if I'm missing something...

Thanks

Brian

[Pavlina]

Hello Brian,

Attached to this message is a simple example which demonstrates how to achieve your goal. Please check it out and let me know if it works as expected.

Kind regards,
Pavlina
the Telerik team

[Brian]

Thank you very much Pavlina - using the findControl method rather that .findElement allows me to open the RadPanelBar in the way that I want.

Brian