How to properly inform DockZones of new Docks on the page?

5 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 29 Jul 2011 Link to this post

    Hi Telerik,

    This problem might be extremely complicated, or maybe it's extremely trivial and I am overthinking my issues. I've attached a very brief image showing what's happening.

    Here's what I've got:


    //When the user drops a RadListBoxItem onto the dashboard we have to figure out
    //what RadDockZone the control was dropped onto, rip out information about the event,
    //and then pass that data to the server for processing.
    function OnClientDropping(sender, eventArgs) {
        eventArgs.set_cancel(true);
        sender.clearSelection();
        previousZone = null;
     
        var sourceItem = eventArgs.get_sourceItem();
        var droppedID = eventArgs.get_htmlElement().id;
     
        if (droppedID.indexOf("RadDockZone") != -1) {
            var dockZoneDroppedOn = $find(droppedID);
     
            if (dockZoneDroppedOn.get_docks().length == 0) {
                dockZoneDroppedOnID = droppedID;
     
                var eventData = {};
                eventData["sourceItemText"] = sourceItem.get_text();
                eventData["sourceItemValue"] = sourceItem.get_value();
                eventData["listBoxID"] = sender.get_id();
     
                if (queue.length == 0) {
                    queue.push(dockZoneDroppedOn._uniqueID);
                    queue.push(eventData);
                    __doPostBack(dockZoneDroppedOn._uniqueID, $.toJSON(eventData));
                }
                else {
                    queue.push(dockZoneDroppedOn._uniqueID);
                    queue.push(eventData);
                }
            }
        }
        else {
            dockZoneDroppedOnID = "";
        }
    }

    There's a RadListBox on the page which has drag-and-drop enabled. The user drag-and-drops a RadListBoxItem onto the page (their mouse is over a RadDockZone). At this point, I call doPostBack targeting that RadDockZone and create a RadDock on this RadDockZone. Afterwards, I synch all RadDock's ForbiddenZones.

    So, there's already one Dock (RadDock1) on a DockZone on the page. The user then drag-and-drops a second time. After this RadDock (RadDock2) is created, and the page is rendered to the user, since RadDock1's DockZone has not been told to update it does not reflect its ForbiddenZones properly.

    <cs:CormantRadPane ID="RadPane2" Runat="Server" BackColor="White" >
        <nStuff:StyledUpdatePanel Runat="Server" ID="UpdatePanel1" UpdateMode="Conditional" CssClass="maxHeight" >
            <ContentTemplate>
                <cs:CormantRadSplitter ID="RadSplitter3" Runat="Server" Visible="false" />
                <cs:CormantRadDockZone ID="RadDockZone1" Runat="Server" />
            </ContentTemplate>
        </nStuff:StyledUpdatePanel>
    </cs:CormantRadPane>

    I've have the above hierarchy of controls on the page. As you can see, when a RadDockZone gains a control, its UpdatePanel handles a partial page-refresh. In this way I handle updating only parts of my page.

    So, I am left with this issue. I am trying to keep the amount of work happening on the page to a minimum, but it seems like I have to call update on every DockZone during these scenarios.. which is terrible. Flickering occurs on all the RadDocks.

    /// <summary>
    /// Shows where docks can/can't be moved. Forbidden zones are all DockZone's with Docks.
    /// So, a dock can move to any other dockZone that does not have a control. Those are the allowed zones.
    /// Its own spot is allowed so that the highlighting looks correct -- but it is not necessary.
    /// </summary>
    public void SynchForbiddenZones()
    {
        IEnumerable<CormantRadDockZone> dockZonesWithDocks = LayoutManager.Instance.RegisteredDockZones.Where(dockZone => dockZone.Docks.Any());
        ForbiddenZones = dockZonesWithDocks.Select(dockZone => dockZone.ID).ToArray();
        Logger.DebugFormat("Forbidden zones for dock: {0} are {1}", ID, ForbiddenZones);
    }
     
    public void SyncAndUpdate()
    {
        SynchForbiddenZones();
        GetWrappingUpdatePanel().Update();
    }

    I call SyncAndUpdate on every dock on the page during the follow scenarios:
    • RadDock gets created.
    • RadDock position changes.
    • RadDock gets closed.

    All of these have an effect on the 'dockability' of the dock's DockZone. I would like to inform all other DockZones of this change in 'dockability' without flashing the controls. 

    Is this possible? Is this a place where I should consider using RadXMLHTTPPanel? Do I have other options?

    Thanks.
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 03 Aug 2011 Link to this post

    Hi Sean,

    Your approach most probably can't be applied without affecting all UpdatePanels on your page.

    I would suggest another solution. As I understand it you want every RadDockZone to contain one RadDock. In such case another approach would be to use the client-side OnClientDragEnd event to check if the new zone contains a dock. If so, you can return the dragged RadDock to its original RadDockZone.

    You can also use RadDockZone's property HighlightedCssClass in order to notify if a RadDock can be placed in a certain zone.

    I hope the information, listed above helps. Please let us know if you run into more troubles.

    Best wishes,
    Slav
    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 04 Aug 2011 Link to this post

    Hi Slav,

    I believe you may have misinterpreted the issue. I am already utilizing RadDockZone's property HighlightCssClass. This property is dependent on the RadDockZone knowing about the existence of a RadDock on other RadDockZones.

    In my scenario, when the second Dock is created on the second DockZone, the first DockZone does not get informed of the change-in-state of the second DockZone. This is because I have an UpdatePanel which is responsible for updating the second DockZone. This localizes the page-postback to just a callback on the specific area. As such, when I drag the 1st Dock from the 1st DockZone, and hover over the 2nd DockZone, the DockZone's HighlightCssClass shows I am able to drop onto the zone when, in fact, it is marked as a ForbiddenZone.

    This 'error scenario' applies to your other suggestion, as well. I'll continue to tinker around with this, but I think it's pretty hopeless.
  5. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 10 Aug 2011 Link to this post

    Hello Sean,

    You can consider another possible option for the scenario at hand. To avoid affecting all UpdatePanels, you may transfer your manipulations over the RadDocks on the client-side by using the following array and methods:

    Telerik.Web.UI.RadDockZonesGlobalArray - global array, containing the RadDockZones on the page
    get_uniqueName - method, returning the UniqueName of a RadDockZone.
    set_allowedZones - method, setting the array of docking zones where the control is allowed to dock.

    Via the information listed above, you can try specifying the AllowedZones for every dock on the client-side, whenever any of the following events occur:
    • - RadDock gets created.
    • - RadDock position changes.
    • - RadDock gets closed.

    I hope the provided information helps in implementing the desired functionality.

    Kind regards,
    Slav
    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.

  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 15 Aug 2011 Link to this post

    Telerik,

    Fantastic! It's worth noting that I did try and do things client-side at one point, but I was, apparently, doing it incorrectly.

    If I set the dock's ForbiddenZones server-side, then ask for its forbidden zones client-side, I was not seeing the dockZone with the newly created dock. Yet, if I go through the global DockZone array inside of a dock's OnDragStart event, the dockZone now knows of its newly created child and I am able to set the Dock's forbidden zones-client side.

    This worked! Thank you! Huge improvement in efficiency. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017