Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Dock > RadDock Inside RadGrid

• Virgil Rodriguez

  Posted on Dec 15, 2011 (permalink)

  Hello Telerik,
  
  There are lots of threads about RadGrid inside RadDocks. I'd like to ask about the reverse - RadDocks inside RadGrid.
  
  Please see below:
  
  

  <telerik:RadDockLayout ID="RadDockLayout1" runat="server" EnableViewState="false">

                                    

      <telerik:RadGrid ID="RadGrid1" DataSourceID="" runat="server" AllowPaging="false"

          GridLines="None" PageSize="20">

          <MasterTableView TableLayout="Fixed">

              <Columns>

                  <telerik:GridTemplateColumn DataField="GTC_Column">

                      <ItemTemplate>

                          <telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="true" EnableViewState="false" Height="400px" Width="900px" Orientation="Horizontal" ToolTip="Zone1"></telerik:RadDockZone>                                                   

                      </ItemTemplate>

                  </telerik:GridTemplateColumn>

              </Columns>

          </MasterTableView>

          <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">

              <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"

                  AllowColumnResize="True"></Resizing>

              <ClientEvents OnGridCreated="onGridCreated" />

          </ClientSettings>

          <HeaderStyle Width="100px" />

      </telerik:RadGrid>

    

  </telerik:RadDockLayout>

  
  Will this work?
  
  I want to populate the grid dynamically with cells of RadDockZones. The reason I want to use RadGrid is I want to be able to easily resize the RadDockZones that are in each cell in a RadGrid.
  
  And when the RadDockZones are created, dynamic RadDocks will be created and placed in any of the created RadDockZones.
  
  Different web controls (textboxes, labels, dropdowns, checkboxes) will be dynamically created in a RadDock.
  
  Will the RadDocks (with its contents) then be able to move to any RadDockZone in the RadGrid?
  
  The size of the RadDockZone will be dependent on the size of the cell in the RadGrid.
  
  Finally, the state of the docks will be saved to a database.
  
  When this state is retrieved from the database, the whole RadGrid with its RadDockZones and its RadDocks will be reconstructed.
  
  Can anyone point me in the right direction? Is there any alternative to using RadGrid and still be able to easily resize cells that have RadDocks in them?
  
  Thanks!

  Reply

• Answer Slav Slav

  Posted on Dec 20, 2011 (permalink)

  Hi Virgil,
  
  You can achieve this scenario by inserting the RadDockZones and the RadDocks into the cells of a resizable RadGrid control. There are several steps that should be executed in order to ensure the correct behavior of the controls:
  
  1. Every RadDock should have a different value of the UniqueName property.
  2. Every RadDock should have properties Width and Height set to 100%.
  3. The CSS of the controls should be modified as shown below in order to ensure that their resizing is synchronized:
  

  <style type="text/css">

      .rgRow td

      {

          height: 100%;

      }

       

      .rgRow td .RadDockZone

      {

          padding: 0;

      }

  </style>

  
  4. You should add a handler to the RadGrid's event OnRowResized in order to ensure that the inner RadDockZones are resized according to the specified cell size under all major browsers. The following example shows the configuration of this handler:
  

  function OnRowResized(sender, args) {

      if ($telerik.isOpera || $telerik.isIE) {

          var tr = $get(args.get_id());

          var tds = tr.childNodes;

          var tdHeight = tds[1].style.height;

   

          for (var i = 0; i < tds.length; i++) {

              if (tds[i].nodeType == 1 && tds[i].tagName.toLowerCase() == "td") {

                  tds[i].style.height = tdHeight;

                  console.log(tds[i].style.height);

              }

          }

      }

  }

  
  Please find attached a sample project, demonstrating the suggested approach. Note that the RadDockZones and RadDocks in the RadGrid are static, but the implemented logic is the same for dynamically created dock controls.  You can use it as a reference for incorporating the desired scenario into your actual project.
  
  Greetings,
  Slav
  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

  Attached files

  • RadDockInRadGridDemo.zip

  Reply


• Virgil Rodriguez

  Posted on Dec 20, 2011 (permalink)

  Wow! Thanks Slav.
  
  I thought this wasn't possible.
  
  I will definitely try this and let you know if it works for me.
  
  Merry Christmas to you and Telerik !!!

  Reply

• Virgil Rodriguez

  Posted on Dec 21, 2011 (permalink)

  Hi Slav,
  
  Just confirming that your sample worked for me. I was able to incorporate it in my project.
  
  Many thanks again.
  
  Cheers!

  Reply

• Virgil Rodriguez

  Posted on Dec 27, 2011 (permalink)

  Greetings Slav and Telerik!
  
  Using the RadDockInRadGridDemo that you created, I dynamically added a new zone to my RadDockLayout1 in the Page_Init event (see below):
  
  

  protected void Page_Init(object sender, EventArgs e)

  {

      RadDockZone GarbageZone = new RadDockZone();

      RadDockLayout1.Controls.Add(GarbageZone);

      RadGrid1.DataSource = new[] { "row", "row", "row", "row", "row", "row", "row", "row", "row", "row" };

      RadGrid1.DataBind();

  }

  
  And I activated the top and bottom command display of my RadGrid in my .ASPX.CS file, as follows:
  
  

  <MasterTableView TableLayout="Fixed" CommandItemDisplay="TopAndBottom">

  
  Why is it that when I try to move a dock to the dynamically created GarbageZone, and then I click on the Refresh button, I get the following exception:
  
  

  Script control 'RadDock1' is not a registered script control. Script controls must be registered using RegisterScriptControl() before calling RegisterScriptDescriptors().

  
  Actually, I still get the same error even if the GarbageZone is created beforehand and not dynamically.
  
  Why is this error coming up even though the GarbageZone is within the same RadDockLayout?
  
  Why is this error coming up only when I click the Refresh button but not when I click the Postback button or even the F5 button?
  
  How do I resolve this issue?
  
  Thanks again in advance!
  
  Virgil
  

  Reply

• Answer Slav Slav

  Posted on Dec 30, 2011 (permalink)

  Hello Virgil,
  
  Please note that the implemented scenario is quite complex and there may be some cases which will result in an unexpected behavior, as the one that you have encountered.
  
  It appears that when a RadDock is declared in the RadGrid's GridTemplateColumn and it is later moved outside the RadGrid, if the content of the grid control is refreshed, an attempt to register the control is made. However, the RadDock is no longer in the RadGrid, as it is docked in the outer RadDockZone, so an exception is thrown.
  
  You can avoid this behavior by creating the RadDock controls programmatically and docking them to the inner RadDockZone when they are initially loaded. This way the dock controls will be registered correctly. Nevertheless, please keep in mind that if you add a editing functionality to the rows of the RadGrid, the RadDock will most probably disappear, when a row is in edit mode, as the dock control is not declared in the edit template of the grid. For your convenience I have attached a sample project, implementing the described approach that you can use as a reference for resolving the issue at hand.
  
  I hope that helps. Don't hesitate to contact us again if you need further assistance.
  
  All the best,
  Slav
  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

  Attached files

  • RadDockInRadGridDemo.zip

  Reply

• Virgil Rodriguez

  Posted on Dec 30, 2011 (permalink)

  You did it again Slav.
  
  Thank you so much for your explanation and for the demo project.
  
  The key here is to create all the docks outside of the zones in the RadGrid, in this case in the GarbageZone. Then moving the docks that are in the Garbage Zone into any of the zones in the RadGrid should no longer cause any problems even if the RadGrid's refresh button is clicked or the whole page is re-rendered in a postback.
  
  Have a Happy New Year!
  

  Reply

• Virgil Rodriguez

  Posted on Dec 30, 2011 (permalink)

  Hi Slav,
  
  It's me again. I did resolve (with your help of course) the issue at hand, which is refreshing the RadGrid after a dock had been moved out from one of its zones onto the Garbage Zone.
  
  I added another functionality which is if I remove a row in my grid, I'd like to programmatically move whatever RadDocks that are in the RadDockZones for that row in my grid - back to the Garbage Zone.
  
  It works for the row that I'm deleting. But the docks in the other rows that I'm not deleting also disappear and are in "Limbo" state - meaning it's not docked in any zone at all - just  like it's floating.
  
  You said something about "if you add a editing functionality to the rows of the RadGrid, the RadDock will most probably disappear, when a row is in edit mode, as the dock control is not declared in the edit template of the grid".
  
  Is this what's happening in this case? How do I resolve this?
  
  And while I'm here discussing an issue that involves RadGrid, is it possible to add a Delete functionality to each column of my RadGrid - maybe a button that also says "Delete" but will apply to the column of all rows in my RadGrid? I'd also like to do the same thing as when I'm deleting a row and that is to move whatever affected RadDocks back to my GarbageZone.
  
  Will I also encounter the same problem as when deleting a row?
  
  Your valuable assistance is very much appreciated.
  
  Thanks again!
  

  Reply

• Slav Slav

  Posted on Jan 3, 2012 (permalink)

  Hello Virgil,
  
  The behavior that you have encountered is not related to the described problem with the editing functionality. Note that when a row of the RadGrid is deleted, the ids of the rest are changed accordingly. For example, if a row with a client id RadGrid1_ctl00__5 is deleted, the next row will be set with the same id. Similar change will occur to all subsequent rows of the grid control.
  
  At the same time the persistence of the RadDock controls' layout depends on the client ids of the RadDockZones. If a dock zone's id is changed, the RadDock, which is docked in this zone, will not be able to find its position and as a result it will be set in a floating state. This is the reason why the rest of the RadDocks are floating after a row is deleted. Unfortunately, this effect cannot be avoided if the structure of the RadGrid is changed. The only solution that I can suggest in such a case is to move the RadDocks from the selected  row, without deleting it.
  
  The following article contains information on deleting a RadGrid column, although this will lead to the effect, described above, as the structure of the grid control will be changed:
  Changing the Grid Structure Dynamically on Postback.
  
  Regards,
  Slav
  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

  Reply

• Virgil Rodriguez

  Posted on Jan 18, 2012 (permalink)

  Thanks a lot once again Slav.
  
  Moving RadDocks from the selected row back to the Garbage Zone without deleting it works perfectly fine for me.
  
  Best regards!
  Virgil
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Dock > RadDock Inside RadGrid