ComponentArt

Let us know what you want!

Jovan — Thu, 25 Jun 2009 19:49:00 GMT

ComponentArt UI Framework 2009.2 Beta is now available for download. It includes the much-anticipated Scheduler control for ASP.NET AJAX as well as a number of new Silverlight controls.

While the first preview of 2009.2 is out, there is plenty more development going on. In fact, now is your opportunity to choose exactly which features you want to see added! Here is how:

Download the beta version. (You will have to sign up for a free account if you haven't already done so.)
Make sure to change your account preferences to indicate that you want to take part in the Beta Tester Program.
Within a few minutes you will get access to the beta forums.

These forums are actively monitored by the developers and are the quickest way to get your opinions heard by the people who actually write the code. Don't wait. The beta forums will only be up for a few more weeks, and the sooner you let us know what you want, the sooner we can deliver it.

Share this post: email it! | bookmark it! | digg it! | reddit!

ComponentArt Gauges for Silverlight Sneak Preview

Corey — Mon, 22 Jun 2009 23:51:00 GMT

ComponentArt is pleased to announce a sneak preview of Gauge for Silverlight!

We have been working hard to bring you a flexible, themeable and customizable gauge control that delivers the same outstanding visual quality and ease of functionality that our ASP.NET AJAX gauges deliver.

Theming

ComponentArt Gauge for Silverlight has very robust theming capabilities that allow you to customize the visual display of your gauge in almost any way that you can possibly conceive of. Because Gauge has its themes defined entirely in XAML (vs. programmatic design), every visual element can be tweaked and/or replaced with very little effort! For those who like to get up and running quickly, Gauge will ship with a number of already complete themes.

Data Binding

Gauge for Silverlight is extremely flexible in its ability to be bound to other resources and objects. Since almost every property supports binding, the use of custom DataContexts will make your life much easier!

The following example illustrates both the theming and data binding capabilities of Gauge.

Click to launch example.

Interactivity & Animations

Gauge for Silverlight will bring a new level of interactivity to our Gauge suite by utilizing Silverlight events, storyboard animations and its flexible architecture. Custom and predefined animations can be used to smoothly (or wildly!) transition between states as the gauge's data changes.

The following example illustrates the use of a custom-animation to realistically transition the pointer from its old value to its new value.

Click to launch example.

More Features To Look For

Complete radial, linear, numeric and indicator gauge themes
Content area for embedded gauges, annotations and/or UI controls
Interactive mouse events for gauge feedback and manipulation

Keep an eye out for a Fall 2009 Beta of Gauge for Silverlight!

Share this post: email it! | bookmark it! | digg it! | reddit!

$10,000 for the Best Silverlight App!

Miljan — Mon, 22 Jun 2009 18:39:00 GMT

Ok, this should be a lot of fun!

ComponentArt has just announced the official beginning of the 2009 Summer Silverlight Coding Competition. Starting immediately and throughout the summer (until September 22), developers can submit their Silverlight applications for evaluation by our Expert Panel and the developer community. The author(s) of the "best" application, as decided by the Expert Panel and the community, will walk away with the grand prize of $10,000 USD. Authors of the two runner-up applications will each receive ComponentArt licenses (a $1,299 USD value).

How the Winner Will Be Chosen

Obviously, there's no such thing as the "best" application. The winner will be chosen based on the number of points collected from the Expert Panel (maximum 450 points) and the community vote (maximum 100 points). So, we highly value the opinion of our Expert Panel, but the community vote might well tip the scale and select the winner!

The grading criteria and the precise details for collecting points and are outlined on the how to win page.

Our Expert Panel

We are proud to have the following individuals on our Expert Panel:

Microsoft Silverlight Team
- Tim Heuer
- Laurence Moroney
- Mike Snow

Industry Gurus
- Dino Esposito
- John Papa
- Steve Smith

ComponentArt Silverlight Team
- Milos Glisic
- Phil Tucker
- Corey Cahill

Use of ComponentArt Products is NOT Required

Applicants are not required to use ComponentArt's products to enter the competition (or as the legal jargon requires us to say: NO PURCHASE NECESSARY). We'll obviously let you use our products if you want to, but the purpose of this contest is to increase awareness of Silverlight features and applications already released, so we would like to keep it open to the entire Silverlight developer community.

The full contest rules are available here. Let's have some fun and may the best app win!

Share this post: email it! | bookmark it! | digg it! | reddit!

Web.UI ASP.NET Grid: Synchronize Checkbox States with Row Selection

Hwan — Tue, 16 Jun 2009 00:00:00 GMT

One can use the Grid's itemBeforeCheckChange and itemBeforeSelect client events to synchronize the state of checkboxes and row selection. Some extra logic is required since checkbox clicks also trigger row selection. I use the load client event is used to initially set all checked rows as selected. The code here I used on the Grid Editing - Client Mode example, after adding DataField "Discontinued" as a boolean ColumnType="CheckBox" GridColumn.

ASPX:

<ComponentArt:Grid id="Grid1" ...>
  <Columns>
    <ComponentArt:GridColumn DataField="Discontinued" ColumnType="CheckBox" />
....
  <ClientEvents>
    <itemBeforeCheckChange eventhandler="Grid1_onItemBeforeCheckChange" />
    <itemBeforeSelect eventhandler="Grid1_onItemBeforeSelect" />
    <load eventhandler="Grid1_onLoad" />

JS:

var checkboxClick = false;
var rowClick = true;
function Grid1_onItemBeforeCheckChange(sender, e)
{
  checkboxClick = true;
}
function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      rowClick = false;
      e.set_cancel(true);
      // 6 is the column index of DataField "Discontinued"
      e.get_item().setValue(6, !e.get_item().getMember('Discontinued').get_value());
      sender.select(e.get_item(), true)
    }
    rowClick = true;
  }
}
function Grid1_onLoad(sender, e)
{
  var table = sender.get_table();
  sender.beginUpdate();
  for (i=0;i<table.getRowCount();i++)
  {
    if (table.getRow(i).getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(table.getRow(i), true);
    }
  }
  sender.endUpdate();
}

If you want selection to ONLY be done via the checkboxes, then modify the Grid1_onItemBeforeSelect client event handler to cancel user clicks.
JS:

function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      e.set_cancel(true);
    }
    rowClick = true;
  }
}

Share this post: email it! | bookmark it! | digg it! | reddit!

AZGroups Scott Guthrie Event 2009, Phoenix

Milos — Tue, 02 Jun 2009 15:31:00 GMT

Last week I had the pleasure of attending the annual AZGroups event in Phoenix, Arizona headlined by Scott Guthrie of Microsoft. Other speakers included Tim Heuer, Jaime Rodriguez (on WPF) and Glenn Block (on MEF). All the sessions were very informative and the event overall was extremely well organized.

I had a great time in Scottsdale and even got to participate in the goings on by presenting our new SOA.UI framework:

You can see the rest of the pics from the event here.

A big thanks to Scott Cate, Joseph Guadagno, and the rest of the organizers!

Share this post: email it! | bookmark it! | digg it! | reddit!

Securing Applications Built on Silverlight and WCF

Milos — Thu, 07 May 2009 14:41:00 GMT

Having recently released our initial offering of Silverlight controls, we are starting to get a feel for the sorts of issues Silverlight developers commonly encounter in designing and developing their applications. One question which seems to pop up frequently is how security and authentication should be handled in the context of a Silverlight application which interacts with WCF services. In applications that include Web.UI controls, especially those with SOA.UI integration, this question becomes even more important.

In this post, I will attempt to shine a bit of light on what we see as a typical approach to authentication and how it can be elegantly integrated into a Silverlight 2 application and the WCF services it employs. We will use the example of simple ASP.NET forms authentication.

Step 1. Configure authentication for the application in its web.config file:

<system.web>
  ...
  <authentication mode="Forms">
    <forms name="secure">
      <credentials passwordFormat="Clear">
        <user name="milos" password="secret" />
      </credentials>
    </forms>
  </authentication>
  ...

This is all we need to do to be able to rely on ASP.NET and its session cookies for authentication and session management. We do still need to do a couple of things in order to connect our Silverlight and web service logic to this underlying mechanism.

Step 2. Write a simple WCF authentication service:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AuthenticationService
{
  [OperationContract]
  public bool Authenticate(string sUser, string sPass)
  {
    if (FormsAuthentication.Authenticate(sUser, sPass))
    {
      FormsAuthentication.SetAuthCookie(sUser, false);
      return true;
    }

    return false;
  }

  [OperationContract]
  public bool IsAuthenticated()
  {
    return HttpContext.Current.User.Identity.IsAuthenticated;
  }
}

In this example, we implement two methods: one for checking whether the user is authenticated and another for authenticating her. We rely entirely on built-in FormsAuthentication functionality.

With the AuthenticationService in place, we can plug it into our Silverlight application and its associated WCF services (including standard SOA.UI services). For the former, we can create a service reference in the Silverlight application and use it in this sort of way:

Step 3. Implement authentication logic in the Silverlight application:

public partial class Page : UserControl
{
  public Page()
  {
    InitializeComponent();

    // When the page initializes, perform authentication if necessary:
    AuthenticateAndInitialize();
  }

  void AuthenticateAndInitialize()
  {
    // Check whether the user is authenticated:
    AuthenticationService.AuthenticationServiceClient oAuthClient = 
      new AuthenticationService.AuthenticationServiceClient(...);
    oAuthClient.IsAuthenticatedCompleted += 
      new EventHandler(oAuthClient_IsAuthenticatedCompleted);
    oAuthClient.IsAuthenticatedAsync();
  }

  void oAuthClient_IsAuthenticatedCompleted(object sender, 
    AuthenticationService.IsAuthenticatedCompletedEventArgs e)
  {
    if (e.Result)
    {
      // The user is already authenticated, proceed with initializing the application:
      InitializeApplication();
    }
    else
    {
      // Show login screen, get username and password (code not shown here), and authenticate:
      Authenticate(sUsername, sPassword);
    }
  }

  void Authenticate(string sUser, string sPass)
  {
    // Attempt to authenticate the given credentials:
    AuthenticationService.AuthenticationServiceClient oAuthClient = 
      new AuthenticationService.AuthenticationServiceClient(...);
    oAuthClient.AuthenticateCompleted += 
      new EventHandler(oAuthClient_AuthenticateCompleted);
    oAuthClient.AuthenticateAsync(sUser, sPass);
  }

  void oAuthClient_AuthenticateCompleted(object sender, 
    AuthenticationService.AuthenticateCompletedEventArgs e)
  {
    if (e.Result)
    {
      // The user is now authenticated, proceed with initializing the application:
      InitializeApplication();
    }
    else
    {
      // Login failed, repeat the login screen procedure (code not shown here).
    }
  }

  ...

The (pseudo-)code above outlines the general approach to a simple login procedure which can be integrated into any Silverlight application. We need to interface into this procedure from Silverlight because that is our client-side platform, but the authentication is actually needed not for the client-side Silverlight operations, but for the server-side WCF layer. This brings us to the last step, and the real point of the whole exercise: securing the service.

Step 4. Secure the service:

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class SoaFeedReaderDataGridService : SoaDataGridService
{
  public override SoaDataGridSelectResponse Select(SoaDataGridSelectRequest request)
  {
    if (HttpContext.Current.User.Identity.IsAuthenticated)
    {
      // Implement service logic
      ...

The idea is to have the service check the user's credentials before proceeding to fetch data or perform other potentially sensitive operations. In the example above, we are using a standard SOA.UI SoaDataGridService, but the same approach is used for any WCF service.

I hope this basic example clarifies things a bit when it comes to security and Silverlight+WCF applications. For more elaborate authentication mechanisms, other options also exist, such as the ability to pass around custom data using SOA.UI APIs, but that is a topic for another day.

Cheers!

Share this post: email it! | bookmark it! | digg it! | reddit!

ComponentArt: Past, Present and Future

Miljan — Tue, 21 Apr 2009 14:12:00 GMT

Shipping UI Framework 2009.1 was a lot more than a software release here at ComponentArt. In many ways, it was a re-launch of the company itself. Now that the big release is out in the wild, I thought that it would be fun to reflect on what we have done in the past as well as think about what lies ahead.

A Walk Down Memory Lane

A couple of days ago we went through our archive of previous websites and had a good laugh while we relived some of those moments. Here is a quick list of the key points in ComponentArt's history, with website screenshots:

		February 28, 2002 - The Beginning ASP.NET Menu launched by CYBERAKT INC. Throughout the summer of 2001 we were evaluating Microsoft’s new .NET Framework, which was in Beta 2 at the time. We were very impressed by ASP.NET and thought that it could use a good menu control. Our first software component product - ASP.NET Menu – was released at the same time as ASP.NET itself. It quickly became the most downloaded control on the official ASP.NET website and sales started pouring in! Without a doubt, ASP.NET Menu was the big catalyst that enabled our growth.

		March 28, 2003 - Rich Content Rotator Proceeding with the rich DHTML control theme, we released our next product: Rich Content Rotator for ASP.NET (we affectionately refer to that control as "Rotato" here at the office). Rotato was less than a blockbuster product for us: it wasn't anywhere near as popular as ASP.NET Menu. Also notice that it took us more than a year to release the second component. In any case, we learnt that you can't win them all and started working hard on our next release.

		May 14, 2004 - ComponentArt 1.0 This release marked the end of the "CYBERAKT" era. We changed the company name to ComponentArt and went through an elaborate rebranding exercise. We wanted a fresh new look that would be distinctive in the marketplace. Market reaction was overwhelmingly positive and we received numerous awards for our print ads in the coming years. This release also marked the introduction of our flagship Web.UI for ASP.NET product line, with TreeView and Snap controls added to the mix for a total of four components!

		September 9, 2005 - ComponentArt - AJAX Edition Skipping a few smaller releases, it was Web.UI 3.0 that marked the next major step in our offering. We implemented client-side rendering across the entire Web.UI suite, released our super-popular Grid for ASP.NET control and introduced the first generic AJAX container control for ASP.NET: ComponentArt CallBack (code named "AjaxBox"). This control was a major innovation. Notice that we released it well over a year before Microsoft's UpdatePanel control and quite a bit before any other competing products. (By the way, CallBack and UpdatePanel have different architectures and are complementary products. More info on that is available here).

		December 21, 2005 - Charting Redefined End of 2005 was when we revealed our next major achievement: Charting for .NET. We had been working on that product for 2 years prior to its release and we were very proud of our own 3D rendering engine. The rendering quality of our charts was impressive enough for the most established charting vendor to approach me at a tradeshow and ask: "Hey, who wrote your rendering engine?" I replied with a smile: "My dad." But that's another blog post.

		November 21, 2006 - The First True "Atlas" Controls We had been working closely with the ASP.NET AJAX (code named "Atlas") team for many months prior to shipping Web.UI for ASP.NET AJAX. Our release was parallel with the "Atlas" release itself and generated a great deal of buzz in the industry, including a mention on Scott Guthrie's blog. Business-wise, this product was also a blockbuster for us. The strategy of putting so much effort into supporting an upcoming MS framework and developing against its alpha bits was a risky one. It took some effort to convince the management team, but it really paid off in the end.

		May 1, 2007 - The Ribbon Nav The May 1st release marked a website redesign and the introduction of ribbon-based navigation. Implementing non-standard UI elements for main navigation was another risky move. We had to make sure that it was perfectly executed, otherwise the website would be rendered useless (additional thoughts on that exercise are available here). We worked long and hard on the new site and in my opinion once again ended up with something unique and well executed.

ComponentArt 2009.1

Even though we've done some noteworthy things in the past, our latest release is undoubtedly our biggest achievement. We have grown our product offering by an order of magnitude, completely redesigned the website and introduced a new brand: ComponentArt UI Framework for .NET.

I believe that this product release is significant beyond the fact that we have shipped a number of new components. We are introducing a powerful new paradigm with UI-centric web services and the ability to share code between AJAX and Silverlight applications. Most web developers on Microsoft's platform today are somewhere between building vanilla ASP.NET apps and full Silverlight adoption. Our SOA.UI framework was designed to help bridge that gap as well as offer value to those who are already there (you can save quite a few lines of code even if you are doing Silverlight development exclusively). A lot more on that later.

The new website is something we are particularly proud of. We have decided to take another fresh (although not as radical) approach to navigation. I think that the new "mega menu" works quite well. However, our customers always have the final say regarding these things, so please let us know how we did.

ComponentArt v.Next

You won't be surprised to hear that we are already working on the next release. As outlined in our new product roadmap, our plan is to expand our existing product lines as well as introduce a new Win.UI for WPF control suite by the end of the year. We are also working on additional website upgrades: the knowledge base and community sections will see major overhauls in the near future.

We will always continue to think about creative ways to add value to the platform and best serve our customers.

Share this post: email it! | bookmark it! | digg it! | reddit!

Hey, nice package!

Evan — Fri, 17 Apr 2009 17:13:00 GMT

So many things have changed with the UI Framework 2009.1 release it's mind-boggling. One thing that often gets overlooked in product changelogs or feature lists is the installation package itself. I'll attempt to go over some of the changes we've made to the installer, and why we decided to do so.

The first thing you've probably noticed is that the number of installation packages has decreased from 12 (or 13 if you include the Silverlight beta package) to 1. Obviously, realigning our AJAX offering to include the Web.UI, Chart, and Gauge products was the prime motivator for this. As we started down the road of integrating those product lines, and the SOA.UI product became more fleshed-out, it seemed natural to include everything in one package rather than having a Silverlight package and an AJAX package, both with the SOA.UI product included, or have SOA.UI as a standalone package (which really makes no sense when you think about what SOA.UI does). Once we decided to have a single, unified installer, everything fell into place. What we ended up with is, I think, a much more simple, efficient installation experience for end-users.

Of course, one of the concerns of moving to a unified installer is the size of the package itself. We made every effort to reduce this as much as possible by:

completely reworking the Live Demos
removing the .chm-based documentation files (we used to include both .chm and Help 2 .Hx* files)
only including help files for a single framework (2.0 AJAX, which is the superset of frameworks from a documentation point of view)
shipping a single License Manager for all products (facilitated by the implementation of a single, framework-wide license key)
having the installer be smart about duplicate files we're shipping

So we end up with an installer of roughly 65 megs. No bad considering what where replacing, and I believe one of the smaller integrated installers in the industry.

We also took the opportunity to rework some things in the installer that we never really liked. First was the concept of a "Server" install type (as opposed to "Complete" or "Custom"). This option was included in previous versions as a convenience, and basically copied the product dlls themselves, plus a copy of the License Manager to the filesystem. For some of the things we wanted to achieve, it became apparent that this installer should target a developer workstation only. Developers create solutions there, and then deploy to the server (along with a .lic file for licensing) via xcopy of some other method. We kept this developer-centric mindset when approaching all features of the installer. In fact, we might as well have called the distibution package "ComponentArt.UI.Framework.2009.1.DeveloperTools.exe", but someone thought that was going overboard.

Also gone are the automatically created IIS virtual directories for Live Demos. These have been problematic in the past for a number of reasons. We rely on InstallShield for creating and managing these virtual directories at install-time. That product is pretty good in this regard, but there's no guarantee you'll get what you want if you're running on Vista, Windows Server 2008, or some other OS with IIS7. We always included a fallback to Cassini (or WebDev.WebServer.EXE, or whatever it's called) in the event that the target machine does not have IIS installed. So if we're confident that we're installing on a developer workstation (which we now are) then we know Cassini is available and launch that when we start the Live Demos. We even designed a cool little app to manage the Cassini threads (it's available off of the Start menu if you have Live Demos installed).

Since we're so confident that we're now installing on a developer workstation, we decided to remove the option for "Visual Studio Integration". Now you get integrated whether you like it or not ;-) This includes VS toolbox items and help collection merging, and is why you have those VSPackage.* dlls in the product directory structure. Essentially, we just couldn't think of one good reason why a developer would not want this stuff available.

There's a lot more that I'll try to address in future posts (the new licensing scheme, etc.). For now, please enjoy the new car smell!

Share this post: email it! | bookmark it! | digg it! | reddit!

Web.UI ASP.NET Grid: Retrieve the filtered set of rows in Client RunningMode

Hwan — Thu, 19 Mar 2009 23:09:00 GMT

Currently the Grid doesn't expose the filtered set of GridItems after a search/filter action, preventing operations from being applied exclusively to that set of rows. Until Grid provides a method to access these, you can build your own set of filtered items by using the undocumented gridLevel FilterExpression property.

eg.
JS:

function getFilteredRows(grid)
{
    var table = grid.get_table();
    var filteredRows = new Array();
    for (i=0;i<table.getRowCount();i++)
    {
      var DataItem = table.getRow(i);
      if (eval(grid.Levels[0]. F i l t e r E x p r e s s i o n ))
      {
        filteredRows[filteredRows.length] = DataItem;
      }
    }
    return filteredRows;
}

You could then grab the filtered items (after a search/filter action) with something like
JS:

 
// grab the first search result's text in column 3
alert(getFilteredRows(Grid1)[0].getMemberAt(3).get_text());

Note: You'll have to remove the spaces from the " F i l t e r E x p r e s s i o n " above, as our blog software doesn't permit this string in codeblocks.

Share this post: email it! | bookmark it! | digg it! | reddit!

Convert Web.UI ASP.NET Grid into a data entry spreadsheet

Hwan — Thu, 12 Mar 2009 22:19:00 GMT

Using client templates and some JavaScript one can change Web.UI Grid's editing interface to behave more like a data entry spreadsheet. I started from the code suggestions given in Q10111 - HOWTO: Create a Microsoft Excel spreadsheet-like Grid and added keystroke handling for adding new rows and moving up and down between editable cells (Up Arrow and Down Arrow to go up and down, Tab and Shift+Tab to go right and left). I also added a delete template (a clickable X) so that users could easily remove rows. In my example I start with a blank Grid which is initially populated in the load client-event with a blank row.

ASPX:

<ComponentArt:Grid id="Grid1"
AllowTextSelection="true"
.... >
    <ClientEvents>
        <load eventhandler="Grid1_onLoad" />
    </ClientEvents>
    <Levels>
        <ComponentArt:GridLevel
        .... >
            <Columns>
                <ComponentArt:GridColumn DataCellClientTemplateId="DeleteCellTemplate" />
                <ComponentArt:GridColumn DataField="ProductName" DataCellClientTemplateId="EditCellTemplate" />
                <ComponentArt:GridColumn DataField="UnitPrice" DataCellClientTemplateId="EditCellTemplate" />
                <ComponentArt:GridColumn DataField="UnitsInStock" DataCellClientTemplateId="EditCellTemplate" />
            </Columns>
        </ComponentArt:GridLevel>
    </Levels>
    <ClientTemplates>
        <ComponentArt:ClientTemplate Id="EditCellTemplate">
            <input style="border-style:none;width:## DataItem.getCurrentMember().get_column().get_width() ##px;"
            id="textbox_## DataItem.get_index() ##_## DataItem.getCurrentMember().get_column().get_dataField() ##"
            type="text"
            value="## DataItem.getCurrentMember().get_value() ##"
            onfocus="this.select();editingTextboxId = this.id;editingClientId = '## DataItem.ClientId ##';
            editingDataField = '## DataItem.getCurrentMember().get_column().get_dataField() ##';
            editingIndexRow = ## DataItem.get_index() ##;"
            onKeyDown="return EditField_onKeyPress(event)"
            onBlur="saveCell('## DataItem.ClientId ##', '## DataItem.getCurrentMember().get_column().get_dataField() ##', this.value);" />
        </ComponentArt:ClientTemplate>
        <ComponentArt:ClientTemplate Id="DeleteCellTemplate">
            <a tabindex="-1"
            style="color:#f00;" 
            href="j__avascript:Grid1.deleteItem(Grid1.getItemFromClientId('## DataItem.get_clientId() ##'));">X</a>
        </ComponentArt:ClientTemplate>
    </ClientTemplates>

JS:

var editingIndexRow = -1;
var editingTextboxId = "";
var editingClientId = "";
var editingDataField = "";
var firstEditableDataField = "ProductName";

function Grid1_onLoad(sender, e)
{
	Grid1_addRow();
}
function saveCell(itemId, columnField, newValue)
{
	var row = Grid1.GetRowFromClientId(itemId);
	// Check if value was changed
	var oldValue = row.GetMember(columnField).Value;
	if (oldValue != newValue)
	{
	// Get column index for SetValue
		var col = 0;
		for (var i=0;i<Grid1.Table.Columns.length;i++)
		{
			if (Grid1.Table.Columns[i].DataField == columnField)
			{
				col = i;
				break;
			}
		}
		row.SetValue(col, newValue, true);
	}
	return true;
}
function Grid1_addRow()
{
	var col = 0;
	if (Grid1.get_table().getRowCount() > 0)
	{
		// cancel adding row if there is already a blank one
		var row = Grid1.get_table().getRow(Grid1.get_table().getRowCount()-1);
		for (var i=0;i<Grid1.Table.Columns.length;i++)
		{
			if (row.getMemberAt(i).get_text() != "")
			{
				Grid1.get_table().addRow();
				break;
			}
		}
	}
	else
	{
		Grid1.get_table().addRow();
	}
	setTimeout("setTextboxFocus();", 100);
}
function setTextboxFocus(datafield, index)
{
	if (typeof datafield == "undefined") datafield = firstEditableDataField;
	if (typeof index == "undefined") index = Grid1.get_recordCount() - Grid1.get_recordOffset() - 1;
	var elementId = "textbox_" + index + "_" + datafield;
	try
	{
		document.getElementById(elementId).focus();
	}
	catch (err)
	{
	}
}

function EditField_onKeyPress(e)
{
	if(!e) e = window.event;
	key = e.keyCode ? e.keyCode : e.which;
	if (key == 13) //enter
	{
		saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
		Grid1_addRow();
	}
	if (key == 38) //up
	{
		var index = editingIndexRow - 1;
		if (index > -1)
		{
			editingIndexRow = index;
			saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
			setTextboxFocus(editingDataField, index);
		}
	}
	if (key == 40) //down
	{
		var index = editingIndexRow + 1;
		if (index < Grid1.get_pageSize())
		{
			editingIndexRow = index;
			saveCell(editingClientId, editingDataField, document.getElementById(editingTextboxId).value);
			setTextboxFocus(editingDataField, index);
		}
	}
}

Here's a screenshot of what the Grid will look like:

Download the code for this example (8.56 KB)

Notes:
i. I tested against Internet Explore 7, Firefox 3, Chrome, Safari and Opera. I set UseSubmitBehavior to false on the ASP Button so that a postback doesn't occur when the user hits Enter, but this doesn't seem to work in Chrome or Safari. The Grid functionality should otherwise be identical across these browsers.
ii. I save cell data whenever key navigation occurs since the Up/Down/Enter strokes won't raise the blur event.
iii. I had considered adding Left/Right Arrow navigation but that would require remembering which column is currently in focus, which would greatly complicate things so I opted not to.
iv. The "save changes" ASP Button simply loops through the Items collection on the server and outputs their values so that you can get an idea of how to store the edits.
v. I give a tabindex of -1 to the DeleteCellTemplate anchor so that it's skipped during Tab navigation.
vi. In the JS section above you'll need to remove the underscores from "j__avascript" as our blog software doesn't allow that string.

Share this post: email it! | bookmark it! | digg it! | reddit!

Tapping Into the Raw Power of Silverlight

Miljan — Tue, 17 Feb 2009 21:37:00 GMT

We are excited to announce the availability of ComponentArt Web.UI for Silverlight Beta - our latest suite of controls for Rich Internet Application development. The initial release will feature eight controls, with rapid expansion of the suite planned throughout 2009. Links to live demos, beta download package, as well as detailed roadmap information are all available on our Silverlight Controls page.

Admittedly, we are a little late to the Silverlight party. Other leading vendors have been offering Silverlight products for a few months now. On top of that, there is Microsoft's own excellent Silverlight Control Toolkit, containing a large number of controls.

However, what's missing from the marketplace at this time, in my opinion, are real "industrial strength" line of business controls. Rather than trying to quickly ship a large number of controls, we decided to take our time to make these core controls (Menu, TreeView, Grid, ToolBar, etc.) as solid as possible. There are many features that we still want to add, so this release is only the first step on that journey. I hope you will find that our effort was worthwhile and that we managed to deliver best-of-breed core UI functionality.

Silverlight is truly a wonderful presentation layer platform. Products currently offered in the marketplace merely scratch the surface of what can be done with it (that includes our own offering). There is so much "raw power" in Silverlight and we are really excited about the opportunity to add value to it.

As always, your feedback is welcome and highly appreciated. Please let us know what you think about the current features as well as the announced roadmap. A flurry of blog posts by our Silverlight team is forthcoming, I'm sure, so don't hesitate to tell us what you'd like us to write about.

Share this post: email it! | bookmark it! | digg it! | reddit!

Gauges to join ComponentArt's expanding list of controls

Filip — Mon, 15 Dec 2008 19:36:00 GMT

One of the most frequently asked questions our sales and support teams have been getting over the past year or two is if we are going to make a gauges control that is on par with the rest of our controls. Our answer has always been yes, but it is only now that we are able to let the cat out of the bag.

For the past few months we have been working on a WebGauge control for ASP.NET. Our goal with this control was simple: Create a control that has excellent server performance, is easy to use and is visually up to the high standard of ComponentArt's controls.

The server performance issue was handled by our innovative approach of layering multiple images to get the final gauge image. With this technique we are able to achieve rendering times of less than one tenth of a second (100 milliseconds) for most commonly used gauges.

The concept of themes plays a big part in making the control easy to use. Our first version of the control will come packaged with four themes. The idea behind this concept is that the user should be able to create a gauge in seconds by selecting the gauge geometry, setting the theme, and a value for the gauge. Of course everything is customizable in case you desire to fine tune the details. Currently available color themes have the following look:

Other features include:

Circular, Semi-Circular, Quarter-Circular, Linear and Numeric gauges
Subgauges, multiple scales, ranges and pointers within a gauge
Full client-side API with the ability to auto-refresh on a given interval
Design time wizard and property view that allow setting of most properties with visual feedback

On the other hand, pictures speak a thousand words, so perhaps it's best to take a look at some of our preliminary mock-ups and renderings:

The beta version of our WebGauge control should be available before Christmas, with the full release in January.

Share this post: email it! | bookmark it! | digg it! | reddit!

ComponentArt Silverlight Preview

Milos — Fri, 05 Dec 2008 17:15:00 GMT

If you are wondering what we here at ComponentArt have been up to in the last while, wonder no more: we have been busily working on a foray into the world of Silverlight. It'a always exciting to play with a new user interface technology, not least one that is as well thought-out and powerful as this. We have put together a small but ever-growing demo application to showcase some of our archievements so far, which you can check out at silverlight.componentart.com.

I personally have been working on the DataGrid control. Our aim with DataGrid, as with the rest of the suite, is to make controls which will retain all the familiar features and UI capabilities of our AJAX suite and include new ones which will utilize the best of what Silverlight brings to the game.

Let us know what you think and what you would like to see in the upcoming ComponentArt Silverlight product line.

Share this post: email it! | bookmark it! | digg it! | reddit!

MaskedInput Transform Intellisense

Jovan — Mon, 27 Oct 2008 14:06:00 GMT

MaskedInput class's Transform property that I described in depth in a few preceding blog posts presented us with an interesting design dilemma. At first it seemed like it should be a typical enumeration property, with one value for each Transform type. However, since the architecture allowed new Transform types to be added in a number of different ways (see the previous blog posts), the enum turned out to be too stifling. For that reason, we opted for a string instead.

However, we still wanted to offer some Intellisense, to give the developer a hint at the values he would most likely want to use. We did it by placing the TypeConverterAttribute on the Transform property:

public sealed class MaskedInput : BaseInput
{
  ...
  [TypeConverter(typeof(MaskedInputTransformConverter))]
  public string Transform
  {
    get {...}
    set {...}
  }
  ...
}

The implementation of MaskedInputTransformConverter is very simple:

/// <summary>
/// Provides Visual Studio intellisense for Transform property.
/// The list of StandardValues here corresponds to the properties of client-side ComponentArt_MaskedInput_Transforms object.
/// </summary>
public class MaskedInputTransformConverter : TypeConverter
{
  public string[] StandardValues =
  {
    "empty", 
    "CreditCard_VisaMasterCard",
    "CreditCard_AmEx",
    "Telephone_NorthAmerica",
    "ZipCode",
    "PostalCode",
    "PostalCode_Australia",
    "EmailAddress"
  };
  public override StandardValuesCollection GetStandardValues(ITypeDescriptorContext context)
  {
    return new StandardValuesCollection(StandardValues);
  }
  public override bool GetStandardValuesSupported(ITypeDescriptorContext context)
  {
    return true;
  }
}

This works really well in ASPX Intellisense, popping up the list of standard values, without forcing you to use one of them - exactly the behaviour we needed. The Intellisense also works for the Properties pane. Unfortunately it does not work in the CodeBehind files, and I don’t think there is a way to implement it there.

Share this post: email it! | bookmark it! | digg it! | reddit!

Building in new MaskedInput Transforms

Jovan — Fri, 24 Oct 2008 14:05:00 GMT

In the previous post I explained how you can customize the behaviour of MaskedInput’s Transforms. That should probably cover all your needs. However, MaskedInput’s architecture does allow for one more way to customize transforms. You can actually build in your own.

As you can see from the MaskedInput_Transforms.js file attached in the previous post, all the built-in transforms are contained in a global JavaScript object named ComponentArt_MaskedInput_Transforms, indexed by Transform name. So building in a new Transform is as easy as adding another property to ComponentArt_MaskedInput_Transforms. You can do that in a few ways:

You can completely redefine the object ComponentArt_MaskedInput_Transforms:

 <script type="text/javascript">
   window.ComponentArt_MaskedInput_Transforms =
   {
     'UpperCaseInput':
     {
       'validate': function(maskedInput) {return true;},
       'unmask': function(maskedInput) {return maskedInput.masked.value.toUpperCase();},
       'mask': function(maskedInput) {return maskedInput.unmasked.value.toUpperCase();}
     }
   }
 </script>
 <ComponentArt:MaskedInput runat="server" ID="MaskedInput1"
   Transform="UpperCaseInput"
 />

Keep in mind that because you are overwriting ComponentArt_MaskedInput_Transforms, the built-in transforms will no longer work.

A less drastic solution is to just add your new Transform to the existing ones:

 <ComponentArt:MaskedInput runat="server" ID="MyMaskedInput" />
 <script type="text/javascript">
   window.ComponentArt_MaskedInput_Transforms.UpperCaseInput =
   {
     'validate': function(maskedInput) {return true;},
     'unmask': function(maskedInput) {return maskedInput.masked.value.toUpperCase();},
     'mask': function(maskedInput) {return maskedInput.unmasked.value.toUpperCase();}
   }
   window.MyMaskedInput.set_transform('UpperCaseInput');
 </script>

If you have a source code license and are compiling your own custom builds, you can easily add your transforms directly to the JavaScript file. They will then work just like the original built-in transforms.
If you are doing this, you may also want to extend MaskedInput Transform Intellisense, as described in the next blog post.

Share this post: email it! | bookmark it! | digg it! | reddit!

Customizing MaskedInput Transforms

Jovan — Thu, 23 Oct 2008 13:30:00 GMT

In this blog post I will assume that you understand how MaskedInput Transforms function. It was explained in the previous blog post.

Here is the list of currently implemented transforms:

CreditCard_VisaMasterCard - Visa or MasterCard credit card number.
CreditCard_AmEx - American Express credit card number.
Telephone_NorthAmerica - North American telephone number.
ZipCode - American ZIP code.
PostalCode - Canadian postal code.
PostalCode_Australia - Australian postal code.
EmailAddress - e-mail address.
empty - accepts all inputs.

empty Transform is a special case. It accepts all inputs, and it doesn't mask or unmask them. Here is how it looks in code:

 'empty':
 {
   'validate': function(maskedInput)
   {
     // Accept all input:
     return true;
   },
   'unmask': function(maskedInput)
   {
     // Just pass on the edited displayed text:
     return maskedInput.masked.value;
   },
   'mask': function(maskedInput)
   {
     // Just pass on the unmasked value:
     return maskedInput.unmasked.value;
   }
 }

There is not enough space in this blog post to show the code of the rest of the Transforms, but I made the source code file available for download.

Ideally the available transforms will be enough for your requirements. New transforms are very easy to build in, so please don't hesitate to send in your suggestions.

However, for those times when your requirements cannot be met by the built-in transforms, there are a number of ways to customize the MaskedInput.

In addition to Transform, MaskedInput exposes three more server-side properties: TransformValidate, TransformUnmask, and TransformMask. These allow you to override the behaviour of any of the three transform functions. For example, to make the Visa card transform featured in the previous blog post mask with dashes instead of masking with spaces, you can do something like this:

 <script type="text/javascript">
   function maskVisaWithDashes(maskedInput)
   {
     return maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, '$1-$2-$3-$4');
   }
 </script>
 <ComponentArt:MaskedInput runat="server" ID="MyMaskedInput"
   Transform="CreditCard_VisaMasterCard"
   TransformMask="maskVisaWithDashes"
 />

This allows you to fully override any of the Transform's functions. Note that you can also leave the Transform property blank. In that case, the control defaults to the empty transform.

In the next blog post, I will introduce another more integrated way to add a new Transform.

Share this post: email it! | bookmark it! | digg it! | reddit!

MaskedInput Transform functionality

Jovan — Wed, 22 Oct 2008 14:06:00 GMT

The format of the masked input is fully defined by the "Transform" it uses.

A Transform is a client-side JavaScript object containing just three functions:

validate – A function that takes a look at what the user just typed into the masked input box, and returns a boolean value: true if text is valid, false if it isn't.
For example, if the transform is used to accept a Visa card number, and the user types in "4506/00020002-0002", this function returns true. (It just makes sure that there are exactly 16 digits.) If the user types in "2008-10-14", the function returns false.
unmask – A function that takes a look at what the user has just typed into the input box, and "unmasks" it. Typically, this means that the text is cleaned of formatting, leaving behind just the raw data. Unmask gets called even when validate does not return true, so it should not assume that the masked text it is working on is valid.
In our example, if the user typed in "4506/00020002-0002", this function will return "4506000200020002".
mask – A function that takes a look at the raw, clean data, and "masks" it: formats it for display.
With our raw data being "4506000200020002", this function will return "4506 0002 0002 0002".

Each of these methods takes only one argument: the reference to the client-side MaskedInput JavaScript object. The function can then easily use this object to get any other information it needs. For example, here is the entire code of the Visa card transform:

 'CreditCard_VisaMasterCard':
 {
   'validate': function(maskedInput)
   {
     // Ensure the unmasked edited text has exactly 16 digits:
     return this.unmask(maskedInput).length === 16;
   },
   'unmask': function(maskedInput)
   {
     // Simply remove all the non-digits from the displayed text:
     return maskedInput.masked.value.replace(/[^\d]/g, '');
   },
   'mask': function(maskedInput)
   {
     // Insert spaces between four-digit groups:
     return maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, '$1 $2 $3 $4');
   }
 }

Two often used properties of the client-side MaskedInput object are maskedInput.masked and maskedInput.unmasked:

maskedInput.masked refers to the display textbox element that the user sees and edits. It contains the masked text.
Although the masked text is typically not examined on the server, it can be accessed as MaskedInput's DisplayText property.
maskedInput.unmasked refers to a hidden input that contains the unmasked text.
The unmasked text is often examined or manipulated on the server, where it can be accessed as MaskedInput's Text property.

Hopefully it is now clear how Transforms function. In the next blog post I will explain how you can customize them.

Share this post: email it! | bookmark it! | digg it! | reddit!

Major input control Gotcha

Jovan — Tue, 14 Oct 2008 15:17:00 GMT

Short Story:

This will not work:

<ComponentArt:NumberInput runat="server" ID="MyNumberInput" />
<input type="button" value="+" onclick="MyNumberInput.increaseValue();" />
<input type="button" value="-" onclick="MyNumberInput.decreaseValue();" />

This is how to correct it:

<ComponentArt:NumberInput runat="server" ID="MyNumberInput" />
<input type="button" value="+" onclick="window.MyNumberInput.increaseValue();" />
<input type="button" value="-" onclick="window.MyNumberInput.decreaseValue();" />

Long Story:

This will work:

<ComponentArt:NumberInput runat="server" ID="MyNumberInput" />
<input type="button" value="+" onclick="increase();" />
<script type="text/javascript">
  function increase()
  {
    MyNumberInput.increaseValue();
  }
</script>

But, as mentioned before, this:

<ComponentArt:NumberInput runat="server" ID="MyNumberInput" />
<input type="button" value="+" onclick="MyNumberInput.increaseValue();"/>

will instead produce a JavaScript error: MyNumberInput.increaseValue is not a function

But isn't that the exact same code?? What is going on?

It turns out that in the second case "MyNumberInput" is not referring to the client-side NumberInput object. Instead it is referring to a DOM element of the same name.

Like most ComponentArt controls, input controls create a number of client-side DOM elements and JavaScript objects.
In this particular example, with a NumberInput named MyNumberInput:
In JavaScript, the most important object is named MyNumberInput, and is an instance of client-side class ComponentArt.Web.UI.NumberInput.
In the DOM, there are a number of different elements, including a text input with the id MyNumberInput.

This results in a very unusual naming conflict. Normally, when you write MyNumberInput in client-side code, you expect it to refer to the global JavaScript object of that name. And it does. Except when the code is running in the event handler of an HTML tag. Then MyNumberInput refers to the DOM element with that id. Which is probably not what you want.

To avoid ambiguity, you can use window.MyNumberInput to refer to the JavaScript object, and document.getElementById('MyNumberInput') to refer to the DOM element.

So why don’t we fix this? Well, it turns out that there is no real bug here.
First of all, this is not a design that is unique to ComponentArt input controls. In fact, most ComponentArt controls produce JavaScript objects and DOM elements with matching identifiers, for a number of reasons. What is different with input controls is that the DOM element in question happens to be a form element. This triggers the naming conflict.
However, having these matching identifiers turns out to be needed for the input controls to work smoothly with ASP.NET’s client-side validation, which is a very important feature.
So it is unlikely that we will be able to "fix" this. Instead, just please keep this gotcha in mind.

Share this post: email it! | bookmark it! | digg it! | reddit!

Web.UI 2008.2 Grid News: Grouping

Milos — Tue, 23 Sep 2008 18:34:00 GMT

Now that Web.UI 2008.2 is officially out the door, I can take some time to sit back and reflect on what's been done. There are some great new controls, as usual, and major enhancements to our Grid control.

I'm particularly excited about that last part, as I've felt for a long time that some of the limitations with its grouping functionality needed to be addressed. With this release, we took the time to really re-think this aspect of the control, and instead of merely patching on additional features, to remake it in a powerful and elegant way and still keep it backward compatible. I believe we've managed to do that.

So, without further ado, here's what's new with Grid grouping:

Multiple Grouping

One of the Grid's major deficiencies for some time has been its inability to group by more than one column at a time. This had to do with various factors having to do mostly with the way we were rendering groups on the client. We have now surmounted those obstacles and groupings can be done on as many columns at a time as the user deems reasonable.

This ability extends across all running modes, usage scenarios and grouping modes.

Wait... Grouping modes?

Grouping Modes

When re-thinking the way grouping should work in Grid, we realized that there are at least three different ways in which paging through a grouped record set could work:

ConstantRecords; in this mode, the number of actual data records, regardless of how many groups they are distributed across, remains constant across pages. This mode is very simple to handle programmatically, since data-access code doesn't actually need to know anything about groupings. It simply retrieves the one page of records, which are then organized in appropriate groupings before being rendered on the client.

See demo here: ConstantRecords Grouping Mode

Thanks to its simplicity, this grouping mode is supported in all running modes, including WebService.

ConstantGroups; this mode replicates the default grouping behaviour that Grid exhibited up to this point. Paging a Grid grouped in this mode means that the same number of top-level groups is present on every page. All the contents of those groups (sub-groups and records) are pre-loaded and no additional data access is required to expand and render that content.

See demo here: ConstantGroups Grouping Mode

ConstantRows; the two modes described above have one common downside: as groups are expanded on the client, the number of rendered rows increases, and can stretch the height of the Grid control. With ConstantRows, the total number of rendered rows (records + group headings) is kept at the constant number dictated by GroupingPageSize.

See demo here: ConstantRows Grouping Mode

This running mode, when used in Server or Callback mode, requires some new server-side events (NeedGroups and NeedGroupData) to be handled in order to facilitate the efficient retrieval of only the necessary groups and records.

Which brings us to our next topic...

Grouping + Manual Paging

Up until this point, there was no good way to use manual paging (manual retrieval of just the required records from the database for each page) in conjunction with grouping with ComponentArt Grid. With the ConstantRecords and ConstantRows grouping modes, that is no longer a problem. Grouping can now be done while maintaining the efficiency of manual data retrieval.

Grouping + Scrolling

The ConstantRows grouping mode provides an additional important benefit. To support grouping in conjunction with the Grid scroller, maintaining a constant number of rendered rows was crucial. A Grid which changes its height as it is scrolled completely ruins the visual feel of a scrolling interface. With ConstantRows, grouping can finally be used with the scroller.

See a demo here: Scrolling a Grouped Grid in Callback Mode
And here: Scrolling a Grouped Grid in Client Mode

Grouping + Web Services

Grid's WebService running mode, while offering the best possible performance and elegance of design, does have limitations due its inability to perform complex server-side logic as data is loaded. This makes it difficult to support the loading of groups on the server (web service), but once again, the grouping modes greatly improve the situation.

The ConstantRecords grouping mode is easily supported in WebService running mode, since it only relies on the regular paging of records. Through this mode, grouping is now supported with web services. In the future, we will be expanding this functionality to support as much of the other two grouping modes as we can, but we feel that this is already a decent start.

See a demo here: WebService Running Mode

Conclusion

We hope you find Grid's new grouping functionality useful. We will continue to improve it and, as always, take your views and needs into account. Do let us know what you think.

Enhanced grouping isn't the only thing that's new in Grid 2008.2, but it's certainly the most significant. Nevertheless, I will be writing about the other Grid enhancements in a follow-up post. Stay tuned.

Share this post: email it! | bookmark it! | digg it! | reddit!

WebChart View Angle Chooser Control: Client-Side 3D Rendering

Bojan — Wed, 23 Jul 2008 02:57:00 GMT

View Angle Chooser is a UI control that comes included with the Charting 2008.1 product. It displays three sides of a rectangular box which can be rotated using a mouse to select the best chart viewing angle. Check out the Charting toolbar demo to see it in action.

In this post I will explain how it was implemented. The challenge was to efficiently draw 2D shapes (which represent projected 3D surfaces) using only standard DHTML technologies: HTML, JavaScript, CSS and DOM. There is no standard JavaScript library for drawing shapes, and the ones that do exist are highly inefficient, potentially requiring 100s of div elements.

We followed a trick outlined on www.uselesspickles.com which allowed us to draw horizontal or vertical right angle triangles using div elements.

The idea is to color one of the border edges of a div element and make an adjacent border edge transparent. The width of the other two border edges should be set to zero as well as the width and the height of the div itself.

  <div style='width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: transparent 100px solid;'>
  </div>

A triangle produced by the above code looks like this:

The other three right angle triangles can be drawn similarly. To draw a triangle of any size and orientation we need to subdivide it into constituent vertical or horizontal right angle triangles. A possible subdivision for the following triangle looks like this:

Not all triangles can be divided into a finite number of constituent right angle triangles as seen in the above figure. In that case, the subdivision can be stopped after the desired level of detail has been reached.

Our first attempt at subdividing the sides of a rectangular box involved dividing each quadrilateral side of the box along the diagonal into two triangles and subsequently dividing each of the resultant triangles in turn. This is what such a subdivision might look like:

White dots started appearing from imperfect alignment where two triangles are joined along the hypotenuse. To eliminate that effect and to decrease the number of triangles we changed our subdivision method to first select the largest horizontal or vertical rectangle that can be inscribed inside of the quadrilateral side. One rectangle and four triangles are produced. The rectangle can then be drawn with a simple div while the triangles are subdivided the normal way. This is what such a subdivision might look like:

Notice that no two triangles are joined along the hypotenuse.

The following drawing shows the View Angle Chooser rectangular box with each of the constituent rectangles and triangles drawn with a different shade:

When drawing 2D triangles using this technique keep the following browser incompatibilities in mind:

Internet Explorer 6 – Transparency is not supported, but you can use the chroma filter and choose one color to be transparent. Your triangle divs will be of the following form:

  <div style='filter:chroma(color=#abcdef);
             width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: #abcdef 100px solid;'>
  </div>

Opera (any version) – Divs are at least as high as the current font, so there might be a problem drawing small triangles. To get around this problem do the following:

  <div style='line-height: 0px; font-size: 0px;
             width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: transparent 100px solid;'>
  </div>

Interestingly, this control looks best in Firefox 3.0 because it is automatically anti-aliased while it renders the fastest in Safari 3.1.

Share this post: email it! | bookmark it! | digg it! | reddit!

Drilling deeper into the Charting client-side API

Bojan — Mon, 14 Jul 2008 19:17:00 GMT

ComponentArt Charting 2008.1 introduces an easy way for end users to customize the look and feel of charts. This is accomplished through a JavaScript client-side API. Charting toolbar demo in ComponentArt’s new Charting gallery shows how this can be done.

The toolbar demo allows the end user change the following properties:

Chart type
Color scheme
Orientation
View angle
Projection
Perspective
XY, YZ and ZX plane visibility
Legend visibility
Series order
Series highlighting
Choice of rendering engines, high-quality or high-speed

These properties are accessed via a ComponentArt Web.UI ToolBar control.

Properties with an on/off state, such as the visibility of the XY, YZ and ZX planes and the visibility of the legend, are implemented using toolbar buttons directly.

Properties that have several options, such as chart type, color scheme, orientation, projection, series order, series highlighting and the engine selection, use Web.UI Menu controls connected to their corresponding toolbar buttons.

The perspective property uses a Web.UI ComboBox control embedded in the ToolBar.

View Angle Chooser is a custom control implemented entirely in JavaScript. It is packaged with the WebChart assembly and can be used in your application separately from the toolbar demo.

The control must be enabled on the server before it is used:

[ C# ]
targetChart.Clientside.ViewAngleChooserEnabled = true;

The HTML code that this control generates is obtained by calling the GetViewAngleChooserHTML() method of the WebChart JavaScript object:

[ JavaScript ]
WebChart1.GetViewAngleChooserHTML();

Position, sizes and colors can be customized. The View Angle Chooser control will be discussed in more depth in a future blog post.

WebChart’s client-side API must also be enabled on the server before it is used. This was accomplished by setting the Clientside.ClientsideApiEnabled property to true. After the API is enabled it can be accessed through a JavaScript object whose name is the UniqueID property of the WebChart.

[ C# ]
targetChart.Clientside.ClientsideApiEnabled = true;

The chart properties are accessed through the getter and setter methods:

[ JavaScript ]
WebChart1.set_mainChartType("AreaSmooth");
WebChart1.set_colorPalette("Organic");
WebChart1.set_legendVisibility(true);
WebChart1.set_planeXYVisible(false);

To refresh the chart, after the properties have been set, the refresh method needs to be called.

[ JavaScript ]
WebChart1.refresh();

There are two ways in which the refresh method can function: an AJAX callback, or a traditional postback. This can be selected in the server-side code.

[ C# ]
WebChart1.Clientside.RefreshMethod = ClientsideRefreshMethod.Callback;

In our demo, the refresh method is not called explicitly because the AutoRenderOnChange property is set to true in the server-side code. This will cause a refresh to happen automatically after any client-side property has been changed.

[ C# ]
WebChart1.Clientside.AutoRenderOnChange = true;

Client-side customization is not limited to just these properties. In fact any property in your web application, chart related or not, can be customized through the client-side API. This can be accomplished using custom properties:

[ JavaScript ]
ComponentArt.Charting.WebChart.set_customProperty(name, value);

To retrieve the value of the custom property in the server-side code call:

[ C# ]
public string GetCustomProperty(string key);

Once the custom property value is retrieved you can do anything with it, such as modify any aspect of the chart or effect a change in another part of the application. See the Drill-down demo for an example of how custom properties are used.

Share this post: email it! | bookmark it! | digg it! | reddit!

ComponentArt Web.UI 2008.2 Details Announced

Miljan — Thu, 10 Jul 2008 18:34:00 GMT

The Web.UI product team has been hard at work on the next major release of ComponentArt's flagship product line. I am pleased to announce that the release of Web.UI 2008.2 is on the horizon and that it will include three new controls, a major Grid overhaul and several important new suite-wide features.

Three New Controls

The Web.UI suite is being expanded yet again. The following controls are being added with v2008.2:

Input for ASP.NET
Slider for ASP.NET
ColorPicker for ASP.NET

Major Grid Overhaul

Since its initial release, ComponentArt Grid has been perceived as one of the most valuable controls within the Web.UI suite. Our Grid-related R&D work has introduced many important innovations into the ASP.NET control space: client running mode, client-side structure creation, client templates and direct binding with web services, just to name a few. We are excited to push the capabilities of this control even further by adding the following features in v2008.2:

Multi-level grouping (web service running mode only)
Header context menus
Improved editing capabilities
Revamped keyboard support
Client-side sub-level sorting
Templated footer rows

New Suite-Wide Features

The following suite-wide features are being added with v2008.2:

Extended support for direct binding with ASP.NET AJAX web services
Accessible output and Section 508 compliance
ASP.NET MVC support
Extended keyboard support
Revamped product documentation

Release Dates - Updated!

The anticipated release dates for Web.UI 2008.2 are as follows:

Beta Release: Week of August 18, 2008
Full Release: Week of September 15, 2008

Please note that these release dates are based on our best estimate and are subject to change.

Share this post: email it! | bookmark it! | digg it! | reddit!

WebChart Drilldown Demo: A pathway to greater things

Filip — Fri, 20 Jun 2008 19:03:00 GMT

Upon visiting the drill-down live demo in CompoentArt's new Charting gallery one can easily see the benefits of client-side events within WebChart's client-side API. Not only can you register event handlers when a data point or series is hovered over, but in that event handler you get access to the data point, series and chart client-side objects that are related to the data point. This goes a long way in building interactive UIs that show more information than just a chart image.

But this is not the only interesting piece of code used in this demo. The demo also uses custom properties set on the client-side in order to customize the SQL query to the data source, and come up with a unique image from the same WebChart instance.

Let's take a closer look at both of these techniques.

Client-side Event handlers

If you take a look at the code behind the drill-down demo (available in the sample project that comes with the installation of WebChart 2008.1 or by pressing the SHOW CODE button in the demo) you'll notice that the mouse hover event handler is simply registered in the ASPX page with the following code within the WebChart tag:

<ClientEvents>
    <DataPointHover EventHandler="onDpHover" />
    <DataPointExit EventHandler="onDpExit" />
</ClientEvents>

In the call to the JavaScript onDpHover function, we will receive two parameters. The first will be the WebChart instance that generated the event, while the second will be a DataPointHoverEventArgs instance. We can use these two classes to extract any data relevant to the data point, its parent series (available from the DataPoint class), or the WebChart (also available through the parent series of the datapoint). In this example we simply pop up a DIV which shows the Y value of the data point that is hovered over, along with its X label. However, this API can be used in many powerful ways:

To add up the values of all data points in a series and display a total
To find if certain data points fall within a dangerous range in order to pop up a warning
Create links, or fire function calls that are relevant to the data point or series
Update additional parts of the UI that may be related to the data point or series

It is also important to note that this functionality was made possible by enabling WebChart's RenderAreaMap, Clientside.SerializeDatapoints and Clientside.ClientsideApiEnabled boolean properties in the server-side code.

Custom Properties

In addition to client-side events the Drill-down demo uses custom properties in order to pass additional data to the server-side. Custom properties are set on the client-side through WebChart's setCustomProperty(key, value) method and retrieved on the server-side through the String GetCustomProperty(string key) method.

The method provides a way for developers to quickly pass parameters from the client-side to the server-side code in a way that is optimized to take as little overhead as possible. The developer can then retrieve the parameters in the server-side code and change the WebChart instance or any other server-side code in any way imaginable.

In the Drill-down demo, we use the custom properties in order to customize the SQL query to the database. We pass values of MONTH, YEAR and DAY for the period custom property in order to customize the SQL query to sum up the daily sales from the database for the given period, and produce a suitable data source for the WebChart based on the period chosen.

This concept can easily be extended to:

Select the data that the user wants displayed in the chart
Select functions that the user wants applied to data (max, min, derivative or any custom function)
Apply a custom template to the chart upon a user action, based on user preferences

Caching Customized Charts

In addition to providing flexibility to a single WebChart instance, use of custom properties can be important when caching chart images. Since our live demo is posted on a high-traffic site, and the data in the sample database does not get updated, we do not have to render a new chart for every request made to the page. Furthermore we know that all charts with the same custom properties (i.e. MONTH view, December, 2004) will produce the same image. Since setting custom properties on a chart makes that chart customized we want to enable caching for customized images in order to save our CPU from needlessly rendering images.

WebChart1.Clientside.ClientsideCustomizedImageCachingEnabled = true;
WebChart1.CacheInterval = 86400; //1 day in seconds

This ensures that each unique chart image is rendered once daily and the same image is reused (with virtually no overhead) for all subsequent requests within a day.

Conclusion

Even though at first glance the Drill-down demo looks the least impressive of the three live demos, when you look under the hood you'll find a lot of features to get excited about. Whether you're building powerful and interactive UIs, allowing end-users to customize the data shown in the chart or designing your web app to be CPU conscious and take advantage of caching you can use this demo with its sample code as the starting point to implementing the techniques described above.

Share this post: email it! | bookmark it! | digg it! | reddit!

WebChart AJAX Zooming and Scrolling: How to get the most out of your data

Filip — Wed, 18 Jun 2008 17:32:00 GMT

Zooming and scrolling is one of those essential features that is a must-have for any comprehensive charting product. However, deciding how to implement zooming and scrolling within WebChart was not obvious as there was no industry consensus on how this feature should look and operate, let alone how it should be implemented.

Our first decision was an easy one as it had to do with the technology used to implement the feature. Right away we knew that we did not want any third party plug-ins (including Flash) to be needed in order to use the feature. It had to be pure JavaScript and DHTML, yet still look good and be user-friendly. The reason for this was not only ease of compatibility with virtually all of today's environments but also the ease of customization for our customers. The second decision had to do with how the feature should work. Some common implementations allow end users to use the mouse to draw a rectangle that represents the area that you want to zoom into. This fairly useful, however zooming out is not elegant with this model. In addition to zooming, we also wanted to give the end user the ability to scroll through large sets of data, which was not possible with this implementation.

So we decided to go with an implementation that uses a second instance of WebChart as the zooming and scrolling control, as seen in our demo. This was the only implementation that satisfied all of our requirements while still visually looking good and being user friendly. Below is a capture of the control in action:

Configuring Your Own Control

ComponentArt's concept of a zooming and scrolling control is a simple one. You create another instance of WebChart, set its Clientside.IsScrollControll property to true, and finally connect it to all the charts you want to control with this instance (yes, this means one zooming and scrolling control can control multiple WebCharts). When the page is rendered in the browser, the control chart will be enhanced with the scrollbar and the shading which will allow the end user to zoom and scroll.

The best way to get started with zooming and scrolling is to take a look at the live demo of the zooming and scrolling control. It is advisable to then read the documentation of this feature as well as look at the code that makes up the live demo (both of which are also available through the documentation and the sample project that come with the installation of WebChart 2008.1)

When you feel you're ready to make your own control, here are a few tips to keep in mind:

Connecting your display chart to the control chart is done through the display chart's Clientside.MyScrollControl, which should be set to point to the instance of the control chart. This allows multiple display charts to be controlled by a single control chart
Always use the same data source in the control and display chart. This prevents the data in the display chart from falling out of sync with data in the control chart. The result of this is that the display chart will have more data than needs to be displayed at any one time, but this is the correct implementation, further explained in point 3 below.
Set the initial display range through control chart's server-side SetZoomRange(from, to) method. This sets the appropriate display range on all the controlled charts, as well as shade in the appropriate region when the scroll control renders. The parameters passed need to be of the same type as the values in the X axis, either DateTime, String or numeric. The call to SetZoomRange needs to be done before any of the display charts perform their data binding, in order for the appropriate range of data to be extracted from the data source. For this reason it could be considered good programming practice for the control chart code to precede the display chart's code.
Do not set WebChart.CoordinateSystem.XAxis.MinValue or CoordinateSystem.XAxis.MaxValue on the display chart as that will override the values set by the zooming and scrolling control.
Setting WebChart.AdjustReferenceValue to true will zoom in to show just the Y range in which all the values in the current chart fall into. This is very handy for use with display charts that have large and varied data sets.
Customize the look and feel of the zooming and scrolling control by changing the images for the scrollbar, the shadow color, shadow opacity as well as the HTML and the position of the Range Display pop-up. See the documentation on how to do this.
Align the axis of the control chart to the beginning and end of the scroll bar. This is done by matching the left and right margin to the width of the arrows on the ends of the scroll bar. Since WebChart's margin widths are set in percentages, we need to match that to the pixel widths of the arrow images. So if the scroll bar arrow images are 15 pixels wide and the chart is 500 pixels wide, the following code will do the trick:
```
WebChart2.View.Margins.Left = (15.0 / 500) * 100;
WebChart2.View.Margins.Right = (15.0 / 500) * 100;
```
Use WebChart's client-side API to dynamically set the active display range. For example if you want to have a button that will set the range to show year to date, you need to execute the following JavaScript code when the button is pressed:
```
var startD = new Date();
var endD = new Date();
startD.setFullYear(2008,1,1);
WebChart2.rangePicker.selectRange(startD, endD);
```
Again, the parameters passed to the method need to match the type of the X axis dimension, either Date, String or numeric.

That's it from me for now, I hope you find these tips helpful when creating your zoom and scroll charts. I will write more about WebChart's other cool client-side features in upcoming posts.

Share this post: email it! | bookmark it! | digg it! | reddit!

Charting 2008.1 - Boldly Going Where No AJAX Chart Has Gone Before

Miljan — Tue, 17 Jun 2008 18:24:00 GMT

We are thrilled to announce the release of ComponentArt Charting 2008.1. This product has been in the works for well over a year and it brings a number of truly important new features to the market. At this time I would like to highlight the two most significant areas of product improvement in v2008.1, and the Charting development team will follow up with additional juicy details related to the new functionality.

AJAX Interactivity

We think that the new view angle chooser, zooming and scrolling UI and the drill-down features push AJAX capabilities further than any other charting solution on the market. A key point here is that all of these features were implemented through the brand-new client-side API of the WebChart control. We are only scratching the surface of what can be done by showing a few practical applications of this API.

Dual Rendering Engines

The 2008.1 release of Charting for .NET introduces a new high-speed rendering engine, augmenting ComponentArt's famous 3D rendering quality with the ability to produce GDI+ chart renderings in high-traffic environments. All charts within our brand-new gallery can now be viewed through both rendering engines.

I hope this has served as a nice high-level overview of the most important new features in v2008.1. Many additional details will follow in the coming days and weeks.

Share this post: email it! | bookmark it! | digg it! | reddit!

ComponentArt

Let us know what you want!

ComponentArt Gauges for Silverlight *Sneak Preview*

$10,000 for the Best Silverlight App!

Web.UI ASP.NET Grid: Synchronize Checkbox States with Row Selection

AZGroups Scott Guthrie Event 2009, Phoenix

Securing Applications Built on Silverlight and WCF

ComponentArt: Past, Present and Future

Hey, nice package!

Web.UI ASP.NET Grid: Retrieve the filtered set of rows in Client RunningMode

Convert Web.UI ASP.NET Grid into a data entry spreadsheet

Tapping Into the Raw Power of Silverlight

Gauges to join ComponentArt's expanding list of controls

ComponentArt Silverlight Preview

MaskedInput Transform Intellisense

Building in new MaskedInput Transforms

Customizing MaskedInput Transforms

MaskedInput Transform functionality

Major input control Gotcha

Web.UI 2008.2 Grid News: Grouping

WebChart View Angle Chooser Control: Client-Side 3D Rendering

Drilling deeper into the Charting client-side API

ComponentArt Web.UI 2008.2 Details Announced

WebChart Drilldown Demo: A pathway to greater things

WebChart AJAX Zooming and Scrolling: How to get the most out of your data

Charting 2008.1 - Boldly Going Where No AJAX Chart Has Gone Before

ComponentArt Gauges for Silverlight Sneak Preview