Collapse Groups in Content Query Web Part
-
martes, 01 de mayo de 2012 13:55
I have multiple libraries using the same content type on a site. I have rolled up some groups of managed metadata to display on a main page. There are hundreds of documents, so I would like to collapse each group of documents and allow the user to expand based on need. The groups are departments, so it looks like this:
Department A
Doc 1
Doc 2
......
Doc 150
Department B
Doc 1
Doc 2
......
Doc 175
Is there any way to roll this up better?
Thanks!
Jesse A. Brandenburg
Todas las respuestas
-
martes, 01 de mayo de 2012 14:58
Hi,
Use content query web part, configure the query option as sub sites or site and select the your content type in the content type list Use group by settings for your site column then it will display as you expected
- Propuesto como respuesta raghupavan martes, 01 de mayo de 2012 14:58
- Votado como útil Steven AndrewsEditor martes, 01 de mayo de 2012 15:48
-
martes, 01 de mayo de 2012 15:04
Raghupavan-
Thank you for your response, however this is how I have it currently, it is showing everything all at once. It is correctly grouping the information, but it is too much content to display. I would like to utilize the (+) & (-) expand/collapse functionality that is available on all other views.
Jesse
Jesse A. Brandenburg
-
martes, 01 de mayo de 2012 15:40
Hi,
Grouping will be done on this below div object, add the content editor web part use the below script for to get collapse/expand behavior. modify below script for your div tag
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.s4-ql li ul').hide();
$('.s4-ql ul li').hover(function() {
$(this).find('a:first').next().slideToggle();
}, function() {
$(this).find('a:first').next().slideToggle();
}).find('ul').each(function(index) {
var $this = $(this);
$this.parent().find('a:first .menu-item-text');
});
});
</script>
<div class="groupheader item band">GA</div> -
martes, 01 de mayo de 2012 16:14
Thanks again-
I have not done anything like this before, can you point me in the direction of a tutorial on how to make a change like this?
Jesse
Jesse A. Brandenburg
-
miércoles, 02 de mayo de 2012 7:16
Hi,
You can follow below link to get the behavior
http://fitandfinish.ironworks.com/2010/02/how-to-create-an-accordion-web-part.html
In above link, you can modify if($(head).parent().hasClass("expanded")) { --- expanded to groupheader item band class
- Propuesto como respuesta raghupavan miércoles, 02 de mayo de 2012 7:16
- Marcado como respuesta Emir LiuMicrosoft Contingent Staff, Moderator viernes, 11 de mayo de 2012 6:17
-
martes, 18 de septiembre de 2012 13:13
Hi Raghu,
Thanks for your reply. I am also looking for same thing. I have a content query web part which displays the documents from the document library grouped by category.
Category 1
Doc 1
Doc 2
......
Doc 30
Category 2
Doc 1
Doc 2
......
Doc 20
I have used 'Banded' style as group header style and default 'title only' style as Item style in the content query webpart. Now tell me how do I use the jquery script you mentioned above? I have copied your script into a content editor in the same page. But It didn't work. What changes I have to make on this script. Please advise as I m stuck at it.
Regards,
Naush
- Editado naush83 miércoles, 19 de septiembre de 2012 6:56
-
jueves, 07 de marzo de 2013 12:14
I've actually used this small code in a out-of-the-box CQWP
<script type="text/javascript" language="javascript">
$.noConflict();jQuery(document).ready(function($)
{
/*$(".groupheader").removeClass("expanded");
$(".dfwp-list").hide();
*/
$(".groupheader").removeClass("expanded");
$(".cbq-layout-main").find(".groupheader").siblings(".dfwp-list").slideUp();
$(".groupheader").bind("click", function()
{
$(".cbq-layout-main").find(".groupheader").siblings(".dfwp-list").slideUp();
$(this).toggleClass("expanded");
$(this).siblings(".dfwp-list").slideToggle();
});
/*
$(".expand-all").bind("click",function(){
$(this).siblings(".accordion").find(".dfwp-list").slideDown()
$(this).siblings(".accordion").find(".groupheader").addClass("expanded");
});
$(".collapse-all").bind("click",function(){
$(this).siblings(".accordion").find(".dfwp-list").slideUp();
$(this).siblings(".accordion").find(".groupheader").removeClass("expanded");
}) ;*/
});
</script>- Propuesto como respuesta C. Marius jueves, 07 de marzo de 2013 12:14
-
martes, 09 de abril de 2013 15:19
We are trying to do the same way that you're doing but we're stuck on achieving the same grouping that you have. How did you accomplish this?When we enable multiple values for choices or lookup columns, it doesn't appear as one of the group by options.
Department A
Doc 1
Doc 2
......
Doc 150
Department B
Doc 1
Doc 2
......
Doc 175
Thanks,
Donn
-
martes, 09 de abril de 2013 15:44
In an unrelated purchase, we are using PMCentral from Bamboo. It came with a data-viewer webpart that allows this behavior with the webpart settings. You can group by multiple fields as well. It has its limitations, but might be worth checking out if it is a high priority.
You can check out the web part here:
http://store.bamboosolutions.com/sharepoint-data-viewer-web-part.aspx
Thanks,
Jesse
Jesse A. Brandenburg
.png)
