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

[Solved] NestedTemplateView and RadSplitter resize problem

3 Answers 122 Views

Grid

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

Mattia asked on 12 Feb 2014, 02:39 PM

Hi,
In my Grid I have a NestedTemplateView with a RadSplitter.
I would like to keep HierarchyLoadMode="Client" but when I expand row the radSplitter is not stretch.
Is it possible to re-paint or resize the radSplitter?
I notice that if I click on subgrid refresh button the radsplitter will be resized correctly

<telerik:RadGrid ID="TaskRadGrid" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" Width="100%"

EnableEmbeddedSkins="False" Skin="MySkin"

AllowPaging="True" OnItemCommand="RadGrid_ItemCommand"

AllowSorting="True" OnItemInserted="RadGrid_ItemInserted" OnPreRender="RadGrid_PreRender"

OnItemDataBound="RadGrid_ItemDataBound" AllowFilteringByColumn="True" CellSpacing="0"

Culture="it-IT" GridLines="None" >

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView AutoGenerateColumns="False" EditMode="InPlace"

DataKeyNames="Id, Ambiente, Asset.Id" Width="100%"

Name="Task" CommandItemDisplay="Top" HierarchyLoadMode="Client">

<CommandItemSettings AddNewRecordText="" RefreshText="" />

<NestedViewTemplate>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="250">

<telerik:RadPane ID="PlannedAndActualPanel" runat="server" Scrolling="None" Width="24px" >

<telerik:RadSlidingZone ID="PlannedAndActualSlidingZone" runat="server" Width="24px" ClickToOpen="true">

<telerik:RadSlidingPane ID="PlannedAndActualPane" Title="Planned" runat="server" Width="260px">

....

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="RadSlidingPane2" Title="Actual" runat="server" Width="260px">

...

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="MiddlePane" runat="server" Width="100%" Scrolling="None" CssClass="stretch">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" ResizeWithParentPane="true">

<telerik:RadPane ID="RadPane2" runat="server" Width="100%" Scrolling="None" ResizeWithParentPane="true">

<telerik:RadGrid ID="RadGrid2" runat="server" OnNeedDataSource="RadGrid2_NeedDataSource"

Width="100%" EnableEmbeddedSkins="False" AllowPaging="True" OnItemCommand="RadGrid2_ItemCommand"

AllowSorting="True" OnItemDataBound="RadGrid2_ItemDataBound" AllowFilteringByColumn="True"

CellSpacing="0" Culture="it-IT" GridLines="None">

<MasterTableView AutoGenerateColumns="False" EditMode="InPlace" DataKeyNames="Id, Ambiente" Width="100%"

AllowFilteringByColumn="false" Name="TaskOperations" CommandItemDisplay="Top">

<CommandItemSettings AddNewRecordText="" RefreshText="" />

<AlternatingItemStyle CssClass="gridAltRow" />

<ItemStyle CssClass="gridRow" />

<HeaderStyle CssClass="gridHeader" />

<Columns>

...

</Columns>

<EditFormSettings>

<EditColumn ButtonType="ImageButton" />

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowEditOnDblClick">

</ClientEvents>

</ClientSettings>

</telerik:RadGrid>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane1" runat="server" Width="24px" Scrolling="None">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="24px" ClickToOpen="true"

SlideDirection="Left">

<telerik:RadSlidingPane ID="CatalogOperationsRadSlidingPane" Title="Catalog operations"

DockOnOpen="true" runat="server" IconUrl="img/gears.png">

...

</telerik:RadListBox>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</NestedViewTemplate>

<Columns>

...

</Columns>

<EditFormSettings>

<EditColumn ButtonType="ImageButton" />

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowDblClick" OnHierarchyExpanding="CollapseOtherRows">

</ClientEvents>

</ClientSettings>

<FilterMenu EnableEmbeddedSkins="False">

</FilterMenu>

<HeaderContextMenu EnableEmbeddedSkins="False">

</HeaderContextMenu>

</telerik:RadGrid>

3 Answers, 1 is accepted

answered on 17 Feb 2014, 01:01 PM

Hello Stefania,

By design the Splitter is being resized depending on its parent(s), but not on its content. If you want to resize the controls when its content (the rows in the Grid in your case) is changed, you can see a way this can be done in this code library: http://www.telerik.com/support/kb/aspnet-ajax/splitter/details/initially-resize-the-radsplitter-according-to-its-content

Note, though, that one the controls size is set with JavaScript in pixels, it will lose its responsiveness and will not recalculate its size when the browser is resized.

Regards,
Veselina Raykova
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 19 Feb 2014, 08:58 AM

Hi,
thanks for your reply.
I changed a little bit my code and now I'm using HierarchyLoadMode="ServerOnDemand" and it looks better, but it still have some layout problem.
I'm trying to implement your example but I can't reach my "PlannedAndActualPanel" RadPane

If I use this script

<script type="text/javascript">

function SplitterLoaded(splitter, arg)

{

var pane = splitter.getPaneById('<%= PlannedAndActualPanel.ClientID %>');

var height = pane.getContentElement().scrollHeight;

splitter.set_height(height);

pane.set_height(height);

}

</script>

I have the following error
cs0103 the name 'PlannedAndActualPanel' does not exist in the current context

How can I get the RadPane inside a NestedTemplateView?
Thanks

answered on 24 Feb 2014, 07:37 AM

Hi Stefania,

I am afraid that the provided information is not enough to determine what is causing the issue. Could you provide a sample fully runnable project reproducing the experienced error so we could investigate it further? You can see how to prepare such in the following blog post: Isolating a problem in a sample project

Regarding how to get reference to a control placed inside a NestedViewTemplate, you can refer the following forum thread: How to access Radgrid inside the NestedViewTemplate.

Kind regards,
Veselina Raykova
Telerik

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 UI for ASP.NET AJAX, subscribe to the blog feed now.