Intersoft WebCombo Documentation
WebCombo Features Overview
See Also Send comments on this topic.
Intersoft WebCombo > WebCombo Features Overview

Glossary Item Box

This topic summarizes the key features available in the latest version of WebCombo. It provides information about the basic features of WebCombo such as query mode, multiple columns, editing validation and rich UI customizations. You will also learn how to use WebCombo such as using the control in data bound mode, customizing the search fields and items adding, allowing wild card search, and more.

This topic discusses the WebCombo features in depth, which contains the following topics.

  • Data Binding
  • Unbound Mode
  • User Interface Elements
  • Improved Layout
  • Dynamically Add Item
  • Additional Search Field
  • Minimum Character Request
  • Allow WildCard Search
  • TextBox Mode
  • Validation
  • WebCombo Look and Feel
  • Column Types
  • Extensible Client-side API
  • Text Settings

Data Binding

One of the most significant productivity gain that you can experience after migrating to the latest version of WebCombo version 4 is the new, codeless data binding development experience.

Codeless data binding means that you can configure the data source, its connection and related property without writing code. This means that means you can configure the datasource through a simple drag-drop and a few mouse clicks.

You can declaratively create a WebCombo instance and bind it to a table in your SQL database in two simple statements such as illustrated in the following example:

ASPX Copy Code
<ISWebCombo:WebCombo ID="WebCombo1" runat="server"
            UseDefaultStyle="True" Width="200px" Height="20px"
            DataSourceID="SqlDataSource1" DataTextField="ActivityName
            DataValueField="ActivitiesId">
</ISWebCombo:WebCombo>
ASPX Copy Code
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
                   ConnectionString="<$ ConnectionStrings:DbConnectionString >"
                   SelectCommand="SELECT * FROM [Activities]">

As you can see in the above examples, the WebCombo1 is bound to a DataSource control through DataSourceID property. The WebCombo connects to the specified DataSource control and display data from the DataSource available in SqlDataSource1.

With this new data binding concept, building a data bound web application is very fairly easy and straightforward. Also notice that there is no code required in the page's code behind. In the previous version, you will need to configure the InitializeDataSource event and write code in the event which pass the DataSource to the e.DataSource property. While this technique is no longer required in WebCombo version 4.0, it is still supported for backward compatibility.

The benefits of the new DataSource control binding support:

Several important notes that developer should aware with the new DataSource control concept:

To learn more about data binding, see Data Binding Wakthroughs.

FAQ

FAQ: I am not familiar with DataSource control concept and I have been pretty much familiar with DataSource object binding that you introduced in pre-2007 products. Why do you introduce this new data binding concept?

We did not introduce this new DataSource control binding concept. This new concept was introduced by Microsoft in ASP.NET 2.0. With this new data binding mechanism in ASP.NET 2.0, Microsoft encouraged developers to use DataSource control to take advantage of new features and productivity gains.

As leading third party component provider, we are committed to deliver latest products that integrate and work best with latest Microsoft's technologies. The DataSource control supported in Intersoft 2007 product lines enables professional developers to leverage the benefits of new data access features and functions available in ASP.NET 2.0 and Visual Studio 2005.

Recognizing many benefits that DataSource control offered, we highly recommend developers to use this new data binding mechanism.

 

FAQ: How can I learn more and where can I get more resources related to DataSource control?

There are a lot of resources that explain how to use DataSource control. Please refer to the following sections.

 

FAQ: Does WebCombo version 4.0 still support older data binding mechanism (i.e. through InitiliazeDataSource)?

Older data binding mechanism through InitializeDataSource or DataSource property set in code behind is still supported. Existing web application that is still using older data binding mechanism will work flawlessly once migrated to Intersoft 2007 platform.

Unbound Mode

WebCombo has the ability to implement the control in true Unbound mode by using improved server-side object models. Unbound mode is a feature where the data is not bound to database even though the data could be taken from database. Developers can easily add multiple columns and row items in a single interface WebCombo Designer(Centralized). The columns and rows can also be added dynamically at runtime. It is also applicable to the Microsoft ASP.NET Server component guideline including standard ViewState implementation.

Here is the snapshot to create unbound mode in WebCombo Designer:

To learn more about unbound mode, see Unbound Mode How-to Topics.

User Interface Elements

WebCombo is designed to deliver the most sophisticated and rich user interface. The UI elements of WebCombo include:

To learn more, please see User Interface Customization How-to Topics.

Improved Layout

WebCombo adds numerous appearance-related properties to improve the look and appearance of the WebCombo layout such as:

To learn more about combo's alignment, see How-to: Set combo's alignment to be right displayed.

Dynamically Add Item

One of the unique features available in WebCombo is the ability to add a new record at run time without requiring full page postback. When you set the AllowAddItem property of the WebCombo to true, you will be able to add items which are not existed in the data source.

Now, the row addition to WebCombo can be done through client-side. You can use the object-oriented JavaScript function which has been provided by the WebCombo API specifically to add new rows to the WebCombo. The best thing about this feature is that the new object will be available directly in the client-side which replicates the server object model. This makes client-side development as comfortable as in the server.

The following illustration shows the snapshots the feature:

  1. Initial data population



  2. Search for specific record



  3. Searched text is added



  4. Final data



As you can see from the snapshots above, the data insertion is fairly simple and straightforward. When you search for an item which is not existed in the list, the particlar item can be added instantly to the collection by simply pressing the "Enter" key. The result is shown in the third snapshot above.

FAQ

FAQ: How to implement adding item in WebCombo when we set AllowAutoPostBack and AllowAddItem to true?

Sometimes when you enable AllowAddItem and AllowAutoPostBack, you missed to create WebCombo_AddItem server side event. In this case, an error will occur because AddItem event is called but there is no event to handle this task. In this situation, you should handle the WebCombo_AddItem server side event.

For example:

C# Copy ImageCopy Code
protected void WebCombo1_AddItem(object sender, ISNet.WebUI.WebCombo.RowEventArgs e
{
   // get cached data from data source control
   DataView view = this.EmployeeDataSource.Select(DataSourceSelectArguments.Empty) as DataView;       

  // update the cached data
  DataTable table = view.Table;
  DataRow newRow = table.NewRow();
  newRow["FirstName"] = e.Row.Value;
  table.Rows.Add(newRow);
}

Additional Search Field

WebCombo allows multiple field to be searched against DataSource instead of just the specified DataTextField. The DataTextField remains to be the primary search field followed by comma separated list of string specified in the AdditionalSearchField property. This feature is extremely useful in a situation where you want to search the information in multiple columns.

The following image illustrates the AdditionalSearchField feature.

In the screenshot above, AdditionalSearchField is set to ContactName and City columns. When user types "ber" in the combo's box, it will search any data that contains "ber" characters in the defined columns, such as Bernardo Batista (ContactName), Berlin (City) and etc.

To learn more, see How-to: Use AdditionalSearchField to search a query text on other column besides DataTextField column.

Minimum Character Request

Another time-saving features available in WebCombo is the ability to define the minimum character before the control queries the data to the server. First, it checks for the input length that users type into the WebCombo, then compare against the length specified in the MinCharsToRequest property. With this feature, data retrieval will be performed only if it satisfies the value assigned to MinCharsToRequest property. This feature is specifically useful to narrow down relatively large result sets by limiting the data requests based on the number of typed characters.

Below is the snapshot of the feature:

Normal behavior

  

Behavior with MinCharsToRequest property set to 2

  

To learn more, see How-to: Set minimum character typed to request the data.

Allow Wildcard Search

By default, WebCombo will search the datasource based on the starting character of the user's input. For example, if user inputs an "a" character in the text box, WebCombo will search all data that begins with the "a" character.

Allow Wildcard Search is a feature that allows wildcard/fuzzy logic searching. For example, if user inputs "rio" in the search field, WebCombo will search all data that contains the word "rio".

To learn more, see How-to: Enable wildcard search.

TextBox Mode

TextBoxMode has two enumeration: Editable and ReadOnly.

When the TextBoxMode is set to Editable, WebCombo will use the default searching behavior. Users can filter the datasource by typing a keyword into the text box. When set to ReadOnly, WebCombo will behave like a standard ASP.NET Dropdown List. Users can select an item from the list, but filtering functionality is disabled.

To learn more, see How-to: Set the TextBox mode in WebCombo.

Validation

WebCombo supports .NET's control validation, which means that it is compatible with all Validators control such as RequiredFieldValidator. You can easily create a validation simply by dropping a validator control from toolbox into your web form and set its ControlToValidate property to the WebCombo object you want to validate.

 

The results look like the following illustration.

To learn more, see Validation How-to Topics.

Column Types

WebCombo provides predefined column type such as Image, ImageAndText and so on, which are most commonly used. For greater level of customization, the content of the WebCombo's column can also be customized to display rich HTML-based content by setting the ColumnType property to Custom and write the custom content code in InitializeRow Server-side event.

Below is the screenshot of ImageAndText Column Type:

To learn more about Column Types, see Column Type How-to Topics.

Extensible Client-side Programming

WebCombo provides a set of comprehensive client side API to let developers extending the WebCombo to achieve more advanced business scenarios. You can access WebCombo's properties and methods using the similar server-side syntax.

The following example shows how to get the selected row in WebCombo in the client-side.

JavaScript Copy ImageCopy Code
function SetText() 
{
   var WebCombo1 = ISGetObject("WebCombo1");
   WebCombo1.SetText("Maria Anders");
   WebCombo1.LoadValue();
}

To learn more, please see Extensible Client-side Programming How-to Topics.

Text Settings

You can easily customize the textual settings of the WebCombo control through the WebCombo Designer. Under the Advanced Settings node, expands LayoutSettings and Text Settings node, you will find the textual-related properties as you can see in the following illustration. You can modify each property in the designer by simply modified the predefined text settings.

textSetting

See Also