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

Question

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?

Answer 1

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) ;/

Answer 2

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!

Answer 3

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.

Answer 4

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

Answer 5

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,

Answer 6

I cannot get the function to work...


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

Anyone done this before?

Answer 7

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")

Answer 8

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.

Answer 9

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 :)...

 

Answer 10

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.

Answer 11

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

Answer 12

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?

Answer 13

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....  ;/

Answer 14

Any suggestions guys as to why this is not working? Should I add this to the title header of the group or the body???

Answer 15

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?

Answer 16

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

Anyone suggestions?