Category Archives: 2012 R2

Create Drill Down Chart with UXChart

Quite often, you will need to allow your user to drill-down data from yearly data to monthly or from categories to individual items. Now it’s very easy with our new concept which gives you freedom to create unlimited levels of drill-down charts from a single data source in minutes.

In this blog post, I want to show an example of drilling down chart data, i.e. to display master-detail data in the same chart, by clicking a point of the first series will let another series shown, which represents detailed data related to the selected point. This is critical for creating interesting and fun charts to interact with. This blog entry includes basic knowledge of what you can do with our chart right out of the box. See the following screenshot for the drilling down chart that we want to create.

Drill down chart

To get started, we use the Child properties in UXChart to specify which chart that we want to display as detail of origin chart. Specifically, all charting collections must be defined in View in a first place. On first load, you are allowed to display one chart only, and the others’ visibility must be set to collapse. See the code below:

<dataVisualisation:UXChart x:Name="Chart1" Visibility="Visible" Child="{Binding ElementName=Chart2}"
                        DrillDownCommand="{Binding DrillDownCommand}">

<dataVisualisation:UXChart x:Name="Chart2" Visibility="Collapsed"  >

Next, we need to hook our custom command to control the drilldown action, we called it DrillDownCommand.

  public DelegateCommand DrillDownCommand { get; set; }

And then we assign DrillDownCommand to some execute the method in our ViewModel.

 this.DrillDownCommand = new DelegateCommand(ExecuteDrillDown); 

In the execute method, we can initialize the data from the data source and retrieve detail information about the chart itself.

private void ExecuteDrillDown(object parameter)
   UXChartDrillDownCommandArgs args = parameter as UXChartDrillDownCommandArgs;

   if (args.Level == 1)
     Data parent = args.DataPointContext as Data;
     if (parent != null)

In conclusion, with simple implementation, we already make drill down function very simple and effortless. Now feel free to try and make your very own drill down chart. There’s unlimited level that you can figure out and explore.

For more information about our ClientUI control in Silverlight & WPF, please refer to the online documentation. You can download our sample here. Feel free to drop us any questions or feedback.

Till we meet again.


Intersoft Product Survey 2013

The arrival of Windows 8 adds more choices to the platform stack that mobile developers should consider. So my question is, do you plan to build Windows 8 apps, or perhaps you already built one? As we’re planning our roadmap ahead, we’d love to hear from you – which platforms will you build your next apps on, the challenges you’re facing, and what tools you need to get your jobs done right.

Join our 2013 product survey and place your vote so we can align our next product roadmap to your development needs.

Your participation is an effective way to present your thoughts and opinions about our products and service to the management of Intersoft Solutions. I do believe that your valuable feedback would be very useful to help us improve our products and services in the future.

If you have any questions or technical difficulties, please don’t hesitate to drop an email to me at

Thank you for your time and participation.


WebFileUploader: Store Uploaded Files in Database

Last year I posted an article which showed how to store the files which are uploaded using UXFileUpload (ClientUI control for Silverlight and WPF) in database. In this article, I will show a similar scenario which can be done using WebFileUploader, a member of Intersoft Solutions ASP.NET controls.

WebFileUploader is an easy to use; high performance and advanced file upload component which allows you to upload multiple files without page refresh. WebFileUploader uses 100% HTML technology for all its features, and fully supports all modern browsers including Firefox, Safari, Chrome and Opera. Using 100% HTML technology means that WebFileUploader doesn’t require Flash plug-in to support multiple files uploading and many other features.

This scenario, to store the uploaded files in database, can be divided to two parts. The first part is to configure WebFileUploader for IIS application; and the other part, using server-side code to process uploaded files and store them into database.

To configure WebFileUploader for IIS application

Some configuration is needed in the web.config to run WebFileUploader in IIS. The list below shows how to configure WebFileUploader for IIS 7 application.

  1. By default, ASP.NET application restricts maximum request length to 4 MB. To enable our application to accept larger files, please configure the maxRequestLength in web.config to higher value. The maxRequestLength value is measured in kilobytes. Here is a snippet to increase your file size to 100MB.
        <httpRuntime maxRequestLength="102400" />
  2. Add WebFileUploader handler to <handlers> section under <system.webServer>. Here is the snippet.
    <add name="WebFileUploaderHttpHandler" verb="GET"
      type="ISNet.WebUI.WebTextEditor.WebFileUploaderHttpHandler, ISNet.WebUI.WebTextEditor"
      preCondition="integratedMode" />
  3. Add WebFileUploader module to <modules> section under <system.webServer> in our project web.config. Here is the snippet.
    <add name="WebFileUploaderHttpModule" preCondition="managedHandler"
      type="ISNet.WebUI.WebTextEditor.WebFileUploaderHttpModule, ISNet.WebUI.WebTextEditor" />
  4. Set maxAllowedContentLength to a higher value, which is measured in bytes, to 100MB in web.config. This attribute specifies the maximum length of content in a request. The default value is 30000000, which is approximately 28.6 MB.
          <requestLimits maxAllowedContentLength="104857600" />
  5. Unlock the mode override in applicationHost.config. Open IIS 7 application configuration file, the default location is in C:\windows\system32\inetsrv\config, and change the overrideModeDefault to Allow.
    <section name="requestFiltering" overrideModeDefault="Allow" />

Save the changes and then try to upload a file. If WebFileUploader has been successfully uploaded the file to the designated folder, it means that we are on half way to achieve the goal and ready to proceed to the next step.

Using server-side code to process uploaded files and store them into database

A database, called Files.mdf, is added into the App_Data folder of the web project. This database has Files table which consists of following fields.

Column Name Data Type Allow Nulls
Id uniqueidentifier False
FileData varbinary(MAX) True
OriginalName nvarchar(50) False
DateCreated datetime False

A Stored Procedure, sprocFilesInsertSingleItem, will be used to insert a single item of file into Files.mdf database.


Next, we are going to use the OnAfterUpload server-side event of WebFileUploader. It is the server-side event which fired when a file upload is succeeded. Generally, there are three processes to be performed on this event.

  • Read and manipulate the uploaded file using FileStream class.
  • Invoke and execute sprocFilesInsertSingleItem stored procedure to store the uploaded file on Files.mdf database.
  • Delete the specified file from the UploadPath folder.
protected void WebFileUploader1_AfterUpload(object sender, ISNet.WebUI.WebTextEditor.WebFileUploaderFileEventArgs e)
    byte[] fileData = ReadFile(e.WebFileUploadInfo.Path + "\\" + e.WebFileUploadInfo.FileName);
    string originalName = e.WebFileUploadInfo.FileName;

    using (SqlConnection mySqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Files.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"))
        // Set up the Command object
        SqlCommand myCommand = new SqlCommand("sprocFilesInsertSingleItem", mySqlConnection);
        myCommand.CommandType = CommandType.StoredProcedure;

        // Set up the ID parameter
        SqlParameter prmId = new SqlParameter("@id", SqlDbType.UniqueIdentifier);

        Guid id = Guid.NewGuid();
        prmId.Value = id;

        // Set up the FileUrl parameter
        SqlParameter prmFileUrl = new SqlParameter("@fileUrl", SqlDbType.NVarChar, 255);

        prmFileUrl.Value = DBNull.Value;

        // Set up the FileData parameter
        SqlParameter prmFileData = new SqlParameter("@fileData ", SqlDbType.VarBinary);

        prmFileData.Value = fileData;
        prmFileData.Size = fileData.Length;

        // Set up the OriginalName parameter
        SqlParameter prmOriginalName = new SqlParameter("@originalName", SqlDbType.NVarChar, 50);
        prmOriginalName.Value = e.WebFileUploadInfo.FileName;

        // Execute the command, and clean up.
        bool result = myCommand.ExecuteNonQuery() > 0;

    File.Delete(e.WebFileUploadInfo.Path + "\\" + e.WebFileUploadInfo.FileName);

private static byte[] ReadFile(string filePath)
    byte[] buffer;
    FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);

        int length = (int)fileStream.Length; // get file length
        buffer = new byte[length];           // create buffer
        int count;                           // actual number of bytes read
        int sum = 0;                         // total number of bytes read

        // read until Read method returns 0 (end of the stream has been reached)
        while ((count = fileStream.Read(buffer, sum, length - sum)) > 0)
            sum += count; // sum is a buffer offset for next reading

    return buffer;

That’s it! Now the files uploaded by WebFileUploader control will be stored in database. It’s pretty easy and straightforward, don’t you think so?


Click here to download the sample and feel free to drop me a line in the comment box if you find this post useful.

WebUI Studio 2012 R2 Installer Refresh

Today, we have posted an update to the WebUI Studio 2012 R2 installer which addressed a few glitches related to samples and installation. In addition, the installer “refresh” also includes newer product builds across ASP.NET, Silverlight and WPF tools for enhanced cross-platform compatibility and improved reliability. It’s highly recommended to install WebUI Studio 2012 R2 using the latest installer which you can download here.

The installer “refresh” includes numerous updates that are focused around the new technical samples for Silverlight and WPF. In case you didn’t aware, we now include comprehensive technical samples starting from this release. The difference with the live samples is that technical samples are strongly focused on the product features – and there are no fancy stuff such as decorator graphics or complex styling – so you can quickly and easily discover the “how-to” and knowledge to implement a particular feature of the new products.

If you haven’t seen the technical samples yet, now is a good time to take a look at it. It’s installed by default, and can be found in the Intersoft WebUI Studio program group under the respective platform group. In this release, the technical samples include over 150 samples for charting and 40 samples for the other new products such as Query Builder, Property Grid and BreadCrumb.

Each feature of the new product is covered in each separate sample, making it easy for you to learn the context of a particular feature. With simple interface and intuitive navigation, getting around with the samples is easy and fast – you should try it for yourself.

ClientUI Technical Samples (Silverlight)

Note that the technical samples is available in both Silverlight and WPF platform with the same codebase. The WPF samples demonstrate that the same features available in Silverlight are also working flawlessly in WPF – from the basic features to the animation and user experiences. Here’s the screenshot for the technical samples in WPF.

ClientUI Technical Samples (WPF)

Again, the technical samples is installed by default when you install WebUI Studio for Silverlight and WPF, so there’s no additional download needed. It can be found in the Intersoft WebUI Studio program group under the respective platform group.

I hope you enjoyed the comprehensive learning resources we added in this release. Any questions or feedback are highly welcomed. Thank you for reading!

2012 R2 Online Samples and Documentation Updated

First of all, Happy New Year! I hope you enjoyed building apps with our tools in the past year, and we look forward to work with you again in 2013! We’ve plenty of exciting new products that we’re planning in this new year, and we’ll update our roadmap shortly in the next few weeks.

In case you missed the news, we’ve shipped the 2012 R2 volume release last month. You can download it here, and check out the what’s new list here. In addition to the new products listed in the “what’s new” list, the R2 release actually ships much more new features and enhancements that weren’t listed in the website. For instances, we also introduced sophisticated “cell locking” feature in UXGridView, brand-new theme manager, performance improvements in all combobox-variant controls, new usability feature in UXRibbon, and much more.

Where can I see all the new features and enhancements, you might asked. It’s in the documentation that you can access online today. The online product documentation features lightweight navigation interface similar to those in Help Viewer. You can easily browse through each topic from the left-side tree navigation, or from the breadcrumb at the top.

ClientUI Online Documentation

I’ve compiled several interesting topics that I think you should check out:

In addition to the online documentation, we’ve also recently updated the online samples for ASP.NET. The online samples now reflect the latest release which includes all-new WebDesktop samples demonstrating HTML5 and CSS3 support. In addition, many of the samples have been updated to the latest Modern UI styles.

ASP.NET Live Samples

Among dozens of WebDesktop controls that receive full HTML5 support, one that is quite noteworthy is the WebPaneManager control which undergone major surgery in order to achieve “fluid layout” that works in HTML5 browsers. If you’ve worked with layouting in HTML5, I trust you already foresee the difficulty level to create “fluid layout” that supports dynamic width/height, not to mention the support for nested groups and resizing and other UX features. Luckily, you can easily achieve complex layout now using the enhanced WebPaneManager control. See the following screenshot for example.

WebPaneManager supports fluid layout in HTML5

The beauty of the new WebPaneManager is that it’s very lightweight – thanks to the revamped layout from TABLE to DIV, and more importantly, it supports combination of fluid and static width/height – all without requiring scripting! This means that when users resize the browser, they’ll see real-time response. We haven’t seen a control with such capabilities thus far in the market, so we’re pleased to be the first delivering such innovative controls to you.

Well, you can check out the WebPaneManager samples and the rest of updated ASP.NET online samples here. Enjoy!