| <telerik:RadDockLayout runat="server" ID="rdlMain"> |
| <telerik:RadDockZone runat="server" ID="rdzNotes" |
| BorderStyle="None" |
| FitDocks="true" |
| Orientation="Vertical" |
| > |
| <telerik:RadDock runat="server" ID="rdNotes" |
| CloseText="Notes (hidden)" |
| CollapseText="Hide Notes" |
| DefaultCommands="ExpandCollapse" |
| DockHandle="TitleBar" |
| DockMode="Docked" |
| EnableRoundedCorners="true" |
| ExpandText="View Notes" |
| EnableDrag="false" |
| Text="RadDock Notes" |
| Title="Notes" |
| Resizable="True" |
| > |
| <ContentTemplate> |
| <telerik:RadGrid runat="server" ID="rgNotesList" |
| AllowAutomaticDeletes="true" |
| AllowAutomaticInserts="true" |
| AllowAutomaticUpdates="true" |
| AllowPaging="true" |
| AutoGenerateColumns="False" |
| DataSourceID="sqsNotes" |
| GridLines="None" |
| Height="99%" |
| PageSize="4" |
| ShowHeader="true" |
| ShowStatusBar="true" |
| Width="99%" |
| > |
| <MasterTableView |
| CommandItemDisplay="Top" |
| DataSourceID="sqsNotes" |
| DataKeyNames="NotesID" |
| EditMode="InPlace" |
| ShowHeadersWhenNoRecords="false" |
| > |
| <Columns> |
| <telerik:GridEditCommandColumn |
| ButtonType="ImageButton" |
| ItemStyle-Width="10px" |
| /> |
| <telerik:GridBoundColumn |
| DataField="Project" |
| HeaderText="Project" |
| /> |
| <telerik:GridBoundColumn |
| DataField="NotesSubject" |
| HeaderText="Subject" |
| /> |
| <telerik:GridBoundColumn |
| DataField="NotesDescription" |
| HeaderText="Description" |
| /> |
| <telerik:GridDateTimeColumn |
| DataField="NoteDate" |
| DataFormatString="{0:d/MM/yyyy}" |
| HeaderText="Note Date" |
| /> |
| <telerik:GridBoundColumn |
| DataField="CreatedBy" |
| HeaderText="Created By" |
| ReadOnly="true" |
| /> |
| <telerik:GridBoundColumn |
| DataField="ModifiedBy" |
| HeaderText="Last Modified By" |
| ReadOnly="true" |
| /> |
| <telerik:GridClientDeleteColumn |
| ButtonType="ImageButton" |
| ConfirmText="Are you sure you want to delete this note?" |
| ConfirmTitle="Please confirm:" |
| ItemStyle-Width="10px" |
| /> |
| </Columns> |
| <HeaderStyle |
| Wrap="false" |
| /> |
| <NoRecordsTemplate> |
| No notes found. |
| </NoRecordsTemplate> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
Greetings,
I have what should be a simple thing to do -- keep a pair of DockZones the same height. What I have is a table with a TR and two TDs. In each TD is a DockZone.
Whenever a dock is dragged from one dropped into the other zone, I want to set the height of both zones to the height of the tallest + about 30px so that when a user drags a dock from one to the other and drops it, it actually lands in a zone instead of landing below the shorter zone.
If I leave DockMode at default, it lands in the empty space and is not docked. If I set it to Docked, it just snaps bacl to it's original location, both of which annoy the user who thought he was dropping it in a zone.
MinHeight is not helping -- as soon as one zone gets taller than the minhieght same problem. Also, in layouts with more than one row, having crazy tall, completely empty space in the top band(s) makes the bands below useless.
Am I missing something? This seems like a pretty basic need.
I've tried adding an extension method to the client api, which I call from a handler off the Dock.OnClientDragEnd event, but I have no way to grab the accurate heights of the zones. So what happens is if I start off with ten docks stacked in one zone and zero in the other, if I drag 5 over to the second zone, the original largest height is retained and just passed back and forth:
| <script type="text/javascript"> |
| Telerik.Web.UI.RadDockZone.prototype.sync_Height = function(that) { |
| if (that) { |
| var thisDock = $('#' + this.get_id()); |
| var thatDock = $('#' + that.get_id()); |
| var thisHeight = thisDock.height(); |
| var thatHeight = thatDock.height(); |
| if (thatHeight > thisHeight) { |
| thisDock.height(thatHeight); |
| } |
| else { |
| thatDock.height(thisHeight); |
| } |
| } |
| } |
| </script> |
-Al




