Add a Success Ratio label to the first group header in a dual grouped list view

27.01.2012 Updated to support SharePoint 2010.


By request from Charlie Epes i have made a function for adding a “Success Ratio” to the ms-gb-row (first group in grouped list view):
IMG

This function takes two arguments:

  • leadText: The text added before the percentage value
  • txtToFind: The text to search for and to get the number of items from

The value is a product of the number of items in the group that matches the “txtToFind”, divided by the total number of items from the ms-gb-row (first group) times 100 to get the percentage.

Add a CEWP below the list view you want this to apply to, and add this code (Modify the text values in line 18 to match your values in the second group):
[javascript]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/* Function for adding a "Success Ratio" to the ms-gb-row (first group in grouped list view).
* ———————————————
* Created by Alexander Bautz
* alexander.bautz@gmail.com
* http://spjsblog.com
* LastMod: 27.01.2012
* ———————————————
This function takes two arguments:
leadText – The text added before the percentage value
txtToFind – The text to search for and to get the number of items from

The value is a product of the number of items in the group that matches the "txtToFind" divided
by the total number of items from the ms-gb-row (first group) times 100 to get the percentage.
*/

successRatio(‘Success Ratio = ‘,’Sold’);

function successRatio(leadText,txtToFind){
$(".ms-gb").each(function(){
var gbID, textRaw, gbText, gbVal, htmlRaw, part1, part2;
gbID = $(this).parents(‘tbody:first’)[0].id;
textRaw = $(this).text();
gbText = textRaw.substring(textRaw.indexOf(‘:’)+2,textRaw.indexOf(‘(‘)-1);
gbVal = textRaw.match(/d+/);
getSubGroupes(leadText,gbVal,gbID,txtToFind,this);
htmlRaw = $(this).html();
part1 = htmlRaw.substring(0,htmlRaw.lastIndexOf(‘(‘)+1);
part2 = htmlRaw.substring(htmlRaw.lastIndexOf(‘(‘)+1);
$(this).html(part1 + "total=" + part2)
});
}

function getSubGroupes(lt,tot,gID,ttf,obj){
$("tbody[id^=’"+gID+"’]:has(‘td.ms-gb2’)").each(function(){
var gb2ID, gb2TextRaw, gb2Text, gb2Val
gb2ID = this.id;
gb2TextRaw = $(this).text();
gb2Text = gb2TextRaw.substring(gb2TextRaw.indexOf(‘:’)+2,gb2TextRaw.indexOf(‘(‘)-2);
gb2Val= gb2TextRaw.match(/d+/);
if(gb2Text==ttf){
val = Math.round((gb2Val/tot*100)*10)/10;
$(obj).append("<span style=’padding-left:25px;color:red;font-weight:bold’>&nbsp;" + lt + val + "%</span>");
}
});
}
</script>
[/javascript]

Ask if anything is unclear.

Regards
Alexander

10 thoughts on “Add a Success Ratio label to the first group header in a dual grouped list view”

  1. How can text be insert between
    Producer: Alexander
    and
    (8)

    or between
    Final Status: Not Sold
    and
    (3)

    I want to align the count or total to the right and maybe insert “total =” (3)

    1. Add this code between line 26 and 27:

      var htmlRaw = $(this).html();
      var part1 = htmlRaw.substring(0,htmlRaw.lastIndexOf('(')+1);
      var part2 = htmlRaw.substring(htmlRaw.lastIndexOf('(')+1);
      $(this).html(part1 + "total=" + part2)
      

      Alexander

    2. sorry took so long to get back, this is almost perfect. Your script is perfect, I need a bit more tweaking. When I added this script in its entirety with your suggested addition no Success Ratio returned, I liked that and just what I wanted. Was that as designed? Just want to make sure it doesnt go buggy later on.

      thanks again

  2. Hi Alex:
    I as well as other users often need to see the Total or Average for the 1st group or the 2nd group but when all items are collapsed, they are not visible.

    Can the Total/Average/Count be moved from the ms-vb line to the ms-gb line?

    Thanks-

Leave a Reply