Tag Archives: CTP

ClientUI 7 Preview Part 4: Multiple Selection ComboBox with Auto Filter and Checkbox Input Support

Earlier this month, I’ve blogged about some of the exciting new controls that we will release in the next few weeks, which include a brand-new combobox with server paging multi-column support, enhanced GridView and new ItemsControl grouping capability. Many of these new controls are aimed for business application development that target Silverlight and WPF platforms – and soon WinRT. You can check out the full coverage here.

These days, web applications are getting more attractive with much better user experiences than in couple years ago. Numerous innovative UI controls are popping up as new design patterns are discovered. One of the most demanded controls that requested by our enterprise customers is the Facebook or Dropbox-like multi-selection combobox.

With proper design, multi-selection combobox can help improve user experiences in overall. Instead of using listbox that occupy larger screen real estate, multi-selection combobox allows a more intuitive and efficient way to capture multiple input through type-ahead and automatic list filtering. Considering its compact size and input efficiency, multi-selection combobox is an ideal input pattern for numerous LoB scenarios like capturing multiple roles for a user group, multiple contacts for mailing, multiple items for activation, and so forth.

The upcoming release of ClientUI will include the new UXMultipleSelectionComboBox – joining the advanced ClientUI data-aware component lineups. It doesn’t only come with industrial standards design, but also equipped with powerful architecture such as MVVM binding to the multiple selected items. I’ll unveil the new control entirely in this blog post. Read on.

Editable Multiple Selection

As with every combobox, the multi-selection combobox supports two fundamental input mode: Editable and Non-editable. Editing support with multi-selection is one of the greatest challenges in both control architecture and user experiences design.

First, the control needs to display the selected items and the textbox seamlessly together, while at the same time automatically enlarge the control as new items are selected. And of course, users can delete any of the selected items and the control should adapt its size back to the content.

Introducing UXMultipleSelectionComboBox

Second, the multi-selection combobox with editing support does make sense only when the results are filtered as you type ahead. Thanks to the comprehensive ClientUI’s data framework, the server paging is supported through QueryDescriptor.

UXMultipleSelectionComboBox with automatic server filtering

Many of UX aspects have also been thoughtfully put on the control, mostly the editing experiences such as the Backspace or Delete key should perform different action based on the current selection (whether it’s on the textbox, on the selected item, or in an empty area).

Another nice feature is the smart results filtering feature where the selected items are automatically removed from the result list. This makes sense in most LoB scenarios as users don’t need to see the items already in the selection. See the image below.

Editable multiple selection with smart filtering

Non-editable Multiple Selection

When the IsEditable property of the multi-selection control is set to false, it will automatically show checkboxes in the result list which appears to be the most convenience way for users to capture multiple input in such non-editing mode.

UXMultipleSelectionComboBox with checkbox input

And better yet, you can combine all the new features available in the data combobox lineups along with the multiple selection feature. For instances, you can enable multiple columns, paging and sorting, while continue to work perfectly with the checkbox input.

UXMultipleSelectionComboBox works perfectly with existing features

Full MVVM Support

As you read up at this point, it looks like the multi-selection control has everything you need, from the appearance to the functionality. But wait, how are you going to use it in databound scenarios since the list is paged and retrieved on demand?

Thankfully, UXMultipleSelectionComboBox is built from the ground up to fully support implementation with MVVM pattern. This means that every items that added to the selection via user interface will synchronize to the SelectedItems property. And in the same way, inserting or removing the items from the ViewModel will also automatically update the user interface.

With MVVM support, you can easily bind the SelectedItems property of the control to a collection property in the ViewModel using two-way binding mode. This also allows you to set the initial selected items such as in form editing scenario. See the example code below.

         IsEditable="True" DisplayMemberPath="ProductName" SearchResult="{Binding Items}"
         FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}"
         SortDescriptors="{Binding QueryDescriptor.SortDescriptors, Mode=TwoWay}"
         PageDescriptor="{Binding QueryDescriptor.PageDescriptor}"
         CanUserPage="True" CanUserSort="True" AutoFilterSelectedItems="True"
         SelectedItems="{Binding SelectedItems, Mode=TwoWay}"



And the results will look like the following.

Full MVVM support in UXMultipleSelectionComboBox

Download ClientUI Developer Preview

In this post, I’ve just scratched the surface of the new multi-selection combobox that we are going to release soon – hopefully in the next couple weeks. For now, I highly recommend you to download the latest Developer Preview to try out many of the UX aspects that I couldn’t express with words. The Developer Preview has been updated to include this new bits along with the new samples. Click here to download the developer preview and experience it for yourself. Enjoy and happy combo-boxing!

Jimmy Petrus

ClientUI Preview Part 3: Pageable and Multi-column ComboBox, Enhanced GridView, Items Grouping and more

In the last two posts, I’ve covered many of the new framework features that provide architectural guidelines for building highly extensible and maintainable business applications on Silverlight and WPF. You can check out the first post here which explains dependency injection and IoC containers, and the second post here which unveils the new ClientUI region manager library to implement view extensibility.

Recently, we’ve been working with a number of large clients in migrating their apps to the Silverlight platform. As I’ve mentioned in my previous posts, we can see the increasing demand of Silverlight in enterprises as it provides a true rapid solution for building visually engaging and highly scalable business apps. Check out our recently published Silverlight case study here.

That said, we’re focusing on creating tools that enable companies to succeed in achieving their business objectives with rock-solid and mature solutions today – one that enables them to complete their IT projects on time and on budget. And we’re incredibly pleased to be the part of the succession through the increasing adoption of our toolset in enterprises.

In this post, I’ll share some of the upcoming new exciting tools that were thoughtfully designed to address many challenges that you often find while building business apps.

The very best of ASP.NET WebCombo, now on Silverlight and WPF

Flashing back to a decade ago, Intersoft was founded with only a handful of products, one of them is the WebCombo control for ASP.NET. At that time, web pages are slow and unresponsive due to large view state and postback. There were no AJAX yet – so we invented the very first AJAX-enabled ComboBox with highly efficient data retrieval and blazing fast response which makes it the most popular ComboBox in the industry – till today. Of course, it has evolved over the years and you can try it online here.

Today, I’m very excited to announce that the highly-efficient and advanced WebCombo-like control is now available on the developers’ most loved platform: Silverlight. Meet the brand-new UXPageableComboBox.

The pageable ComboBox includes all the features available in the classic ASP.NET WebCombo, while sports a much appealing user interface, thanks to the rich graphics in Silverlight. Let’s start with the first sneak preview below.

Introducing UXPageableComboBox for Silverlight and WPF

Say welcome back to multiple columns, a favorite feature many of us have missed for a while… And we’ve got a bonus feature for you as well, sortable columns. Note that the multiple columns is a built-in feature now, and is not a workaround that requires heavy re-templating.

UXPageableComboBox with Multiple Sortable Columns

And not to forget the image and templated columns as well.

UXPageableComboBox Built-in Column Type

The pageable ComboBox includes a more sophisticated user experiences than the ASP.NET version of WebCombo in the way users make selection and navigate the items. For example, by default only the matched item is displayed when the selected item is set initially. A ‘Browse All’ button will appear providing a visual hint to users indicating they can choose other items by clicking that button, or  by simply clearing the text.

UXPageableComboBox combines highly-efficient data paging and intuitive user experiences

Another nice feature that we manage to put in this release is the watermark description in the text box. This is one of the most requested features in business apps  particularly for the code-value pair input scenario. Think of chart-of-account code input where accountant can input the account code, but still wish to be able to see the account name at the same time. This is now possible in the new Pageable ComboBox, and the best of all – it’s a built-in feature so you don’t have to make any customizations.

Unique description watermark feature for code-description input

New Powerful LoB-centric Features

The upcoming new version is strongly focused on new features that were driven by real-world business scenarios and usage. One of the data components that receives major new features is UXGridView. It introduces advanced features such as columns collection binding,  column header binding, and batch items validation.

In addition, we’ve also added a new rendering mode in UXGridView that allows the empty space to be filled with virtual rows. This new mode is particularly ideal when the Grid is used to display line details such as transactions. If you’ve used apps such as Quick Book, or any Mac apps, you should be already familiar with this feature.

Virtual rows rendering in UXGridView

As seen in the above illustration, the grid fills the remaining empty space with virtual rows instead of a blank white space. The virtual rows will grow or shrink automatically as the viewport is resized, and better yet, it works perfectly with row virtualization so you don’t have to sacrifice the rendering performance.

And with the empty space virtual rows, we took the grid further by introducing natural inline editing experiences when adding a new item. This feature activates a new row after the last item of the grid for rapid data addition. Users can simply click on the any remaining space, input the data and cycle through the last cell, and then tab out to the next new row and so forth. Activate this feature in your apps with a simple property set, guaranteed your users will thank you a million!

New row position at last item for rapid items addition

Furthermore, the items control architecture has been revamped to introduce new capability such as grouping and style-able group container. This means that most of the common controls that derives from items controls such as combo box and list box now supports grouping out-of-the-box!

Imagine the possibilities that you can do with the grouping capability: displaying contact list grouped by type in a list box, or displaying expandable/collapsible groups within the resultbox of a combo box. Thankfully, you can now achieve all those possibilities without any major efforts.

Grouping in items control made easy

Download the Developer Preview Bits

I hope you enjoy reading my blog post through the detailed feature coverage. And to complete your pleasure, we’ve made the ClientUI Developer Preview available along with the technical samples. Download the developer preview bits today. Explore the technical samples that demonstrate the new controls and features explained above, and test drive it in your apps within minutes.

And by the way, I’ve just received fresh builds from our development labs as I wrapped up this post. I can tell that there are many more new exciting stuff coming down the pipeline, so watch out this spot closely.

Jimmy Petrus
Chief Software Architect

UXGridView CTP3: Feature-complete Grid for Silverlight & WPF

I hope you’ve enjoyed the second CTP of our upcoming data controls released a couple weeks ago, which includes MVVM-ready data validation and data editing capabilities, as well as customizable editing control architecture. Make sure you also check out Andry’s blog posts covering the editing features in-depth here and here.

Today, I’m excited to announce the third CTP release of our forthcoming UXGridView control. The release includes the expected feature sets according to the CTP milestone described in my earlier post here, plus a handful of nice additions such as enhanced row details, new expander column, and a sophisticated Gmail-style column checker.

Some of the key highlights in this new CTP are discussed in the following.

QueryDescriptor Enhancement

The QueryDescriptor now includes RaiseQueryChanged() method, thanks to Werner Grift for the nice feedback in the LinkedIn group discussion. With the new method, you can programmatically raise the QueryChanged event in your ViewModel, such as when a related view has changed, or when the view needs to be refreshed due to user interaction like button click (called through the delegate command).

Improved Row Details and Hierarchical Grid

The row details feature receives major update in this new CTP release, which now works with the new expander column. The expander column contains a toggle button which is convenient for users to expand or collapse the row details at runtime, see the illustration below.

Row details with expand button

With the new expander column, it’s now possible to use the row details for more advanced business scenarios, for instances, implementing a hierarchical/nested grid such as in Customer-Orders scenario.

Another interesting scenario is the support to load the child data “on demand” based on the expanded item. UXGridView now includes a new property called ExpandedItem, making it possible for you to bind the child data on demand in the ViewModel. Both WCF RIA and DevForce samples are provided to demonstrate how to achieve such scenario.

Nested UXGridView

Notice that the paging and other settings can be applied individually in the child grid for best performance and results.

New Select Column

When I got the CTP build fresh from the lab, this particular new feature looks to be the most impressive. It’s one of my favorite features, and certainly deserves to be one of yours. Take a look at the screenshot below.

Select column with row checker

Although seems common, the select column feature is not available in any other Silverlight/WPF grids in the market – not the one with correct implementation.

The interesting point about this feature is its automatic checked items persistence capability. This means that if you check all the rows in page 1, then go to page 2, the previously checked items will remain persisted. This behavior also applies consistently in all the grid operations such as sorting and grouping. In the above example, we verified the persistence concept by binding the CheckedItems property to a list box which shows all the checked items regardless of the paged view scope.

With the feature correctly implemented along with the MVVM support, it will be useful in many scenarios in business applications – think of web-based mail applications such as Gmail or Hotmail for examples.

Deferred Scrolling Mode

Another nice feature that we managed to include in this CTP release is the deferred scrolling mode. When enabled, dragging the thumb of the vertical scrollbar will not update the view immediately. Instead, an intuitive visual hint will appear near the scrollbar indicating the target row of the scroll position. See the screenshot below for details.

Deferred scrolling with customizable visual hint

This scrolling mode is particularly useful when you have relatively large amount of rows, and also allowing users to quickly scan the information as they scroll through the viewport.

Standards-Compliant User Experiences

As in our good tradition of development, all Intersoft’s UI controls are designed with the best user experiences that conform to the ISO Standards 9241, including the focus and unfocused behavior, keyboard  navigation using arrow keys, and many more.

In this new CTP release, the UXGridView now shows a dimmed focus visual style when the control doesn’t have focus. This enables users to intuitively responding to the user interface based on the visual state presented in the application. The following illustration shows the unfocused visual state of the UXGridView.

ISO-standards UX

Download the CTP3 Bits

In summary, the CTP3 release includes nearly-complete feature sets of UXGridView planned for final release later this month. So far, the latest CTP includes full MVVM support for server data access, server paging and filtering, data validation, editing, customizable edit controls, row details, multiple selection, checker column, deferred scroll mode, flexible appearance and layout settings, and much more. The final release will include more advanced features such as data exporting, data virtualization, and an advanced column filter interface.

Click here to download the CTP3 bits and test-drive the new UXGridView features today. The download package includes latest ClientUI assemblies as well as updated and new samples for both Silverlight and WPF platforms.

Enjoy the new CTP bits! We’d love to hear what you think about the new features available in CTP3, please post your feedback, questions or issues to our community forum.

All the best,

March 2009 CTP of Intersoft Presenter and DataSource is now available

We have received numerous of feedback on the Feb’09 CTP and we thank you for spending your precious time testing our CTP and share your valuable opinions with us. March 2009 CTP is now available thanks to you. It is now ready for download in the same intersoftpt.com/ctp page.

Here is what’s new in March 2009 CTP:

  • Advanced data grouping capability.
    Unlike the standard grouping behavior, Intersoft Presenter offers unique grouping behavior aligned to its “Everything is synchronized” concept. This means user can perform advanced grouping in one view and switch to other views without losing the grouping state. User can also perform multiple grouping and combine it with various sort directions in each grouped column.
  • Client-side paging and filtering.
    As the name implies, this feature enables paging and filtering operation to be carried out with all data loaded in the client-side. The result is super responsive and intuitive application which your user will certainly love.
  • Server-side paging
    Similar to client-side paging and filtering concept, the server-side paging handles the operation n the server-side through the declarative data source, for example Intersoft’s AstoriaDataSource. You can enable the paging operation in a very minimal line of code.
  • Built-in data drilling.
    Data drilling is one of the most requested futures to enable user slash and cut through all complexly related tables and view the specific information easily. With the out-of-the-box data drilling capability, you can deliver a data drilling Silverlight application within minutes.
  • Hybrid data drilling
    Hybrid data drilling combines the built-in data drilling feature and the multiple hybrid view concepts. It enables user to perform deep drill down and view it in various view ports. You can easily add any presenter views as the child views easily.
  • Advanced data caching mechanism.
    The key of data caching mechanism in Intersoft DataSource is to deliver robust and more responsive Silverlight application by caching the retrieved data and keep it in the client-side. When the same data is requested again, the cached copy of the data is fed into.

You can view the complete news about “What’s new in March 2009 CTP?”

Andry Handoko Soesilo has written a new getting started guide for the March 2009 CTP. These guides are intended for conceptual introduction, easy implementation, and technical discussion of Intersoft Presenter and DataSource.

I hope you enjoy our March 2009 CTP. Please continue to voice your opinion and share your idea with us.

Best regards,

Intersoft Presenter’s VirtualScroll™

In my previous post about our upcoming presenter for Silverlight, I have briefly mentioned about the performance in the “Piece-of-mind with bare-metal performance” section. Related to this performance topic, Andry has recently posted a blog discussing VirtualScroll™  — our innovative technology behind Intersoft Presenter that is designed to let you display any number of items without performance hit.

Personally, VirtualScroll is one of my favorite features in Presenter despite of  many stunning UI/X capabilities. In fact, it’s the most crucial architecture that makes Presenter™ different and unique in many ways, especially when it comes to scalability factor.

Did someone force you to use server-side paging to speed up your Silverlight data presentation? I guess that’s because their products will crash — or probably hang like for several minutes — if you attempted to display what they-so-called “too many items” into their Grid. We’ve seen many of competing products do not understand about Silverlight nor its key strength in the RIA space, because they created a Grid with traditional ASP.NET/DHTML-style concept. We see it completely different here, as Silverlight introduces more advanced capabilities such as offline-ready scenarios where an application doesn’t have to connect to a server in order to display data.

Imagine a new scenario in Silverlight where you would like to have the possibility to download some static data and keep it locally through memory cache or isolated storage. If your static data contains records up to 500 or even thousands, you would really have to make sure your data presentation tool can display them up in decent performance. This is where our Presenter™ and DataSource™ steps in, which makes it possible to achieve the above scenario, and even more advanced scenarios that we’ll cover in the upcoming posts.

VirtualScroll is definitely a very powerful technology, although we have to went down the deep path to resolve every challenge and many difficult scenarios, for example when it deals with grouping, dynamic templating and more. Speaking about grouping and the rest features, there are some good news that we’ll announce in the next CTP of Intersoft Presenter™ and DataSource™. So, stay tuned!

By the way, Andry also includes a video that shows the performance comparison of standard control  and Intersoft Presenter, as well as downloadable sample so you can try it out yourself. So, make sure you check it out here.

All the best,