Tag Archives: WebGrid

Coming in 2011 R1: WebCombo 5 and Enhanced WebGrid for ASP.NET

The upcoming WebUI Studio 2011 volume release will include a host of new controls across all .NET development platforms, including Silverlight, WPF, and ASP.NET. In the past few months, I’ve been actively blogging about the upcoming new controls for the Silverlight and WPF development. In this post, I’ll unveil the new controls and key enhancements for ASP.NET platform that we will deliver in the 2011 volume release.

WebCombo 5 Features Client-side Binding and Web Services Support

The 2011 volume release will include a new version of our flagship ASP.NET WebCombo control. WebCombo 5 is now built upon the rock-solid Client Data Object Framework (CDOF), the same framework that powers WebGrid Enterprise 7 to provide rich client binding functionality. As the results, you can now use WebCombo to bind data to web services such as web services, WCF services, ADO data services, Azure or other cloud-based data services.

Client-side binding has a number of benefits such as producing smaller data output size between callbacks which greatly improve application’s performance in overall. Our test with various binding configuration show impressive results for client binding mode. See the following comparison chart.

Data size chart comparison

Notice that the WebCombo with any client-binding mode will reduce the data output size by 40 – 50%.

Another great feature that is made possible with the client-binding in WebCombo 5 is the pure client data source support. This means that you can create your own data source and bind it in the client-side, in the similar fashion as in server-side.

Interestingly, the client data source also enables you to retrieve data from RESTful services and bind the results to the WebCombo directly in the client-side. And the beauty of the client-binding framework is that all WebCombo features continue to work as expected, including multiple columns, auto-complete entry mode, link settings, multiple selection, and more.

That said, we’ve created several interesting new examples that demonstrate the power of the client-side data source. One of the examples is to retrieve photos from the Flickr through jQuery, and bind the results to the WebCombo in the client-side. See the screenshot below.

Binding WebCombo to Flickr Service

Full WCF Service Support in WebGrid Enterprise 7

Due to high demands, WebUI Studio 2011 will also ship with an enhanced WebGrid control for ASP.NET which includes full support for WCF data service. The WebGrid LINQ data provider has been enhanced as well to fully support data query and contract serialization in the WCF service.

You can now elegantly retrieve the select arguments and other passed parameters in the WCF service, which was one of the unsupported features in the existing release. With the updated WebGrid LINQ data provider, querying data requires only a few line of code, see the code example below.

[OperationContract]
[ServiceKnownType(typeof(List))]
public object GetCustomers(WcfDataSourceSelectArguments selectArguments)
{
    NorthwindDataContext context = new NorthwindDataContext();
    context.DeferredLoadingEnabled = false;
    context.ObjectTrackingEnabled = false;

    WebGridDataProvider provider = 
                   new WebGridDataProvider(context.Customers);

    return provider.Select(selectArguments);
}

The client-binding, data services, LINQ providers and cloud support are significant milestones in our ASP.NET development roadmap. They are the precursor to the modern, RESTful web development that is server-pages agnostic.

I hope this post gives you some ideas on the new capabilities that you can add to your web applications using the client-binding and WCF support in the new WebCombo and WebGrid. As usual, comments and feedback are open.

Best,

Jimmy

Improve Page Performance in WebGrid When Used With WebMenuBar

Recently some customers reported that they experienced performance issue in their page which contains WebGrid along with WebMenuBar control. The issue is noticable when using Internet Explorer browser to view the page. After further research, this performance issue occured only when the Grid has AutoFitColumns property set to true while the WebMenuBar is using predefined styles that produced from the server-side settings.

Apparently, Internet Explorer has a serious flaw in performance when a script is trying to add styles programmatically while loading, and at the same time when layouting is performed by other scripts.

To eliminate the performance issue, all styles in WebMenuBar should be defined as CssClass instead of using server-side predefined styles.

For comparison, I have attached two samples (with and without CssClass). Run the samples and compare the performance difference between them.

Note: This technique also works on standalone WebToolBar which causes the same issue.

Regards,
Handy.
Support Engineer.

Virtual Group Paging with Client Binding – In Depth

As we’ve just released WebUI Studio 2009 R2 service pack, you can now download and try many exciting new features that we included in the release. Read more about the new release here.

One of the much anticipated new features is the virtual group paging capability that we shipped in the service pack, which I’ve discussed in my previous blog post. In this post, I’ll show you the step-by-step walkthrough to use the virtual group paging along with client binding in your application.

The following walkthrough presumes you have been familiar with the client binding and batch update feature that introduced in the initial WebGrid 7 release. To save time and space, this walkthrough will be focused only on the new group paging features. If you would like to see the walkthrough for client binding and batch update, please refer to WebGrid 7 online documentation.

Configuring WebGrid for Virtual Load and Group Row Paging

In this walkthrough, I’m going to use the ClientBinding_SmartBatchUpdate.aspx sample that shipped in the initial WebGrid 7 release. To work with the sample, launch the C# Samples which is accessible from WebGrid 7 program group in the start menu.

Once you got the sample ready in your Visual Studio IDE, click on the WebGrid instance and open Property Window.

The sample used classic paging mode, so our first step is to change the paging mode to VirtualLoad since the group row paging is an integral part of VirtualLoad paging. To set the paging mode, expand LayoutSettings and set the PagingMode property to VirtualLoad. See below.

Configure_VirtualLoad

The next step is to enable the group row paging, customize the group row paging size, and optionally enable the preload group totals as well as other client binding related settings.

Still in the Visual Studio’s Property Window, expand the ClientBindingSettings property. You’ll find most of the client-binding related settings centralized in this property group. Enable the group row paging by simply setting its property to true and configure other settings to follow the screenshot below.

Configure_ClientBinding

We’re done with the WebGrid-level configuration.

Configuring WebGrid LINQ Provider

After configuring the WebGrid to use proper client binding settings and group row paging, the next step is to configure the new LINQ provider in your application.

To use WebGrid LINQ provider in your application, add the ISNet.Data.Linq assembly from WebGrid installation folder to your application’s Bin folder. If you’re installing using default setting, the new assembly should be located in C:\Program Files\Intersoft Solutions\WebUI Studio for ASP.NET\WebGrid.NET 7.0\Bin.

Note that this is a new assembly shipped in the service pack installer. Download the latest service pack installer here, or obtain the assembly in the provided samples in the last section.

Handling Data Operations with LINQ-to-SQL Classes

Since we’re using client binding mode with WebService datasource, we need to specify the ServiceUrl property to the path of the web service that handles data operations requested by WebGrid. The sample used in the walkthrough is using WebService.asmx.

In this walkthrough, we’re going to define the service methods used to perform data selection and batch update. The select method is defined in SelectMethod, while the batch update method is defined in BatchUpdateMethod. The property settings can be seen in the screenshot below.

Configure_ServiceMethods

After wiring the service methods, the final step is to write each web method in the web service that corresponds to the specified service methods above.

Open the code-behind file of the web service to your Visual Studio IDE by right clicking on App_Code\WebService.asmx.cs then choose View Code.

Write the code for the data selection such as below.

[WebMethod]
public object GetPagedBugs(DataSourceSelectArguments selectArguments)
{
    BugTrackerModelDataContext context = new BugTrackerModelDataContext();
    context.DeferredLoadingEnabled = false;

    WebGridDataProvider provider = new WebGridDataProvider(context.Bugs.AsQueryable());
    object data = provider.Select(selectArguments);

    if (data != null)
         return data;

    throw new InvalidOperationException("Unsupported operation type!");
}

So simple, isn’t it?

As I’ve mentioned in my previous post, the Select method of the WebGrid’s LINQ provider automatically handles all data operations – from data paging, grouping, filtering, aggregate computation, group header selection, and group row paging.

I’ve also mentioned that the LINQ provider supports data transaction operations too – such as Insert, Update, Delete and BatchUpdate. The following code shows how to perform batch update using the new data provider.

[WebMethod]
[GenerateScriptType(typeof(Bug))]
public TransactionResult UpdateBugs(List changes)
{
    BugTrackerModelDataContext context = new BugTrackerModelDataContext();
    WebGridDataProvider provider = new WebGridDataProvider(context.Bugs.AsQueryable());

    return provider.BatchUpdate(changes);
}

It’s as simple as that – thanks to the bare-metal architecture built on the client binding, batch update, virtual load paging and the LINQ data provider to produce this level of component integration.

Now save your changes and view your page in the browser. Try to group the column by Operating System and you should see something like the following.

WebGrid with GroupRowPaging

So far, you have learnt how to enable group row paging, customize the page size, activate group total preloading, and use the new LINQ data provider to simplify client-binding data operations. Your next step is to test the new features and implement them in your web apps.

Download Samples

In case you haven’t got the chance to download the full service pack installer, you can quickly download and install the latest bits right from your Update Manager. However, it’s highly recommended that you to go through downloading the full installer to enjoy numerous new and enhanced samples that we included in the release.

You can find the new samples that I used in the walkthrough here. To try it, simply copy the entire folder into the root project of WebGrid C# Samples. I’ve excluded the references to WebGrid and other framework assemblies to reduce the download size, although I decided to include the ISNet.Data.Linq assembly for your convenience.

Enjoy and happy developing!

All the best,

Jimmy.

Introducing Virtual Group Paging In WebGrid 7

We’ve been heavily focusing on performance and scalability aspects in the last two versions of WebGrid. As you may have already aware, WebGrid Enterprise 7 introduces numerous noteworthy new features such as client binding, JSON serialization, virtual rendering, efficient batch update and more – which elegantly address performance issues commonly found in enterprise applications.

The next release of WebGrid will still be strongly focused in various areas of performance to deliver even better data visualization component that is not only rich, but also speedy and highly scalable. Many of the new enhancements in the next release are designed to support combination of multiple advanced features, such as using client binding together with virtual load paging, grouping and data aggregates.

This post details some of the key enhancements to give you an insight for the usage in your applications.

Preload Group Totals

WebGrid 7 introduces a new client binding model where the data rendering is performed in the client-side instead of server-side. While there are many benefits with client binding, it falls short when it comes to extensive data aggregation such as calculating group totals on several hundreds or thousands of records.

The upcoming release will include a new capability to preload the group totals during server-side data fetching process, and hence eliminating the needs to compute heavy aggregation in the client-side, while maintaining the data footprint in a good balance.

This new feature also works along side with virtual load paging, which makes more sense on the “preloading” factor. Your users would definitely like the ability to see all group totals without have to expand each group to retrieve the rows. See the following screenshot for details.

Group totals are preloaded in advanced, allowing users to analyze data without have to expand the group row.

When using ServerDataSource type, the group totals will be automatically computed without additional user codes. Simply enable the PreloadGroupTotals property in ClientBindingSettings should do the job.

This new feature is also consistently supported by other client binding data source such as Web Service and WCF Service. Read the explanation in the latter section.

Group Row Paging

One of the advanced features that truly sets WebGrid apart from other Grids is its VirtualLoad™ paging capability. When enabled, virtual load retrieves only the first subset of data and then smartly loads the rest records as users scroll downward. The virtual load also uniquely supports grouping condition by displaying only the group headers and group totals in the first load. When users expanded a group row, WebGrid loads the child rows on demand via AJAX callback and then seamlessly inject it into the group row element. This gives users the feel of working with desktop apps.

Everything is good until your users accidentally grouped a data resulting with large amount of rows per group. It becomes worse when the Grid is working in client-binding since the rendering operation is done in the client-side. Imagine looping through thousands of records to perform string-extensive operations, the browser itself naturally refuse to complete the operation. And hence, you’ll get a prompt that ask you whether you want to stop or continue the script. Although you can choose to continue the script, it will still take several seconds to complete. This is certainly not a desirable result for most of today’s users who expecting applications with rich experiences.

Toward that end, we’re researching a solution that will not only address the performance issue permanently, but also works consistently across existing features and certainly with an intuitive user experience. As the result, group row paging is born.

With the new group row paging capability, you no longer have to worry how much data your Grid is presenting, whether they are grouped or not, whether they are filtered or not, WebGrid will display your data in the same timely fashion – consistently. To understand how group row paging works, please see the following image which also shows the new group row paging user interface.

The new group row paging interface.

The above sample is using GroupRowPageSize=10 configuration, which means only 10 records should be fetched in a time. As shown above, the new group row status enables users to easily understand the current state of the group row. It’s especially useful when the GroupRowPageSize is set to a larger value such as 100 (50 is the default) as users can see the current status without have to scroll back and forth to the group header. The new status bar also serves as command bar and allows room for improvements in the future, such as adding more buttons related to the group’s context.

Compared to the original sample without group row paging, the same group with 1,000+ rows now loads in a fraction of second, and that’s about 100x faster. The group row paging will consistently support multiple groups and other grouping-related features too.

It’s also noteworthy to mention that other useful features such as data editing, batch update, and row selection persistence will continue to work flawlessly along with group row paging.

Virtual Load Support For Web & WCF Service

Still around client binding and virtual load, we’ve now added virtual grouping (means virtual load + grouping) support for WebService and WCF Service as well. In the current release, the grouping process will invoke a Select command against the underlying WebService and retrieve all groups and rows from the database, which ultimately transmit 1-2MB size of data to the client. In most cases, you’ll get a server-side exception when the data exceeded 2MB because .NET’s JSON Serialization limits it to only 2MB by default.

In the next release, WebGrid will automatically send a new SelectGroup option in the select arguments when it attempts to perform grouping, or perform data selection in grouping conditions. This will allow developers to handle the group retrievals based on the select operation mode in the server-side and returns only the groups information to the client.

Our experiment shows that virtual grouping using Web Service or WCF Service is at least 4x faster and much more efficient than using ServerDataSource, especially when the processed data is huge. That is possible because developers have granular control over the data selection process, and in this case selecting only the groups from the backend directly without have to deal with the data rows.

The following code snippet demonstrates how it works.

if (selectArg.OperationType == SelectOperation.SelectGroup)
{
     var groupResults = dataSource.GroupByMany(selectArg.GroupByExpression);     
     return ProcessGroupRows(groupResults, selectArg);
}

Notice that the select operation type and group expression will be provided in the select arguments to allow developers to handle their data selection. The above sample is using LINQ to SQL to process the grouping request, which returns only the group rows required by WebGrid.

The two-minutes video below shows the improved performance and the user experiences when virtual load, group row paging, client binding and batch update are enabled together.

Furthermore, the new PreloadGroupTotals and GroupRowPaging feature that we discussed earlier can also be used with WebService/WCF Service data source type. In the client-side, WebGrid will perform the data rendering in consistent fashion, such as the new group status interface and the group loading behaviors.

WebGrid LINQ Data Provider

In addition to the performance and UX improvements, we’ll also ship LINQ to SQL data provider for WebGrid in the next service pack release. The new data provider greatly simplifies the codes to perform data operations using LINQ to SQL, specifically when paired together with WebGrid’s client binding.

The WebGrid LINQ data provider minimizes complexity and slashes dozen line of codes into one line. See the following comparison.

The following is the original codes that we shipped in our WebGrid 7 samples.

Original, lenghy codes required for data operation.

And here’s the new approach using WebGrid LINQ Data Provider.

Simplified code using WebGrid LINQ provider.

One code rules it all – that’s what I really like about this new data provider. The generic-based class architecture enables you to easily instantiate the provider on any of your data model by simply passing the data type – making development more efficient and fun!

In this first version, the WebGrid LINQ provider will automatically handle the following select operations during client binding:

  • Data Selection
  • Sorting
  • Filtering
  • Grouping
  • Paging and Total Rows Count
  • Group Selection
  • Group Row Paging
  • And yes, group totals too.

In addition to data selection, the provider also includes full-featured transaction operations, such as:

  • Insert
  • Update
  • Delete
  • Batch Update

And now comes the best part, the LINQ data provider is free for all WebGrid licensees. To start using it in your application, simply add reference to the new assembly named “ISNet.Data.Linq” which can be found in WebGrid’s installation folder. When the enhancements are rolled out in the next service pack, I’ll post more blogs to cover how to use them in more details.

Summary

This blog post gives you an insight and early look on some key enhancements that we’re currently working on for the next WebGrid release. Customers who wish to test drive these new enhancements, please obtain the nightly build (and yes, we have prepared some new samples too!) by directing your email to our Support Team.

We hope customers to participate in the beta testing and give feedback, so we can review and take account your feedback before wrapping up the final features. You can send your feedback to Feedback Team for private discussion (if your feedback includes confidential information related to your apps etc), or to Community Forum for open, shared discussion.

All the best,
Jimmy.

First look: WebGrid Enterprise 7 R2

As announced in our recently released newsletter, WebUI Studio 2009 R2 will ship with an even refined WebGrid featuring a vast array of new features that you’ve been asking for months. This post will further unveil the new amazing stuff that we’ve made available in WebGrid 7 R2.

If the previous release was focused much on performance and major functionality features, then the upcoming release balances it well with bunch of visual goodness and impressive user interface features that you would love to use.

Well, let’s get it started!

Three new sleek visual themes

Designing a professional theme isn’t as easy as it seems to be – especially on the scale of WebGrid which contains dozens, if not hundreds, of user interface elements to be styled. Unlike the previous themes, each new theme now includes the styles for context menu, edit controls, ribbon, and pivot charting UI in addition to the table styles.

With the recent release of Windows 7, I suppose many of you, as professional developers, must have running on Windows 7 already. If you loved what you see in Windows 7, then you gotta love WebGrid’s new Windows 7 theme. See the screenshot below.

WebGrid7 New UI Themes

If you have been seeing too much of blue-tone colors, you may want to try something bold – giving a different and unique feel to your applications. You can now choose either a glassy, bold black theme, or a clean, metallic silver theme.

The following images show the pivot charting interface using the black theme and the tables using silver theme – all designed by our professional artists. Click on the image to see the large version.

Pivot Charting in Black Table View in Silver

Best of all, it only takes a property set to switch your existing theme into one of these beautiful themes. And since the themes are built into the default styles, WebGrid doesn’t produce any additional CSS output and thus keeping your page slim and fast as it was before.

Win7-style column action UI

An enterprise Grid no longer suffice with only advanced functionalities. Today’s users demand more – great enterprise features and also intuitive user experiences making their daily tasks even easier and simpler.

That said, WebGrid 7 R2 introduces a nice UI feature to do just that – new column action interface similar to Windows 7 Explorer. We’re glad to be able to make it happen in this release due to huge demand and requests from our valued customers.

So what exactly is column action? It’s a small visual hint that appears when you hover on a column. When clicked, certain options that applicable to the column’s context will be displayed. The column action essentially allows user to conveniently access on column-related actions through a single click. Haven’t got the big picture yet? Try it in your Vista or 7’s Explorer, or see the following shot.

ColumnAction Basic

The above sample shows the basic column action, which displays WebGrid’s built-in context menu by default. The column action style can also be customized – which is also well styled in existing and new themes.

Another interesting capability that you will really love is the possibility to customize the entire column action behavior. For a quick instance, how about showing customized predefined date filtering commands? Or possibly an embedded calendar allowing users to select a date and see all files modified by that date?

Well, all the above scenarios can be elegantly done by overriding the new OnColumnAction event. And even better, you can do beyond that and anything that only your creativity limits. The following image shows the new WebGrid sample that displays a custom context menu in the column action UI.

ColumnAction Custom

I hope you’ve got your appetite boosted thus far 🙂 More impressive features are following.

New WebCalendar Custom Editor

In addition to many UX enhancements, this new WebGrid release also revisits some basic and common functions such as editing controls. Although we already have built-in Calendar edit type since version 3, it quickly decline on user’s expectations due to its outdated UX and navigation. As the result, the new WebCalendar custom editor is now introduced.

The new WebCalendar custom editor is based on our flagship WebScheduler’s calendar, which runtime is loyalty free when integrated with WebGrid. The WebCalendar provides numerous advanced features not available in the built-in Calendar edit type – such as multiple months display, show week numbers, strong localization support, date format customization and much more.

New Vista-style Calendar

The new WebCalendar editor also has revolutionary navigation built into its main UX. Instead of showing a long list of years to choose from, WebCalendar groups the years and show them in the main WebCalendar’s user interface – allowing users to conveniently navigate between months, years and decades in a more intuitive way. And the best of all, it shows 2x faster than the built-in Calendar – thanks to the lightweight component design.

WebTextEditor Integration

Rich text editing integration is probably one of the most requested features since 2004 when we first pioneered the custom editor architecture that introduces robust interfaces to manage existing server-side controls as WebGrid’s edit control. One of our goals was to create a truly rich editing environment where users can write rich formatted text, perform spell checking, uploading files asynchronously – all within the WebGrid’s sophisticated inline editing environment.

The vision of rich text editing integration is successfully completed in WebGrid 7 R2 with the addition of new WebTextEditor custom editor.

Released in 2009 R1 earlier this year, WebTextEditor is perhaps the world’s most advanced rich text editing component where all functions are so thoughtfully designed and highly integrated – that includes inline spell checker, built-in media gallery, natural UX design and real-time file uploading (hey, you can even see the progress in the sleek-designed status bar) as well as dozens of innovative features not available else where! And the best part is that you can now enjoy all these powerful features inside WebGrid’s inline editing.

To give you a big picture on the editor integration, please see the following screenshot taken from the new reference sample.

WebTextEditor Integration

Since the WebTextEditor is a pure ASP.NET server-side control, you can easily customize everything – from the design aspects, behaviors to any single feature. When integrated to WebGrid, notice that it’ll automatically add the “Update” and “Cancel” command in the toolbar.

Also please be noted that WebTextEditor is sold separately as a standalone product, which is part of WebUI Studio 2009 Suite/Subscription. If you’ve got an active subscription, rest assured you’ll enjoy the new editor integration support without any additional costs when it comes out.

And More

There are so much more that can’t be detailed in this single post. Some noteworthy top-requested features are improved designer, context menu customization, new client-side events for batch update and UI customization, advanced column filter, and XHTML document type support.

By now, you have learnt some of the top features available in the upcoming WebGrid release. I also hope that it won’t be taking too long to pass the new bits to your hand so you can get started with all these exciting new features.

Got questions, comments or feedback? Please post it in the blog’s Comments section. Thank you!

All the best,
Jimmy.

Rich Features in Low Client Footprint

Continuing an existing discussion on client footprint optimization especially when a lot of features in WebGrid are enabled, I’ve decided to do a little research on the best way to compress these client resources with a balanced server load yet acceptable compression result.

In this research, I’m running on Windows 7 Professional, IIS 7.5, Visual Studio 2008 SP1, and HttpWatch Professional installed with WebGrid Enterprise’s samples.

The Challenges

Using the Enterprise sample with all features enabled, the total size of client resources — including javascript and styles —  is around 1.2 mb with all compression disabled. This would be a potential issue for users in remote area with slower internet connection.

No_Compression

Without compression, the client resources size is around 1.2 mb.

The Solutions

SmartWebResources’ Compression Technology

SmartWebResources™ technology not only introduces unique architecture for hassle-free deployment, it also comes with built-in compression feature with a reasonable result. Simply put the key below in your web.config to enable the compression:

<add key="ISNet.WebUI.ISRes_Compressed" value="true" />

The result will look like the screenshot below.

SWR_Compression

The SmartWebResources’ squeezes client resources to 680 kb, saves roughly 60%.

IIS 7 Dynamic Compression

The latest IIS now offers easy customizability in more user friendly format. Unlike its previous version, compression can be enabled without having to edit a certain .config file. You can enable/disable the compression directly in the IIS Manager.

IIS_Manager

If you wish to learn more about IIS 7’s compression, please click here.

The default compression level is 7. The compression level in IIS is, fortunately, customizable although you won’t find this setting anywhere else in the documentation.

To change the compression level in IIS 7, run the following syntax from command line:

[WinDir]\System32\inetsrv\appcmd set config /section:httpCompression
/[name='gzip'].staticCompressionLevel:[CompressionLevel]

The acceptable value for compression level is 1 – 10. Setting the compression level to 10 will instruct the IIS to use the best compression quality which produces the smallest output. While it’s great to be able to compact the client resources and deliver very small output to client, it requires a more powerful server for heavier processing and overhead.

In my opinion, the default level is the best option for web applications that run on moderate servers. It doesn’t compress as much as level 9 or 10, but offer less overhead on the server.

IIS_Compression

IIS 7 Compression (level 7)

Conclusion

If you have the direct access to the deployment server which used IIS 7, IIS compression is definitely the best solution to keep your applications speedy with low client resources footprint. However, if you’re hosting your web applications in a shared server, or if you don’t use IIS 7 yet, then SmartWebResources compression is your best choice. It may not compress as much as IIS, but it still offers reasonable compression result with much lower server overhead.

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 !