We’ve recently released our new Unified Theming for WebUI, which will dramatically alter the look and feel of your WebUI-powered apps, giving it a fresh, modern look and feel. But, how will you be able to take advantage of this new feature? In this post, I’m going to show you how convert the WebGrid Enterprise sample to use the new WebUI Unified Theming. At the end of this post, you should have the following result.

Here’s a single image of the revamped sample in full Unified Theming glory.

Ready to begin?

What You’ll Need

Before you begin, you’ll need to ensure that you have properly installed Visual Studio 2012 or higher and have installed Premier Studio 2016 (or higher). If not, feel free to perform Request Trial from our site to get the latest installer. Or, if you have purchased a subscription, you can easily obtain the latest version of the installer by simply signing in to your account.

Let’s Begin.

In overview, here’s what we’re going to accomplish:

• Create a new Unified Theming project using the new Project Template.
• Import the existing WebGrid’s Enterprise sample (from the old sample) to the new project.
• Remove all style-related attributes.
• Convert the sample to use the new Unified Theming.

Create New Unified Theming Project

Open up Visual Studio and create a new Unified Theming project by selecting Visual C#, Intersoft Solutions, ASP.NET, Intersoft Unified Empty Web Application, as shown in the illustration below. Let’s call this project FirstUnifiedTheming and hit OK.

Let’s import the Enterprise.aspx from the old sample to our project. To do this, right-click on your solution, then choose Add, Existing Item.

Navigate to C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid and select Enterprise.aspx. Just select the .aspx file and its code-behind will be automatically added as well.

Now that you have the file imported, we need to convert it so that it will be compatible with Web Application. Select the file, then go to Project, then choose Convert to Web Application as shown below.

Removing Unnecessary Styles

By default, the Unified Theming project template provides a handy App.master file contained in the Master folder. So, we can use this master file for our imported sample. Change the MasterPageFile for the Enterprise.aspx from ./DefaultMaster.master to ~/Master/App.master.

Next, search for this file that contains any “style” attributes. To do this, press Ctrl+F on your keyboard and search for “style” (without the quotes).

Here are the list of attributes / elements that you have to remove within this file:

• UseDefaultStyle=”True”

• DefaultStyleMode=”Elegant”

• <CellStyle HorizontalAlign=”Right”></CellStyle>

• <CellStyle HorizontalAlign=”Center”></CellStyle>

Note that these are the attributes contained in this file. In your existing project there might be more “style-related” attributes that you need to remove.

Next, let’s fix the code-behind so that this project is compile-able. To do this, open Enterprise.aspx.cs, and delete this line.

using Intersoft.SampleFramework.V2009;

Also remove, the three methods: WebGrid1_AddRow, WebGrid1_UpdateRow, WebGrid1_DeleteRow. Then, in Enterprise.aspx, remove this line.

Since this is a Web Application project, not a Web Site project, you’ll need to rebuild it once before you can preview the result in the browser. To rebuild the project, right-click on the project/solution, and hit Rebuild.

After the rebuild process is done, let’s try viewing this project in the browser. Right-click on the Enterprise.aspx file and choose View in Browser.

When you run the project, you’ll get the following error.

This indicates that the WebGrid was unable to connect with the data source. Let’s resolve this by adding the necessary database file and modifying the Web.config‘s connection string.

Adding the Database

To make our project’s file organization neat and less cluttered, let’s create a new folder called Common at the root of the project. Right-click on the project and select Add, New Folder.

Give it a name of Common. Let’s add the database file used for the project. Right-click on the newly-created Common folder and choose Add, Existing Item.

Choose the file named dsEnterprise.xsd contained in the C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid\App_Code.

Repeat the process for AppData folder. Right-click the AppData folder, choose Add, Existing Item. Then choose Northwind.mdb file contained in C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\ISNet.WebUI.Samples\cs\WebGrid\App_Data.

Next, we need to modify the SchemaType and TypeName of ISDataSource so that it will point to the correct database file. To do this, open the Enterprise.aspx file and perform a Replace All for the following string: SchemaName=”dsEnterprise (the unclosed quotes are intentional) to SchemaName=”FirstUnifiedTheming.Common.dsEnterprise (again, the unclosed quotes are intentional).

Repeat the process one more time for the TypeName. Search for TypeName=”dsEnterprise and replace it with TypeName=”FirstUnifiedTheming.Common.dsEnterprise. Save the file.

Lastly, let’s add a connection string in the Web.config file for this a new connection the Northwind database. Open up Web.config and add the following connection string to the ConnectionStrings node:

<add name=“NorthWindConnectionString“ connectionString=“Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\NorthWind.mdb;Persist Security Info=True“ providerName=“System.Data.OleDb“/>

You’re Almost There.

We’ve roughly finished the migration, but it’s still missing a few final touches. For now, refresh your browser to see the result.

As you can see, the WebGrid is now applied with Unified Theming. But there are are still two issues left:

• Adjusting the height of the WebGrid
• Providing the missing icons.

Let’s address these issues. To adjust the height of the WebGrid, you can easily do so by modifying the Height attribute of the WebGrid inside the Enterprise.aspx file. Give it a good value, perhaps 90%.

We also need to modify the height of the parent container to 100%. To do this, open up App.master inside the Master folder and add inline-style for the parent container with height set to 100%.

Next, let’s provide the missing image icons. To do this, right click on the Assets folder and select Add, New Folder.

Give it a name of images. Add the following images from this folder C:\Program Files (x86)\Intersoft Solutions\Samples\For ASP.NET\WebUI.Unified.Samples\assets\images:

• Customer.svg
• order-detail.svg (rename this file to order-details.svg)
• orders.svg
• shipvia1.svg
• shipvia2.svg
• shipvia3.svg

You should have the following images as follows.

Lastly, perform a Find and Replace for the following string inside the Enterprise.aspx file. Replace ./images with ~/assets/images.

Then, another Find and Replace for .gif to .svg. Save the file, rebuild the project and refresh your browser.

We’ve successfully set the WebGrid height to fill 90% of the parent container, in which the parent container has been set to 100% height, as well as providing the correct SVG icons for the WebGrid.

One cool thing about the SVG icons are they’re actually vector icons (SVG is a short form of Scalable Vector Graphics), which will retain its crispiness and hi-res colors when viewed in any devices with varying screens resolutions. To do this, try bumping up the zoom level to 400% or higher.

Conclusion

As you can see, adopting the Unified Theme in your project is quite simple and easy. To learn more about Unified Theming, I highly recommend you to explore the documentation about Unified Theming. You can find the link to the finished sample here.

In this post, we’ve learned how to create a Unified Theme project in the shortest and fastest manner using the project templates. In smaller projects, this approach is feasible, but not for larger projects. If you wish to focus solely on migrating your project to Unified Theming, you can follow this documentation: Applying Unified Modern Theme in WebUI Application.

You can also find local working samples once you’ve installed Premier Studio 2016 on your computer. To get started quickly with the local samples, please read my previous blog post.

Should you have any questions, feel free to initiate a live chat session with us and our team will get back to you as fast as we can.

Till next post,
Nicholas Lie

Our months of hard work finally paid off. It’s finally here. With excellent craftsmanship and fine attention to detail, we’re very proud to announce the all-new and powerful WebUI 2016. The entire WebUI lineup consisting of highly-advanced 40+ web components now finally receives a truly deserved facelift.

Accessing the New WebUI Live Experience

For so long, customers have enjoyed our live WebUI demos through http://live.intersoftsolutions.com. While this experience is adequate, being redirected to another site for a hands-on experience just won’t cut it anymore. So we decided to integrate the new samples right our website. That’s right, now you can experience the new WebUI samples with the gorgeous unified modern theme, right from our website.

Don’t worry, we’ve put these buttons everywhere, so you can easily access them from various pages in WebUI, although it is very much recommended to access them from /WebUI. Should you miss this experience and open the old live samples, you’ll be greeted with the following dialog box.

Without further ado, let’s get right onto the new WebUI Live Experience.

The Home Screen

Right when you launch the new Live Experience, you’ll be greeted with a nice and modern blurred background, showcasing the flagship products of WebUI. This experience works best on modern desktop browsers supporting HTML5 and CSS3.

If you click on products such as WebDesktop and WebEssentials, you can also find a grid of sub-components in them.

WebGrid

When you launch WebGrid for the first time, you’ll be greeted with the First Experience.

This first experience sample demonstrates many of the top UI features available in WebGrid, combined with some unique features such as column freezing, filter suggestion and more.

Some of the top features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Improved user interface with a new set of fresh icons, background images and UI elements.
• New context menu engine. Try to right click on the Grid area to experience the new context menu system.
• LiveFreeze™ column freezing feature. The only column freezing implementation that perfectly simulates Excel® freezing behavior.
• Automatic Filter Suggestion. Try to right click on a cell (eg, “Owner”), then choose one of the available filter options. The suggested filter options are based on selected cell’s data type and value.
• Filter Status Indicator. When one or more columns are filtered, notice that the filter indicator status is changed to “Filtered”. This indicator helps end users to understand the current state of filters without has to display filter bar. You can click on the filter status indicator to toggle the filter state.
• SmartWebResources™. This innovative technology enable this sample to run without dependencies to “physical” client resources. All client resources such as scripts and images are retrieved directly from resource assembly.
• Declarative datasource control binding. Notice that there are no codes required for the data binding operation (see C# and VB tab).

Samples Navigation Experience

To navigate between samples, you can easily use the arrows on the left and right-hand side of the screen, or use the menu button on the top-left corner of the screen. This will open the Menu panel and you can easily jump between samples.

If you wish to go back the controls grid, simply click the Home button. Should you encounter any problems or hassles with the samples, feel free to chat with us directly using the live messenger on the bottom-right corner.

WebCombo

This the First Experience when you launch the WebCombo sample.

This sample demonstrates the unified modern theme of WebCombo and many of its key features such as SmartWebResources™ and declarative datasource control binding.

Notice that there are no code required for the data binding operation (see C# and VB tab). Try experimenting with the WebCombo controls in this page to see some unique features in action. For instance, Reports-To is using multiple selection feature combined with image column type.

WebInput

This is the First Experience when you launch the WebInput sample.

This sample demonstrates the unified modern theme of WebInput and its key features.

Some of the new features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Ordinary input text and multiline input text features, like demonstrated in FirstName, LastName, Address, City, Country fields.
• Display and edit format features, like demonstrated in Birth Date field.
• Other edit format feature, like demonstrated in First Name, Last Name, Phone, Extension fields.

This sample also demonstrate integration between WebInput and .NET Validator Control such as RequiredValidator and CompareValidator.

WebScheduler

This is the First Experience when you launch the WebScheduler sample.

This sample is designed to model a car-rental tracking scenario – demonstrating how WebScheduler performs in real-world enterprise application. Bound to over 3000 events, WebScheduler delivers responsive user experiences regardless of the data size.

The powerful JSON technology and smart client paging rendering significantly improved the overall WebScheduler performance to a new level not possible before. This sample combines both the ViewPort™ and EventPageSize™ Client Paging rendering enabling WebScheduler to load in a flash.

Try to play around with the scheduler. Use the upper right vehicle locator for a quick jump. Click on the visual indicator on the resources area to populate the car information.

WebDesktop

This is the First Experience when you launch the WebDesktop sample.

This reference sample demonstrates the beautiful modern theme and many groundbreaking features in WebDesktopManager such as shortcuts and comprehensive window management. It also showcases the integration of various WebDesktop components to create full-fledge and immersive web applications, which include WebPaneManager, WebToolBar, WebTab, WebDialogBox, WebNotification and more. Try to double click each icon to see the WebDesktop components in action.

WebEssentials

This is the First Experience when you launch the WebEssentials sample.

This reference sample perfectly demonstrates WebEssentials component suite which comprised of 8 innovative controls, ranging from accordion, calendar, slider, to rating. WebEssentials enables you to create interactive and visually engaging modern web applications.

In this Online Resume scenario, WebAccordion is used as the main container, dividing this lengthy form into three sections. WebProgressBar is used to indicate the section completion process. The bar will be filled as users click on next. WebCalendar is used for date input and WebSlider for selecting a specific range. WebSlidingMenu is used on the right FAQ section. Click on a question and the answer is shown in a swift and smooth sliding animation.

Additionally, WebFlyPostBackManager is used to populate the section’s content on demand as users click the next button. In Section 1, WebFileUploader is used for image uploading, demonstrating its seamless AJAX upload experience.

WebTextEditor

This is the First Experience when you launch the WebTextEditor sample.

WebTextEditor is the industry’s first text editor that integrates intuitive writing tools, in-line spelling checker, and sophisticated uploading capability in a single interface – enabling you to rapidly build rich CMS application that delivers breakthrough, unique editing experience to your end users.

This sample demonstrates tight integration with Desktop Manager, Spell Checker, File Uploader and many UI components from WebDesktop to produce sophisticated, state-of-the-art CMS application that ultimately feels like a desktop word processing application.

WebTreeView

This is the First Experience when you launch the WebTreeView sample.

WebTreeView provides rich features that lets you easily create hierarchical data presentation. This powerful control incorporates numerous unique features such as:

• Data Binding
• Tristate checkbox
• Add, edit, and delete node
• Drag and Drop node(s)
• Keyboard Navigation
• Load On Demand
• Layout Manager and Structure Manager
• Auto Postback
• Flexible and highly customizable to meet your design needs
• client-side API – WebTreeView Designer

The above sample utilizes Enable Tristate CheckBox and Keyboard Navigation features.

Explore the Samples

We hope that you liked our new samples. To start taking advantage of our best WebUI release yet, feel free to download the new Premier Studio 2016 here. Happy exploring!

The web development trend recently revolves around providing great look and feel for the users of World Wide Web. Nowadays, we see lots of beautifully-designed web components along with the rise of CSS frameworks such as Bootstrap and even Material Design. These frameworks provide a way for developers to universally theme their web apps, making it consistent and beautiful for their users, across the entire site.

WebUI Studio. Undoubtedly, this is our best-selling suite ever. With impressive range of versatile, ready-to-use components, WebUI Studio has become the industry’s benchmark for suite of web components. More than just simple controls, WebUI components are designed to be functionality-rich, making developers’ lives much easier whilst bringing high-performance web components to their ASP.NET web applications.

Just, what if, you can incorporate these beautifully-designed elements to WebUI? At Intersoft Solutions, we take pride in our meticulously-designed user experiences. In our next biggest release ever, we’re going to bring a whole new look and feel of your web apps. Embrace the next evolution of web apps with WebUI. First-class web components meets first-class design.

Advanced Functionality Meets Beautiful Design

Before diving further, can you take a guess at some of these WebUI controls below?

From the top: WebCombo, WebInput with DateTime Picker, WebToolBar, and WebInput with Calculator Editor. Gorgeous, aren’t they? And this is just the tip of the iceberg. Goodbye old-fashioned looking web applications. It’s all thanks to the new technology we’re building for the next release, called Unified Theming.

Introducing WebUI Unified Theming

In the current release, you can already style WebUI controls through Layout Manager or via API at runtime. However, you need to do the styling on each WebUI control individually which could be tedious and repetitive for dozens of controls. This is going to change in WebUI vNext. Meet our brand-new Unified Theming framework.

The new Unified Theming allows you to apply consistent look and feel across your entire web applications just by using a single theme definition, similar to the ones found in popular CSS frameworks. Bigger buttons, more rounded buttons, gradient-styled buttons, flat buttons, anything. You now have total control over your app’s look and feel.

For example, you wish to change the corner radius of a popup panel. Just configure it once, and all of the WebUI controls in your application that use the popup element will automatically apply the same look and feel. To achieve this, it requires delicate, yet rigorous engineering to ensure all 30+ components work as expected using the new unified theming feature. Not only that, the combination of settings provided with each control makes it even tougher to achieve a consistent look with whatever settings you throw at it. And yes, there’s that cross-browser support as well.

When we designed the unified theme, we make sure that each control works in concert with native features and behaviors of the control itself. For example, here’s how it looks when the WebCallOut Bootstrap theme is applied with various types of settings. Here’s a shot with WebCallOut’s PointingPosition set to PointingBottomRight and PointingTopLeft.

And here’s another with PointingPosition set to PointingTopRight and PointingBottomLeft.

And the best of all, the Unified Theming framework leverages the industry’s most popular CSS extension language today, SASS. Written entirely in SCSS syntax, we’re able to streamline all styles across 30 components, creating variables and mixin that you can easily customize. This also means that you don’t have to learn a new language to customize the styles. Instead, you can use any SASS compatible editors such as Visual Studio 2015 or Sublime.

Bootstrap-themed WebUI

Along with the unified theming framework, we will also ship a new Bootstrap theme for the entire WebUI components. Let’s take a look at some of the WebUI controls restyled with Bootstrap theme.

WebButton

The rounded corners and vibrant pastel colors for the WebButtons are inspired from Bootstrap. All color schemes from mouse-over, default, disabled, and selected states are taken from Bootstrap.

WebProgressBar

These Bootstrap-themed WebProgressBar have arrived to captivate your users with vibrant, animated colors. The wide range of colors are also taken from Bootstrap. Also pay attention to the nicely shaped rounded corners of the progress bars.

WebTab

Each tab in WebTab is now more spacious with generous padding on all its sides. We’ve also added various Bootstrap styles such as Frame, Frameless, Pill and Line tabs. And to make everything look really great even in hi-res display, we’ve replaced all common icons with font-based icons, all comes pre-built in the WebUI Bootstrap theme.

Coming in 2015 R2

What you see in this post is just a small glimpse of what’s next to come. We can’t wait to show it live to you in the next 2015 R2 release. It’s going to be the biggest release ever! Refreshing the entire WebUI lineup, a major release for Crosslight, and the launch for ClientUI Reporting for WPF with charting will be the main dish for this release. Stay tuned for more exciting updates!

Cheers,
Nicholas Lie

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.

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.

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

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.

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.

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.

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 FilesIntersoft SolutionsWebUI Studio for ASP.NETWebGrid.NET 7.0Bin.

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.

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_CodeWebService.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.

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.

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.

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 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.

And here’s the new approach using WebGrid LINQ Data 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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]System32inetsrvappcmd 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 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.

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

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

�
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

�
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

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

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 !