Tag Archives: WebDragDropExtender

Implement Drag and Drop to WebScheduler using WebDragDropExtender

In WebScheduler, events can be dragged and dropped from one cell to another cell in scheduler area. Related to this functionality, we have received requests to support drag and drop behavior from another control to WebScheduler where a new event will be created upon the drop action. Using Build 217 or higher, it is now possible to implement drag and drop behavior from another control to WebScheduler, with the help of WebDragDropExtender control.

WebDragDropExtender allows you to add drag and drop behavior between server or HTML controls. When implementing drag and drop behavior to WebScheduler, you can use any controls as DragControl as long as the drag behavior has been implemented in that control. In this blog, WebGrid is used as DragControl, as the drag behavior is a built-in implementation in WebGrid.

First, add WebScheduler and WebGrid to a page. Ensure all the events and data is displayed properly in both controls before you continue to the next step.

Both WebScheduler and WebGrid are configured to display data

Both WebScheduler and WebGrid are configured to display data

In WebScheduler, the AllowDropFromExtender property needs to be enabled and the editing capabilities need to be enabled as well.

Next, add WebDragDropExtender control to the page. Add WebGrid in DragControls collection and WebScheduler in DropControls collection of WebDragDropExtender.

The following steps are needed to add WebGrid in DragControls collection:

  1. Choose DragControls property and open WebDragControl Collection Editor dialog box.
  2. Set WebGrid’s ID as the value of ControlID property.
  3. Choose AdvancedProperties and AdvancedProperties dialog box will be opened.
  4. Check Enable special integration with Intersoft control checkbox and check Allow dragging on checked rows checkbox. Note that WebGrid should have rowchecker-typed column.
  5. Press OK in both dialog boxes.

    WebDragControl Collection Editor dialog box

    WebDragControl Collection Editor dialog box

 
The following steps are needed to add WebScheduler in DropControls collection:

  1. Choose DropControls property and open WebDropControl Collection Editor dialog box.
  2. Set WebScheduler’s ID as the value of ControlID property.
  3. Type the following attributes: Type=Custom,ComponentType=WebScheduler,DropableOnCell=True, in AdvancedProperties property.
  4. Press OK.

    WebDropControl Collection Editor dialog box

    WebDropControl Collection Editor dialog box

 
Finally, add OnDragStart and OnDragDrop client-side events in WebDragDropExtender control. 

Add the following code in OnDragStart client-side event. The code will reinitialize drop controls every time the drag behavior started. This is needed because the selected view mode in WebScheduler might be different every time a drag behavior started, e.g: when user first drags a row and drop it to WebScheduler, the active view mode is Day view. Then, he changes the view mode to Month view. In this case, the drop controls needs to be reinitialized in order for the drag and drop behavior to work perfectly.

function DragStart(controlId, e)
{
      var obj = ISGetObject(controlId);
      obj.ReinitializeDropControls();
}

In OnDragDrop client-side event, you can implement the drop action according to your scenario. In this case, we will implement the code to add a new event according to the active view mode.

function DragDrop(controlId, e, dropObject)
{
  if (dropObject.IsSubObject)
  {
     var dropItem = dropObject.SubObjectContext;

     if (dropItem.ItemType == "Cell" || dropItem.ItemType == "AllDayCell")
     {
        var s = ISGetObject("ws1");

        var subject = e.DragObject.Data.Rows[0].GetCell("Subject").Text;
        var startTime = "";
        var endTime = "";
        var allDayEvent = false;
        var resourceID = "1"; //currently hardcoded
        var el = dropItem.Element;

        switch (s.ViewSettings.SelectedViewMode)
        {
           case "Day":
           case "Week":
              if (dropItem.ItemType == "AllDayCell")
              {
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              }
              else
              {
                 startTime = s.GetDateTimeByCellElement(el.children[0], "DateTime");
                 endTime = AddMinutes(startTime, 30);
              }

              if (s.IsInSplitViewMode)
                 resourceID = s.GetResourceByCellElement(el.children[0]).ResourceID;

              break;

              case "Month":
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              break;
        }

        CreateNewEvent(resourceID, subject, startTime, endTime, allDayEvent);

        return true;
     }
  }
  return false;
}

Now, you can drag a row from WebGrid and drop it to WebScheduler in any cell area that you want. The selected dropped area is indicated by a dashed line border in the cell, enabling user to easily see whether or not the selected droppable area is the correct date and time to drop the object.

WebGridRow is dragged to WebScheduler

WebGridRow is dragged to WebScheduler

When the row is dropped, a new event will be created in the selected cell area. Note that previously abc row is dragged from WebGrid and dropped to 12 PM cell area. After it’s dropped, a new event with abc as its subject, will be created in 12 PM cell area with 30 minutes duration (can be specified in the code).

A new event is created when the row is dropped to WebScheduler

A new event is created when the row is dropped to WebScheduler

This drag and drop behavior is applicable in view modes that include cells in its layout, so Agenda, Year, and Quarter views are not supported. You can download the sample here. Feel free to give feedback or comments. Have a great day !

Advertisements

2007 R2 Tutorial Videos

Finally… the new videos for the latest Intersoft’s components have been added in Intersoft’s support site.
The latest videos introduce the following components:

– WebGrid.NET 6.0 with its new ability to present data visualization concept by introducing pivot charting and classic paging mechanism.

– WebDragDropExtender.NET as a new member of WebDesktop.NET 2.5, enabling user to add sophisticated drag and drop behaviors to existing server or html controls.

– WebTreeView.NET 1.0 as the latest of Intersoft’s ASP.NET server control, enabling user to easily create a hierarchical data presentation.

Following are the latest video’s URL of each component:

WebGrid.NET 6.0
http://support.intersoftpt.com/Video.aspx?pid=144&topic=General

WebDragDropExtender.NET
http://support.intersoftpt.com/Video.aspx?pid=136&topic=WebDragDropExtender

WebTreeView.NET 1.0
http://support.intersoftpt.com/Video.aspx?pid=152&topic=General

You can also look at the other videos at Intersoft Solutions – Support Center.

Should you guys have any feedback or request for the current and future videos, please feel free to leave a comment on this post.

Thank you.

Cheers.

2007 R2 goes RTM

Over the past few months, I’ve blogged about the new functionalities and products that you can expect in the upcoming WebUI Studio.NET 2007 R2. You may have noticed that we did not post any new items in the past month. That is because we are extremely busy preparing the new exciting products and ensuring they meet our high standards in quality, testing and documentation.

Our goal was to release 2007 R2 by July 31st, 2007. However, due to some latebreaking issues, we have to set the date to today, so it is only one day slip. Subscribers will be notified of the new products and immediate download later today.

I believe you can already find the new functionalities of WebGrid, WebDragDropExtender and WebDesktop inside the white papers in my previous post. In this post, I’ll do some write-up on WebTreeView since it has many interesting features.

One of the most significant offerings in this R2 release is WebTreeView, which includes many powerful features and extremely fast performance. We’ve been tweaking the performance extensively in the past months, such as loading hundred of nodes in both first load and on-demand mode. One of the interesting challenges is that, the TreeView is designed with full OOP methodology (like the rest of Intersoft’s products), which is usually the cause of slow performance if it is not designed properly. However, with our technologically advanced OO implementation, we do not suffer on performance issue as the objects are populated transparently as user interacted with the TreeView elements.

 The support for drag and drop in WebTreeView is also very comprehensive. Unlike other similar control, WebTreeView allows you to drop into four modes, which are Root, Child, Leaf and Sibling. The powerful thing is that you can enable all of them, or only several of them according to your needs with just property set. You can also drag between one TreeView to another TreeView instance. You can also drag and drop from one TreeView to another Intersoft’s controls (such as WebGrid, etc) that supported by WebDragDropExtender.

The thing that I feel most significant in the latest milestones is the improvement of the products in architectural level, such as by leveraging powerful interfaces concept and other OO features. For instance in our recent successful approach, WebDragDropExtender and WebTreeView are two different products that do not know each other (in each’s product codes level). However when used together, WebDragDropExtender and WebTreeView can recognize each other at runtime. The drag control and drop control specified in WebDragDropExtender can automatically recognize WebTreeView as valid drop object. This means you can drag a ASP.NET Label and drop it to TreeView or drag a WebTreeView’s node then drop it to a ASP.NET Panel in consistent manner by using the same mechanism, same event life cycle and same concepts. Nice!

Well, that’s all for today’s blog. When you’ve got the RTM bits installed today, just go straight to launch the Live Samples. We hope you liked the new Live Samples UI that we have revamped, and of course, the entire new offerings. Happy developing!

All the best,
Jimmy.

WebUI Studio.NET 2007 R2 Beta

It has been a while since my last post as we are overwhelming busy preparing the new stuff that we promised to deliver to you in the upcoming month.

At the time of this writing, you should be able to get some bits of our latest offering – the first beta version of WebUI Studio.NET 2007 R2. If you haven’t checked out the release details, please read the beta news.

To wrap things up, there are several exciting features that you’ve been asking for quite a while in this new release:

  • Classic paging in WebGrid.NET Enterprise 6.0. The classic paging offers built-in Slide UI and custom paging API that you can use to simulate Vista paging design.
  • New phenomenal Pivot Charting in WebGrid.NET Enterprise 6.0. Do you believe you can transform raw data into pivoted view visualized into stunning 3D chart with one button click?
  • Brand-new WebDragDrop component. The “wow” factor of Web application – with this component, you can now add Vista-style drag and drop behaviors to existing server side controls. You can try your wilder imagination, perhaps how about dragging some items in WebGrid and drop it out to “Recycle Bin” of the WebDesktopManager?
  • Significant enhancement in WebMenu, WebDialogBox, WebButton and more. The UI components in the new WebDesktop.NET 2.5 now includes built-in features to create pixel-perfect UI design such as those in Vista or Word 2007’s menu.
  • Brand-new WebTreeView component [Whitepaper is coming soon]. Seeking for a high-performance treeview with professional-designed API? Or desperate for a treeview with built-in tri-state checkboxes?. The wait is over.

We hope you enjoyed these latest offering in 2007 R2, and encourage you to download a copy of the beta and give it a try today. We’d appreciate any feedbacks that you send to feedbacks@intersoftpt.com.

All the best,
Jimmy.

The beauty of drag and drop.

A while ago, I have posted about Cross IFRAMEs ability in our upcoming WebDragDropExtender component. As the development of this new component has finished, I decided to blog more about this new component to give you more understanding and impression about the features available in WebDragDropExtender.

In this post, I would like to share how this new component could be used together with other Intersoft’s components such as WebGrid and WebDesktop. During the final phase of the samples creation, our team has just realized how drag and drop could change the way user interacts with application. It’s just beautiful.

WebDragDropExtender is designed with high extensibility and customizability as its key objectives. For instance, it includes special integration with WebGrid and WebDesktop and extend drag-drop behaviors in a new way that never possible before. We can easily, let’s say, to mark a WebGrid component as dragable element with multiple-selection behavior. Next, we can define WebDesktopManager as the drop target element with drop behavior for its shortcut icons.

This enables end users to drag one or more items from WebGrid component (inside WebDesktopWindow), to shortcut icon of WebDesktopManager. To get a big picture of the results, let’s look at the following screenshot.

dragdrop_2.png

The above good-looking screenshot might lead you a question, how complex the implementation could be? As the first vendor who embrace this new innovation, certainly there were a lot of challenges. However, we tried our best to make drag-drop as easy-to-use as possible through solid object-based encapsulation, deep integration with Visual Studio and designers.

For example, take a look at the following code snippets and you will agree that the implementation is pretty straightforward, and most behaviors can be added easily via declaratively or programmatically:

<ISWebDesktop:WebDragDropExtender ID=”WebDragDropExtender1″ runat=”server”>
     <DragControls>
           <ISWebDesktop:WebDragControl AdvancedProperties=”Type=WebGrid,ShadowWidthMode
=FixedWidth,ShadowWidthValue=200″
ControlID=”gridEmployees” />
   
</DragControls>
    <DropControls>
   
<ISWebDesktop:WebDropControl ControlID=”dm1″ AdvancedProperties=”Type=WebDesktopManager,DropableOnShortcut=True,
DetectOverlappingObject=True,ActivateWindowOnTaskBarOver=True”
/>
    </DropControls>
    
<ClientSideEvents OnDragOver=”DragOver” OnDragDrop=”DragDrop” />
</ISWebDesktop:WebDragDropExtender>

There are many other interesting features such as AJAX dragdrop server side event, Vista-style tooltip and visual indicator, complete client side events, drag-drop data validation, built-in cursor effects and more. More posts will follow. WebDragDropExtender will be part of WebDesktop 2.5, which will be released along with other new products in our 2007 R2 release.

As the next R2 release speaks, we are planning to deliver the first beta version on mid of June. The final release is expected to be available sometime in July (as of our original 2007 R2 schedule).

If you have questions or feedbacks around WebDragDropExtender, feel free to post your comments.

All the best,

Jimmy.