Welcome to the Learning Center

The Guide | Knowledge Base | FAQ

Browse it all or refine your selection using the filters below on the left.

Data-bound Drop-down Filters in XMod Pro Part 1

Part 1 - Learn how to leverage XMod Pro’s natural templating abilities to roll-your-own drop-down list boxes.

By: Kelly Ford On: 01/18/2011

Link to this Article
https://dnndev.com/Learn/Guide/Article/Data-bound-list-filters-in-XMod-Pro-Part-1

Often I get customers who want to be able to filter their data in XMod Pro using drop-down list boxes. Additionally, they usually want those list boxes populated with data from their database. This is a simple issue when dealing with forms because list controls can be tied to ControlDataSource tags that provide their data. However, when creating views of your data (templates), the ControlDataSource isn’t available. What to do?

The solution is to leverage XMod Pro’s natural templating abilities to roll-your-own drop-down list boxes. Normally you build your views with a <HeaderTemplate> which is rendered once, at the start of your list of data; a <FooterTemplate> which is rendered once at the end of your list of data; and an <ItemTemplate> which is rendered once for each record in your list. This is a great way to build bullet lists, tables, etc. But you can also use it to build anything else out of HTML – like an HTML drop-down list box (a “select” control in HTML parlance).  Since XMod Pro can use multiple <Template> tags in a module instance, we can simply add another <Template> tag to generate our drop-down list.


<xmod:Template Id="States">
	<ListDataSource CommandText="SELECT StateId, StateName FROM States" />
	
	<HeaderTemplate>
		<select id="ddlStateFilter">
	</HeaderTemplate>
	
	<ItemTemplate>
		<option value="[[StateId]]">[[StateName]]</option>
	</ItemTemplate>

	<FooterTemplate>
		</select>
	</FooterTemplate>
</xmod:Template>
	

In the example above, we’re creating a drop-down list that is populated with a list of States from our States table. Because the HTML drop-down list can be represented by a Header/Item/Footer template, it’s an easy matter to create it in XMod Pro. You’ll notice that the <HeaderTemplate> renders out the opening <select> tag. The <ItemTemplate> renders out an <option> tag for each record that is retrieved, placing the state’s ID in the hidden value for the option and using the state’s name as the display text. Finally the <FooterTemplate> renders the closing </select> tag.

In part two, we’ll look at how we can add this to other templates and use it to filter data.

 

Read Part 2 at http://dnndev.com/Learn/Guide/Article/Data-bound-list-filters-in-XMod-Pro-Part-2