CJ

The circle of life – ** .Net – Training – MOSS **

  • Past Post

  • Vistor Locations

Master Detail View – Data View Web Part

Posted by Clayton James 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

clip_image002

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.

clip_image004

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

clip_image006

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.
clip_image008

11. Click Next until you come the following dialog. Select the column that you want to make the connection between the two web parts.
clip_image010

12. Create a hyperlink on the connected field
clip_image012

13. Then click next and Finish the web part connection
clip_image014

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

clip_image016

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.

clip_image018

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.
clip_image020

17. Then select the Data View Properties and select the Editing tab and select all the check boxes and click OK.

clip_image022

18. Save the page and then view in the browser
clip_image024

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.

clip_image026

23 Responses to “Master Detail View – Data View Web Part”

  1. 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.

  2. sacchit said

    I have made connection but it does not change values depending on the first dataview selected value

  3. 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

  4. Noyee said

    Good article……works perfet…Thankyou

  5. 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.

  6. 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?

  7. 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?

  8. 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?

  9. 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.

  10. Curt said

    Any word on whether you can have new details automatically linked to the master record?

  11. Wes Groleau said

    Step 14: First DVWP was there. Second was “Unable to display, try to fix with Sharepoint Designer”

  12. 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?

  13. 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

    • Tony Garrity said

      Sorry, can you expand on this a bit. I’m a newbie to all of this, I have a master/detail DVWP up and running. the only thing I cannot do is pre-populate the Insert new detail record with the parent key.

      TG

  14. [...] http://claytonj.wordpress.com/2008/05/21/master-detail-view-data-view-web-part/ [...]

  15. 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

  16. 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.

  17. 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?

  18. Anshul Gagneja said

    Thanks a lot !!

    Works Perfect !!

  19. Raji Aoun said

    Hi Clayton,

    firstly i would to thank you for this great article, bur actually i have one issue when i tried it. the main issue is after i added the dataview in the editing tab the options of insert, update and delete are all disabled.

    i am using 2 lists Departments and Employees connected to each other by the Department ID.
    so can you help me.

  20. Cheat Point Blank terbaru…

    [...]Master Detail View – Data View Web Part « CJ[...]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.