Dynamic List Field - ASP.NET Autocomplete DropDownList with Validation

Do you ever need an ASP.NET autocomplete DropDownList with validation? Dynamic List Field is the answer. Dynamic List Field represents a labeled autocomplete drop down list that allows user to select, display and validate a single item from the autocomplete drop down list.

Implementation

Dynamic List Field is implemented by the DynamicListField class.

Documentation

Click here to see the documentation of the DynamicListField class.

Validations

Dynamic List Field supports validations in the following execution order.

• Not null validation
• Regular expression validation
• Compare to value validation
• Compare to control validation
• Custom validation

Custom Validation

Dynamic List Field supports custom validation at both client-side and server-side. To setup the custom validation error message, use the DynamicListField.CustomValidation.Message property; to setup client-side custom validation, use the DynamicListField.CustomValidation.ClientValidator property to specify the name of a JavaScript function that is used to perform client-side custom validation; to setup server-side custom validation, handle the server-side CustomValidate event.

The custom client validator function must take one parameter which in run-time will receve the validation context as a JSON object in the following format:

{"source":dropDownListId, "data":selectedItem, "callback":callbackFunction}.

Here the "source" contains the id of the drop down list; "data" is a JSON object that contains the data of the selected item in this format: {"index":selectedIndex, "value":selectedValue, "text":selectedText}; "callback" contains a function that can be used during asynchronous custom validation to notify the XField's Client Validation Engine about the result of the validation.

To perform synchronous custom validation, add validation logic in the custom client validator you provide, and return a boolean value to indicate whether the field data passes the validation or not.

To perform asynchronous (Ajax) custom validation, first save the callback function somewhere (typically in a global variable); then setup Ajax call to the server-side to handle custom validation. After the Ajax call completes, notify the XField's Client Validation Engine about the result of the validation by invoking the saved callback with a boolean value to indicate whether the field data passes the validation or not.

Client-side Selected Index Changed Event

Dynamic List Field exposes the OnClientChange property to allow you to handle the client-side selected index changed event. To handle this event, you need to setup a JavaScript function and assign the name of this function to the OnClientChange property of the Dynamic List Field instance. The function must have a signature like this:

function onClientChange(target, args) {...}

Here the target contains the drop down list (HTML select tag) element; the args is a JSON object that indicates how the selected index is changed in the following format:

{"from":oldIndex, "to":newIndex}

Styles / Skin Management

Dynamic List Field exposes the following properties to allow client to manage its styles or skin.

Property Name	Property Type	Default Value	Description
DataControlsFontFamily	System.String	""	Gets or sets the font family for the data controls (e.g. "Arial").
DataControlsFontSize	System.String	""	Gets or sets the font size for the data controls (e.g. "12px").
SuggestList	SuggestListStyles	SuggestList.BackgroundColor = "" SuggestList.BorderColor = "" SuggestList.BorderWidth = "" SuggestList.CloseButtonFontSize = "11pt" SuggestList.ForeColor = "" SuggestList.HighlightBackgroundColor = "" SuggestList.HighlightForeColor = "" SuggestList.MaxRows = 1000 SuggestList.MaxVisibleRows = 20 SuggestList.PageInfoKeyword = "/"	Gets the settings that mangages the styles of the suggest list.

View Custom Validation Demo of Dynamic List Field.

View Client-side Select Index Changed Event Demo of Dynamic List Field.

Go to top