How to get group by HTML in SharePoint Listview

From quite some time, we are using Jquery and JavaScript to tweak the SharePoint data rendering methods below are the few examples

Sharepoint Custom so called KPI

Highlight SharePoint List rows conditionally

SharePoint calculated column and jQuery Highlight row

and the recent one Delete button in list view

Now almost every time our main concept is let SharePoint work their way and we will work our way without changing its basics.

So for that many a times we change the rendered HTML by SharePoint to meet client expectation.

But sometime we have loose against SharePoint but not now, we find the way to get HTML of the Grouped by data.

Let us explain quickly…
In listview web part if we use group by then SharePoint make Ajax call and on click of + it get’s the data to render. In normal (without group by view) its working normally but in group by view we are not getting HTML in view source.

As a result our above post fails to change HTML as desired.

But now way is there… for How to get group by HTML in SharePoint Listview
We got noticed when one of our readers point us to a wonder full article by Alexander Bautz

so first of all thanks to Alexander Bautz for his efforts

Now lets’ go to the code without wasting time.

Take jquery reference

<script type="text/javascript">
$(document).ready(function(){
ChangeHTML();
});

function ChangeHTML()
{
//the code goes to change the HTML
//you get reference code by above links

}

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {

if(isLoaded == 'false')
{
setTimeout(ExpGroupRenderData,1000);
}
else
{
ChangeHTML();
}

}
</script>

Now lets us explain you how it works

The key thing to understand is the SharePoint function ExpGroupRenderData
While clicking on the + sign for group by SharePoint call web service from JavaScript to get the data and this function renders data after everything.

Now another problem is this function is called asynchronously. So when you check htmlToRender variable you will not get full data till the time isLoded is true
And when we tried in SharePoint 2010 it always show false so we had use set time out function which will called after each second.

Once isLoded is true then bingo we will get all the HTML and make our changes.
So sorry guys for not getting with full sample example because of time crunch but all the SP lover will get the idea what is happening and how much it’s useful. We will soon try to get working example for you.

Feel free to ask queries, we will happy to help (if possible).