Search Articles

Authors & MVPs

Kelly Ford

Introducing DNNDev University

The new DNNDev University doesn't have a winning football team. It is built on people - you and I and everyone who uses DotNetNuke and XMod Pro.

XModPro

Data-bound Drop-down Filters in XMod Pro

Part 1

By Kelly Ford Founder and President

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/Articles/Detail/ArticleID/12/Data-bound-Drop-down-Filters-in-XMod-Pro.aspx