This is a migrated thread and some comments may be shown as answers.

Expand RadPanelBar in NestedViewTemplate - Client Side

4 Answers 50 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 07 Jan 2011, 04:07 AM

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>

4 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 13 Jan 2011, 10:52 AM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Brian
Top achievements
Rank 1
answered on 13 Jan 2011, 03:30 PM

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

0
Accepted
Pavlina
Telerik team
answered on 14 Jan 2011, 03:36 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Brian
Top achievements
Rank 1
answered on 17 Jan 2011, 02:47 PM

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

Tags
Grid
Asked by
Brian
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Brian
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or