Data-bound Drop-down Filters in XMod Pro–Part 2
Mar
23
Written by:
3/23/2011 7:45 AM
The second installment of my previous post on utilizing XMod Pro’s natural templating features, combined with its multi-view capability to create data-bound list controls that you can use to filter the data your user views.
In part one of this 2-part series of articles, I showed how easy it was to create a data-bound drop down lists inside an XMod Pro template. If you haven’t read part one yet, I recommend you do so. In this article, we’ll put the list to good use, filtering our list of records.
To recap, we’ve created a Template tag that creates an HTML drop-down list (an HTML SELECT tag) that is populated with a list of states. Those states are stored in a table in our database called, appropriately enough “States”.
Here’s the template thus far…
1: <xmod:Template Id="States">
2: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
3: <HeaderTemplate>
4: <select id="ddlStateFilter">
5: </HeaderTemplate>
6: <ItemTemplate>
7: <option value="[[StateId]]">[[StateName]]</option>
8: </ItemTemplate>
9: <FooterTemplate>
10: </select>
11: </FooterTemplate>
12: </xmod:Template>
We’re going to add a second template tag to our template. I realize throwing the word template around may get a bit confusing since we’re including multiple templates in a template…. So, to clarify. We’re creating a “View” which will contain multiple Template tags.
Right now we’ve got one template in our view to create the drop-down list. Let’s add a second template to display the data:
1: <xmod:Template Id="Results">
2: <ListDataSource CommandText="SELECT FirstName, LastName FROM Customers WHERE StateId=@StateId">
3: <Parameter Name="StateId" Value='[[Url:sid]]' DataType="Int32" DefaultValue="-1" />
4: </ListDataSource>
5:
6: <ItemTemplate>
7: <div>[[FirstName]] [[LastName]]</div>
8: </ItemTemplate>
9: </xmod:Template>
I’m keeping this template deliberately simple so we can focus on the main components. In lines 2-4, we’re creating the data source for our results list. It’s a simple SQL query, selecting customers in our Customers table who reside in the state we’ve selected in our drop-down. So, the SQL command will be using a parameter with the name “StateId”. This is represented in the CommandText as “@StateId”.
In line 3, the StateId parameter is defined. We use the URL token to retrieve the value of a parameter in the URL “sid” in this case. Importantly, we also specify the data type to use. This is an extra safeguard against attacks. Finally, I’m specifying a default value to use if the “sid” URL parameter isn’t found. If –1 is passed to the SQL command, no records will be displayed.
In lines 6-8, we’re just creating a simple display of our record values.
Astute readers at this point may be wondering “But how do you get the selected State ID into the sid URL parameter?”. That is a job tailor-made for a touch of Javascript:
1: <xmod:Template Id="States">
2: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
3: <HeaderTemplate>
4: <select id="ddlStateFilter" onchange="location.href='http://mysite.com/mypage.aspx?sid='+this.value;">
5: </HeaderTemplate>
6: <ItemTemplate>
7: <option value="[[StateId]]">[[StateName]]</option>
8: </ItemTemplate>
9: <FooterTemplate>
10: </select>
11: </FooterTemplate>
12: </xmod:Template>
I’ve revised the first template. Can you spot the difference? I’ve added an event handler to the SELECT tag. This little bit of Javascript will execute whenever the value in the drop-down list has changed and will redirect the user to "mysite.com/mypage.aspx”. The URL is a placeholder. You’ll want to replace that with the URL to the same page the module is on. In other words, the URL is self-referencing, but it also adds the value of the drop-down list to the URL (“…?sid=’+this.value;”). Of course, you can also use jQuery to assign the event to a function, but I wanted to keep the example simple.
Another option would be to add a "Filter" button or hyperlink to the FooterTemplate, after the closing "</select>" tag. Then, using jQuery or straight Javascript, hook up a function to its click event and set the page's location in that function.
Here's the completed view, with two templates. I've also thrown a couple of DIV tags in there to break up the two templates onto different rows. You're welcome to layout your templates using your own HTML.
1: <div>
2: <xmod:Template Id="States">
3: <ListDataSource CommandText="SELECT StateId, StateName FROM States" />
4: <HeaderTemplate>
5: <select id="ddlStateFilter" onchange="location.href='http://mysite.com/mypage.aspx?sid='+this.value;">
6: </HeaderTemplate>
7: <ItemTemplate>
8: <option value="[[StateId]]">[[StateName]]</option>
9: </ItemTemplate>
10: <FooterTemplate>
11: </select>
12: </FooterTemplate>
13: </xmod:Template>
14: </div>
15:
16: <div>
17: <xmod:Template Id="Results">
18: <ListDataSource CommandText="SELECT FirstName, LastName FROM Customers WHERE StateId=@StateId">
19: <Parameter Name="StateId" Value='[[Url:sid]]' DataType="Int32" DefaultValue="-1" />
20: </ListDataSource>
21:
22: <ItemTemplate>
23: <div>[[FirstName]] [[LastName]]</div>
24: </ItemTemplate>
25: </xmod:Template>
26: </div>
7 comment(s) so far...
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
Thanks, but doesn't this sound much like the 'target' template control as explained in the manual? Can you tell me what the advantages of this approach are?
By peter on
3/23/2011 8:42 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
That's the subject for a different blog post. However, you can use the same approach. Just insert your [[Url:sid]] token in your command link. I can't post the code in this comment. Basically your Command button/link/image would contain a Parameter tag like you see in the example in this post.
The primary advantage of this is that it's quite simple to implement.
By dnndev on
3/23/2011 8:47 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
how i can put a first item on dropdownlist with "select one" text?
My first item never binded datafield
By mdmiko on
4/4/2011 9:10 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
In the example from the blog? For that you would put your HTML OPTION tag for the Select One item in the HeaderTemplate.
By dnndev on
4/4/2011 9:11 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
This is great, thanks! this solved a couple problems I've been trying to figure out. Only problem now is that the drop down options repeat, example would be that if I have multiple people in a state it would show that state in the drop down multiple times. Any ideas?
By Nate on
5/16/2011 9:26 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
I've use successful this solution, the only problem i've found is that the drop-down list is reset to first value when page is reloaded because i've choose one "State"
Is there a solution for this ?
By MauroMiotello785 on
10/29/2011 9:38 AM
|
Re: Data-bound Drop-down Filters in XMod Pro–Part 2
@MauroMiotello785 Add a little Javascript or jQuery to your page to set the selected value of the drop-down list if the value has been passed in the URL.
By dnndev on
10/29/2011 9:48 AM
|