Optimizing Nitobi ComboBox Performance in ASP.NET Applications

Replacing ASP.NET DropDownList with Nitobi ComboBox: Migration Guide

Overview

This guide shows how to migrate an ASP.NET DropDownList to the Nitobi ComboBox (a richer, client-side combo control). It covers setup, server-side binding, client-side configuration, data loading options, event handling, accessibility considerations, and common gotchas.

When to migrate

• Need for autocomplete, typing, or large datasets with incremental loading.
• Desire for richer client-side interactions (templates, keyboard navigation).
• Want to reduce full-postback behavior and use AJAX-style updates.

Prerequisites

• ASP.NET Web Forms project (WebForms lifecycle assumed).
• Nitobi ComboBox library files available and referenced in your project.
• jQuery or required JS libs if your Nitobi version depends on them.
• Basic familiarity with server-side data binding and client-side scripting.

1) Include Nitobi resources

1. Add required CSS and JS to your page or master page:
   • Link the Nitobi ComboBox stylesheet.
   • Include the Nitobi ComboBox script(s).
2. Place references before any code that initializes the control.

2) Replace DropDownList markup with ComboBox markup

• DropDownList example:

• Replace with a Nitobi ComboBox placeholder (example structure; adjust to your Nitobi version):

• You may instantiate the ComboBox via JavaScript to attach it to the input and container.

3) Server-side data binding strategies

Option A — Server-render initial list (simple, small datasets)

• Populate the ComboBox initial HTML or a JSON block during Page_Load.
• Example pattern:

protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { var countries = GetCountries(); // List with Id and Name var json = JsonConvert.SerializeObject(countries); ClientScript.RegisterStartupScript(this.GetType(), “initCb”, $“initComboBox({json});”, true); }}

• Client-side init function reads JSON and calls the Nitobi API to set items.

Option B — AJAX endpoint (recommended for large datasets)

• Expose a WebMethod or Web API endpoint that returns paged JSON for query terms.
• Configure the ComboBox to call that endpoint during typing (incremental load).
• Example WebMethod return shape: { items: [{ id, text }], totalCount }.

4) Client-side initialization and configuration

• Initialize with options: dataSource URL, pageSize, minChars, template, and events (select, open, close).
• Example (conceptual):

function initComboBox(initialData) { var combo = new Nitobi.combo.ComboBox(“cbCountries”); combo.setDatasource(new Nitobi.combo.DataSource({ url: “/api/Countries”, params: { format: “json” }, pageSize: 50 })); combo.setMinChars(2); combo.render(); if (initialData) combo.loadItems(initialData);}

5) Handling selection server-side

• Option A — Post selected value in a hidden field:
  • On select event, set hidden input value to the selected id.
  • Read hidden input on postback (Request.Form or runat=server hidden field).
• Option B — AJAX save immediately:
  • Send selection to server via AJAX when user selects.

Example select handler:

combo.on(“select”, function(e) { document.getElementById(“hfSelectedCountry”).value = e.item.id;});

Server read:

string selectedId = hfSelectedCountry.Value;

6) Validation and RequiredField support

• Client-side: validate the ComboBox value and hidden id before submit.
• Server-side: check hidden field value in Page.Validate or server event handlers.
• If using ASP.NET validators, pair a CustomValidator to validate the hidden field.

7) Accessibility

• Ensure the ComboBox provides ARIA attributes and keyboard support.
• Provide proper label association with the input element.
• Test with screen readers and keyboard-only navigation.

8) Performance tips

• Use server-side paging and query filtering for large datasets.
• Set a reasonable minChars to avoid frequent server calls.
• Cache commonly requested data on the server when appropriate.
• Use debouncing (delay) before issuing requests while the user types.

9) Common gotchas and troubleshooting

• Postback issues: ensure selected id is stored in a field submitted with the form.
• Version mismatches: check Nitobi docs for API changes between releases.
• Styling conflicts: Nitobi CSS may override site styles — scope or override as needed.
• Cross-origin requests: host AJAX endpoints under same origin or enable CORS properly.

10) Example migration checklist

• Include Nitobi CSS and JS in Master Page
• Replace DropDownList markup with ComboBox input/container
• Implement server endpoint for AJAX data (if needed)
• Add client init script and wire select -> hidden field
• Update server-side code to read hidden field or AJAX payload
• Add validation and accessibility attributes
• Test keyboard navigation and screen reader behavior
• Monitor performance and enable paging/caching

Conclusion

Migrating to Nitobi ComboBox improves user experience for searchable and large lists by providing client-side interactions and incremental loading. Follow the