Share via

Allowing Users to Filter/Search a Data View

  • Article

In my previous post, I talked about how Web Part Connections can be used to pass data between Web Parts. I showed building a simple master/detail scenario, where you have one view, showing all the records in a data source, filtering a second "single item" detail view of the same source. There are tons of other scenarios where Connections are useful. For example, imagine if you could have a little form on your web page, where any values entered into that form could be passed into a connection. As luck would have it :^>, we built a part exactly for this scenario, called the "Form Web Part"! Little fyi: the Form Web Part was actually the very first feature I worked on when I came to MS, so I'm kinda partial to it :)

Quick example: Using a Form Web Part to "search" the Title field of an Announcements List view

1) You can insert a Form Web Part by clicking Data/Insert Web Part, and then from the Web Parts task pane, dragging the Form Web Part into your page. By default, this is what the Form Web Part looks like, a single text box with a "Go" button:

Note: You can add more form controls (including other types of controls) to the part by using the Insert/Form menu, but for this scenario, the default setup will work.

2) Next you need to add a view of the Announcements list to your page. We'll filter this view with the value entered into the Form.

3) You can now right-click anywhere inside the Form Web Part and choose "Web Part Connections...". In the Connections Wizard, hit Next on the first two pages. On the third page, choose the "Announcements" part as your target part. However, unlike in the last example, instead of using "Filter View Using Data Values" as the Target Action, choose "Modify View Using Parameters", and hit Next.

4) Long story short, there are two ways to use Web Part Connections: 1) as show in the previous post, the source part can affect the target using one of the default connection "verbs", e.g. filter the target part, or 2) the source part can just pass a value to the target part, and leave it to the target to do whatever it wants with that value. In this demo, we're using option 2, since we want to have finer control over the type of filtering done in the target part.

The Data View has a default parameter we can use called "Input Parameter. The way to pass the value from the textbox in our form is by choosing "T1" in the left column. You then hit Next.

4) After you hit Finish in the Connections Wizard, there is still one more step remaining. We need to go to the target part, in this case, the view on Announcements and define what to do with the value that comes from the parameter. For our scenario, since we want to Filter the view with the parameter value, select the Announcements view and choose the Data/Filter menu item, which will bring up the Data View filter UI.

For the field name, choose "Title" - for the comparison, you likely want "Contains" - and for the value, we can plug the parameter in here by choosing "[Input Parameter]".

Press OK, and your done! Now, if you browse the page, you should be able to enter a value into the form part and have the view filter to only show values that contain what was typed in the form.

Note: You probably noticed that the view shows no records by default - this is due to the fact that the parameter we're filtering on is blank when the view first loads. One way to work around this is to give the parameter a "default value", which you can do in code view by searching for the following line, and setting the DefaultValue attribute to whatever you'd like the value to initially show.

<udc:ClientParameterBinding Name="filterParam" Location="Postback;Connection" DefaultValue="baz"/>

Comments