Picture of Custom Control For XMod Pro - Enhanced ListBox with Search/Filter

Custom Control For XMod Pro - Enhanced ListBox with Search/Filter

posted by Moore Creative - 11/30/2012

Enhanced ListBox (With Search/Filter) Custom Control For XMod Pro

This Custom Control for XMod Pro Forms gives you the ability to have an enhanced ListBox for your XMP Forms!
Benefits & Features: We developed this Custom Control for project situations where we needed to present long lists of options for a user to choose from in a multi-select or single-select ListBox in XMod Pro forms. Average web users can have trouble scrolling through long lists of items, especially if they are going to select multiple items.
  • If you have a large list of items for an HTML Select list, finding the correct item can be like searching for a needle in a haystack! If there are a couple hundred items, finding a specific item can be difficult. Even if there are only 20 to 40 records in the list, users appreciate the speed of a quick search/filter making it easier to locate the desired item!
  • List of items in the ListBox will update dynamically as the user types in the search field attached to the list
  • Control allows you to specify data sets through the XMod Pro standard ControlDataSource
  • When passing in populated data, the menu tree will automatically open/display any notes that are checked
  • Fully customizable for style/layout of the filter/search box from within CSS, jQuery and within XMod Pro code
  • To use this custom control within your XMod Pro forms, simply add the REGISTER tag to your form for the moorecreative.xmodcontrols, then follow instructions for customization and options within the control.
  • The form control uses all of the same parameters as a standard XMP ListBox and behaves the same way, which makes it easy to swap out the core XMP control for this enhanced one!
  • The Module Kit installer will setup an XMod Pro form example using countries/states as a starter example for you to work from.


This Kit & Code Are Made For XMod Pro

Made For XMod Pro

This Kit / Code works in XMod Pro and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store »

Notes & Instructions

You have two options on how to install and begin using the module kit:
  • Option 1. Install Manually
    With the provided .ZIP file of contents, you will find the necessary XMod Pro custom control and example form code that you can copy and paste into new forms that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
  • Option 2. Use the Kit Module Installer
    The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
    • To use the kit installer, simply install it in the same manner as a standard module.
    • Then, place the module on a page
    • follow the instructions displayed on the module and click a button to complete installation
    • the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
    • you are now ready to specify the template, forms, etc within a module of XMod Pro like normal
I have a very long list of schools +30000.

Could this effectively handle such a thing or do you think it would be a big hit on performance?


Hi Nathan!

We've used it with a few hundred records and it's very helpful there... I hadn't used anything above 500 records previously so I setup a new test for you.

I've updated the demo on our Modules site so that you can see an example with 200 choices and another with 2,000 choices. It's pretty fast in both cases!
Hi, would this control work in a situation where it would list DNN users?

Yes, it would, you can list anything that you have, whether a hard-coded list of options or a record set from a database query in the Control DataSrouce.

Within XMod Pro, you control what data is present within a control like this (whether a checkbox/radio list, drop down list or multi-select list) by either having hard coded options, or by connecting that control to a Control DataSource. Within the Control Datasource, you can pull any list of data that you need and can manipulate, rename, etc (anything possible with SQL) to the list.

In the end, the list has both a Text display value and a Data saved value. Both can be the same content from the data set, or it can be a text value such as "Red" which is displayed in the dropdown and a data value such as ID# 1138 which is saved to the form submission.

Often, we'll do a combination where we show the ID value in the text to the user in case they know that number and that helps it become searchable/filterable when typing...

So for example, we'd make the SQL query concatenate a text value of "Red (1138)" as the display text and "1138" as the data value to save.

Coming back around to the original question, yes, you could have a list of users with a simple "Select Username, UserID From Users" or it could be Users of a specific role, or users with some UserProfile property, etc by making the right SQL query.

If you get down to that and need a hand, let us know, we can write that query for you.

Moore Creative