Tabbed Area with Data View Web Part --- Wanting a rollout effect on mouse over

Friday, November 06, 2009 8:54 PMdesign4fun

0
Sign In to Vote
How would I go about changing the XML within the page to alter the data view?

I created my Tabbed interface. I added 3 Lists within the tabs. Each tab containing the documents/blogs that correspond with each tab.
- Setup each list into a Data View (Detached from master page, changed layout control, etc etc) to create my data list.
- Now each time currently uses the standard EXPAND / COLLAPSE on the + /
( For those who don't know how to use this I learned here . Awesome tut! )

I am wanting to make it where each one OnMouseOver will roll out.... Like how a java menu does??
Heading > ITEMS WITHIN HEADING

I would like it to roll out to the right or below it does not matter. I can format it... but how would I do this?
```
My current points of interest:

<xsl:call-template name="dvt_1.body">

	<xsl:with-param name="ParentPath" />
	<xsl:with-param name="Rows" select="$Rows" />
	<xsl:with-param name="FirstRow" select="1" />
	<xsl:with-param name="LastRow" select="$dvt_RowCount" />

</xsl:call-template>

---

<xsl:call-template name="dvt_1.rowview">

	<xsl:with-param name="ParentPath" select="$ParentPath" />
	<xsl:with-param name="SrcPos" select="$SrcPos" />

</xsl:call-template>

---

<xsl:template name="dvt_1.groupheader0">
....

</xsl:template>
```
I think this are the correct areas in which I would need to work to modify the view. But I am unsure.

How would I go about changing this?
- Edited bydesign4fun Friday, November 06, 2009 10:10 PM
- Moved byMike Walsh MVPMVP, ModeratorSaturday, November 07, 2009 10:19 AMdvwp q (From:SharePoint - Development and Programming)
- Reply
- Quote

All Replies

Friday, November 06, 2009 10:10 PMdesign4fun

0
Sign In to Vote
Instead of having to click EXPAND / CLOSE I want it to expand on mouse over and close on mouse out .... I am trying but I cannot get it to work... I get an error and stupid SPD won't tell me why when I mess around with the DVWP(s) ;/
- Reply
- Quote
Friday, November 06, 2009 10:37 PMdesign4fun

0
Sign In to Vote
I am trying to figure this out... so close!

Fair warning I am trying to make sure I can use Lytebox to open the data and keep the user within the page instead of allowing them to EXIT out unknowingly.

I am trying to make the current DVWP onMouseOver=expand OnMouseOut=collapse then on click on the link rel="Lytebox" so that way it looks nice and neat...

Any help at all would be GREATLY appricated!
- Reply
- Quote
Saturday, November 07, 2009 6:08 PMpl7626

0
Sign In to Vote
Have you tried Christoph's Easy Tab? I haven't used it yet, but it might work for you. Just create 3 different data view and use the "Easy Tab" to show them on different tabs. Here's a link to his demo for this.

http://www.pathtosharepoint.com/pages/easyTabs.aspx

Hope this helps.
- Reply
- Quote
Monday, November 09, 2009 2:37 PMdesign4fun

0
Sign In to Vote
Hey thanks for the reply!

Not really what I am trying to accomplish... I suppose after looking over everything I posted I see how I can get lost in it too! ha!

Well actually what I want is this... Instead of the standard DVWP type layout that is very bland.... I was wanting to create a fresh look.

Example notice how the + / - (expand / close ) are setup in this example. I am wanting my DVWP to work the same way. I notice that some of the ones of this example are always open or collapsed etc... I just want to know how the design portion was placed on the actual DVWP...

So I am actually trying to accomplish a way to put a style sheet over the DVWP or Customize the area there...
- Edited bydesign4fun Monday, November 09, 2009 2:38 PMforgot link
- Reply
- Quote
Monday, November 09, 2009 5:21 PMpl7626

0
Sign In to Vote
Oh... Sorry, I thought you wanted to create the tabbed interface. I think you can easily create that +/- (expand/collapse) feature by using javascript.

Each webpart has it's own ID. Take a look at the source of the page and note the IDs.
On top of each web part, add a CEWP with a link with onclick event that will run the following javascript function

function expand_collapse(elementID)
{
    if(document.getElementById(elementID).style.display="none") //webpart is collapsed, make it visible
          document.getElementById(elementID).style.display = "block" ;
    else
          document.getElementById(elementID).style.display = "none" //hide the webpart or collapse it
}

You'll probably need to tweak the function if it doesn't work, but you have the structure there. Just make it hidden/visible when clicking on a link. On that same function, you can add a line to change the text of the link to "+" or "-"

Hope that helps,
- Reply
- Quote
Monday, November 09, 2009 8:38 PMdesign4fun

0
Sign In to Vote
I cannot get the function to work...

I am trying to get there using jquery....

Anyone done this before?
- Reply
- Quote
Tuesday, November 10, 2009 1:59 AMpl7626

0
Sign In to Vote
If you are passing in the correct ID of any html element, that should work.

Oh... just noticed a typo in the first if statement. There's a "=" missing. It should be

if(document.getElementById(elementID).style.display=="none")
- Reply
- Quote
Tuesday, November 10, 2009 2:48 PMdesign4fun

0
Sign In to Vote
Ok I see what your wanting to do...

Your collapsing the webparts. Ok that is awesome.... but... I am trying to use the Data View Web Part that organizes data according to a set of variables.

Mine are Name, Posted By and Date.

The DVWP is very bland and that is what I am trying to get to change the standard collapse/expand.

I do like how that would make a webpart collapse tho but not what I am trying to accomplish.

This is how the DVWP organizes data as an example by the header Name:
http://www.endusersharepoint.com/blog/wp-content/uploads/2009/02/2009-02-19-DataSourceLibrary.png

And this is the screen that you organize your data view with:
http://blogs.prexens.com/img/posts/7/CommonDVTasks.png

Here is a good example of a Data View Web Part: (Has some customizing done but not much.
http://sharepointsolutions.com/SiteCollectionImages/data-view-clip.jpg

I am wanting to apply a custom roll down to the Data View Web Part not just a webpart itself within the site.
- Reply
- Quote
Tuesday, November 10, 2009 3:54 PMpl7626

0
Sign In to Vote
Okay... let's just make sure we're on the same page. I checked the screenshots that you posted with "+" sign beside different items that collapse/expand sub-items.

Now, if you have 1 dataview web part where you are trying to use that "+/-" feature, you can apply grouping to your data. Just go to the Common Data View task and use "Sort and Group:" option to set your grouping and you'll get that expand/collapse feture.

If you have 3 different dataview web part and you want to use expand/collapse feature, then you can try my suggestion above. That will hide/show the webpart itself giving you the expand/collapse effect. You'll need to setup 3 different links above the webparts and use the function posted above.

I hope this clears all the confusions :)...
- Reply
- Quote
Tuesday, November 10, 2009 4:10 PMdesign4fun

0
Sign In to Vote
Ok I have all of my items USING the current feature ;) I have the + / - , What I am trying to do is isolate the areas in which I have to, to create a custom DVWP.

A pretty DVWP :) ha!

I have started playing with it more and noticed that if I error it out I just error it out and it doesn't tell me why?? :(

So I have created my DVWP and have my columns setup.

I have isolated this code and have change onclick to onmouseover so I can get the BASIC effect I want. Eventually I would like to change that to the jquery slideToggle , and slideUp to finialize the look.
```
	<a href="javascript:" onclick="javascript:ExpGroupBy(this);return false;">
	<img src="{$imagesrc}" border="0" alt="{$alttext}" name="{$altname}" /></a>
```
This is the snippet of the gb title that each group gets:
```
        <td class="ms-gb" style="background:#cccccc;" colspan="99">
```
I am wanting the class ms-gb to roll out... I cannot for the life of me find where I should isolate the code. Also I would Love Love to find out how to make each link within my DVWP open up in a LyteBox window... I am also playing with that.

I have noticed that the edits effect the whole DVWP which is amazing but the time it takes is forever in SPD, is this common?

Shew! That was a lot... but I think this is better insight to my goal.
- Reply
- Quote
Tuesday, November 10, 2009 4:25 PMdesign4fun

0
Sign In to Vote
As I am playing around with this I noticed that with the onMouseOver event for the javascript I will need something to go back and keep the DVWP clean looking... any suggestions on making something like a command that onMouseOut that that it would collapse?

I see that it shows false as the follow up command.... as of now....

So So Close..
- Reply
- Quote
Tuesday, November 10, 2009 7:32 PMdesign4fun

0
Sign In to Vote
How could I change this code:
```
<a href="javascript:" onmouseover="javascript:ExpGroupBy(this);return false;">
```
This is for the same DVWP

to include a mouseout or mouseleave type collapse?
- Reply
- Quote
Tuesday, November 10, 2009 8:22 PMdesign4fun

0
Sign In to Vote
Ok so I am this far now....
```
<td class="style7" onmouseenter="javascript:ExpGroupBy(this);return false;" 

style="background-position: 0% 0%; height: 22px; background-image: none; background-repeat: 

repeat; background-attachment: scroll;" colspan="2">
```
this would create the effect I want for the area in question BUT I am having another issue.

I want to to collapse on mouse leave.... ;/
- Reply
- Quote
Tuesday, November 17, 2009 3:09 PMdesign4fun

0
Sign In to Vote
Any suggestions guys as to why this is not working? Should I add this to the title header of the group or the body???
- Reply
- Quote
Wednesday, November 18, 2009 5:03 PMdesign4fun

0
Sign In to Vote
How can I get this to work properly? No matter the change is see that the data alters back to the main header for the mouse event.

As of now the DVWP Header when highlighted with the mouse will open but I cannot get it to close unless the header is then touched by the mouse again...

Is there a way to make it collapse once the user leaves the list data that rolls out?
- Reply
- Quote
Monday, November 23, 2009 10:16 PMdesign4fun

0
Sign In to Vote
I suppose there is no possible way to make this DVWP collapse on mouse leave out of the list area???

Anyone suggestions?
- Reply
- Quote