Master Detail View – Data View Web Part
Posted by CJ on May 21, 2008
I have some time to kill as I sit in a Melbourne apartment waiting on a phone call to hopefully receive Internet access. So I thought I would write a blog entry (you know….turn a negative into a positive
). But I will have to wait for reconnection before I can post this entry
I was asked a question recently about creating a master-detail form for employees and their work resume history. I immediately thought of InfoPath but a requirement was it needed to be in the browser. Unfortunately the infopath master detail control doesn’t render in the browser so after some thought…out came the lovely Data View Web Part (DVWP). So this is how the story goes…
1. Create a Resume Details list. Each row in this list must contain a column that links it back to the parent list. In my case Full Name.
2. Create a blank web part page
3. Open the site in SharePoint designer and open the blank web part page you just created and click in the top Header web part zone
4. Click the menu Insert –> SharePoint Controls –> Data View
5. You will notice on the top right hand pane the Data Source Library is displayed. Select the Employees list and drag it into the Data View Web Part.
6. Edit the columns of the web part to include what you want. I have a column called Full Name that I want displayed.
7. Now click in the Footer web part zone and Insert another Data View Web Part.
8. Drag the Resume Details list in the Data View Web Part and edit the columns as shown
9. The next thing for us to do is create a connection between the two web parts so when I select an Employee their resume details are displayed. Right click the Employees DVWP and select Web Part Connections.
10. You should see this dialog.
![]()
11. Click Next until you come the following dialog. Select the column that you want to make the connection between the two web parts.
![]()
12. Create a hyperlink on the connected field
![]()
13. Then click next and Finish the web part connection
![]()
14. Save the page in SPD and open the page in IE. You will now see the following screen. When you select an Employee the name is passed through to the Resume Details DVWP and filters the associated records
15. Now…what if you wanted to edit the details right here in the page…simple when using the DVWP. Go back to SPD and select the change layout option.
16. Select the following layout which is a Tabular Form Style. Don’t’ worry about the breaking of web part connections message. Everything should work fine.
![]()
17. Then select the Data View Properties and select the Editing tab and select all the check boxes and click OK.
18. Save the page and then view in the browser
![]()
19. Ok…so all is good. Now your optional exercise. Put in place some conditional formatting and maybe a Form Web Part passing in text values.
Darryl said
Hi Clayton
I need some urgent help.
I want to be able to have a sharepoint list inside another list and be able to bring up a data record in the embedded list in its own window when you are editing a record in that embedded list.
It will be as if you are going to the list on its own and wnating to edit the data of that record in the list. However this list will be inside another list.
How can I do this?
Please help. I want to do this without any coding if possible?
I have attached an image of a EditForm.aspx that will be displayed when you go to edit a record from the embedded list inside the other list.
sacchit said
I have made connection but it does not change values depending on the first dataview selected value
CJ said
Darryl, I am not sure what you mean and I haven’t seen the attached image. If you would like to clarify further then you can email me on the About Me page.
Sacchit, double check all your connections. Don’t forget that the item you select is the filtering parameter that is being passed to the second list. In this example it is Full Name which exists in both lists.
Cheers
Noyee said
Good article……works perfet…Thankyou
Kerrston said
When I add Data View Web Parts some times the Create a hyperlink on the connected field is blank. I am not sure why this is and what causes it.
vipul said
i am facing problems when i do paging for a master detail web part using dataview in spd.
the paging goes crazy for the details dataview after i set up web part connection with master dataview.
i tried looking up for help but not successful. Can you help?
Dave said
Any ideas on how to pass the Key Field to the Insert command so that when you insert a new row on the Detail level it automatically attaches the parent ID, so that the new inserted detail record gets filed under the correct parent / master record?
Trevo said
I would like to know the same thing:
>Any ideas on how to pass the Key Field to the Insert command so that when you insert a new row on the Detail level it automatically attaches the parent ID, so that the new inserted detail record gets filed under the correct parent / master record?
Alex said
I am trying to do the same thing as well. I want to open a Master item, view the detail in the web part and add a new detail item.
Curt said
Any word on whether you can have new details automatically linked to the master record?
Wes Groleau said
Step 14: First DVWP was there. Second was “Unable to display, try to fix with Sharepoint Designer”
dishaniti said
I like the article, but I am having little bit requirement. In master page I want allow user to enter employeeid, and thne depending on employeeid, I would like to display detail part.
Is this possible and how?
Montoya said
Dishanti,
did you find a solution to this? Anyone?
cj said
To all that are having problems with passing the parent key in the child record.
You need to include the Employee column (parent key) in the Resume Details DataView Web Part. The user will need to select the Parent key when inserting a new record.
HTH
روح الله دلپاک : تكنيكهاي Master-Details در شيرپوينت و اينفوپت said
[...] http://claytonj.wordpress.com/2008/05/21/master-detail-view-data-view-web-part/ [...]
Rohalah Delpak said
I suggest this post to my weblog visitors! you can see it in this address : http://pspcommunity.org/blogs/delpak/archive/2009/06/30/master-details.aspx
brian brinley said
great article, plain and to the point. Has solved a great need of mine without having to write a bunch of code.
Thank you for taking the time to write this article the screen shots definately helped.
mohsin said
i am using 4 DVWP on my page.
my requirements is that when the the user makes selection on first DVWP rest of the three show data accordingly so i used conenction and it is working fine.
by default the fisrt item in my first DVWP is selected which is fine BUT i have another requirement that if i pass a variable using query string when calling that page, i want the second or the third item to be selected (depending on whose id i have passed).
is it possible?