slickgrid grouping

<script type="text/javascript">
var ajaxFileURL="{$url}";
var ajaxUpdateURL="update";
{literal}
function populateList(ajaxFileURL){
var grid;
var columns = [
//id='id', name='nama di field', field='data yang diisikan', option lain
{id: "id", name: "ID", field: "id", sortable: true, width: 30},
{id: "username", name: "Username", field: "username", sortable: true, editor: Slick.Editors.Text},
{id: "age", name: "Age", field: "age", sortable: true, editor: Slick.Editors.Text, width: 30},
{id: "city", name: "City", field: "city", sortable: true, editor: Slick.Editors.Text},
{id: "country", name: "Country", field: "country", sortable: true, editor: Slick.Editors.LongText},
{id: "gender", name: "Gender", field: "gender", sortable: true, editor: Slick.Editors.Text, width:30}
];
var options = {
editable: true,
enableAddRow: false,
asyncEditorLoading: false,
autoEdit: false,
forceFitColumns: true,
enableRowReordering: true,
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true
};

//yo yo yo
var sortcol = "username";
var sortdir = 1;
var percentCompleteThreshold = 0;
var prevPercentCompleteThreshold = 0;

//not sure whether is important for my case?!
function avgTotalsFormatter(totals, columnDef){
	return 'avg: '+ Math.round(totals.avg[columnDef.field]) + '%';
}

function myFilter(item, args){
	return item["percentComplete"] >= args.percentComplete;
}

function percentCompleteSort(a, b){
	return a["percentComplete"] - b["percentComplete"];
}

function comparer(a, b){
	var x = a[sortcol], y = b[sortcol];
	return (x==y?0:(x>y?1:-1));
}

function collapseAllGroups(){
	dataView.beginUpdate();
	for(var i=0; i<dataView.getGroups().length; i++){
		dataView.collapseGroup(dataView.getGroups()[i].value);
	}
	dataView.endUpdate();
}

function expandAllGroups(){
	dataView.beginUpdate();
	for(var i=0; i<dataView.getGroups().length; i++){
		dataView.expandGroup(dataView.getGroups()[i].value);
	}
	dataView.endUpdate();
}

function clearGrouping(){
	dataView.groupBy(null);
}

function groupByDuration(){
	dataView.groupBy(
	"country",
	function (g){
		return "Country: "+ g.value +"<span style='color: green'>("+ g.count +" daftar)</span>";
	},
	function (a,b){
		return a.value - b.value;
	});
	dataView.setAggregators([
		new Slick.Data.Aggregators.Avg("percentComplete")], false);
}

function groupByDurationOrderByCount(){
	dataView.groupBy(
	"duration",
	function (g){
		return "Duration: "+g.value+" <span style='color: green'>("+g.count+" items)</span>";
	},
	function (a,b){
		return a.count - b.count;
	}
);
	dataView.setAggregators([
		new Slick.Data.Aggregators.Avg("percentComplete")], false);
}

function groupByDurationOrderByCountGroupCollapsed(){
	dataView.groupBy(
	"duration",
	function(g){
	return "Duration: "+g.value+" span style='color: green'>(" +g.count+ " items)</span>";
},
	function(a,b){
		return a.count-b.count;
	}
);
	dataView.setAggregators([
		new Slick.Data.Aggregators.Avg("percentComplete")
	], true);
}



$.getJSON(ajaxFileURL,ajaxUpdateURL,function(data){

//yo yo baru lagi nih dari BARI
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
dataView = new Slick.Data.DataView({
	groupItemMetadataProvider: groupItemMetadataProvider, inlineFilters: true
});
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.registerPlugin(groupItemMetadataProvider);
grid.setSelectionModel(new Slick.CellSelectionModel());

var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

grid.onSort.subscribe(function(e, args){
	sortdir = args.sortAsc ? 1:-1;
	sortcol = args.sortCol.field;

	if($.browser.msie && $.browser.version <= 8){
		var percentCompleteValueFn = function(){
			var val = this["percentComplete"];
			if(val<10){
			return "00" + val;
			}else if(val<100){
			return "0" + val;
			}else{
			return val;
			}
		};
		dataView.fastSort((sortcol == "percentComplete") ? percentCompleteValueFn : sortcol, args.sortAsc);
	}else{
	dataView.sort(comparer, args.sortAsc);
	}
});

dataView.onRowCountChanged.subscribe(function (e, args){
	grid.updateRowCount();
	grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
	grid.invalidateRows(args.rows);
	grid.render();
});

var h_runfilters = null;

function filterAndUpdate(){
	var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;
	var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;
	var renderedRange = grid.getRenderedRange();

	dataView.setFilterArgs({
		percentComplete: percentCompleteThreshold
	});
	dataView.setRefreshHints({
		ignoreDiffsBefore: renderedRange.top,
		ignoreDiffsAfter: renderedRange.bottom +1,
		isFilterNarrowing: isNarrowing,
		isFilterExpanding: isExpanding
	});
	dataView.refresh();

	prevPercentCompleteThreshold = percentCompleteThreshold;
}
	dataView.beginUpdate();
	dataView.setItems(data);
	//kalo di set filter malah gak jalan
	//dataView.setFilter(myFilter);
	//dataView.setFilterArgs({
	//	percentComplete: percentCompleteThreshold
	//});
	dataView.groupBy(
		"country",
		function(g){
			return "Negara satu grup: "+g.value+" <span style='color: green'>("+g.count+" Daftar)</span>";
		},
		function(a,b){
			return a.value-b.value;
		}
	);
	//i commented one line below cos i think it's for average calculation
	//dataView.setAggregators([new Slick.Data.Aggregators.Avg("percentComplete")], false);
  dataView.collapseGroup(0);
	collapseAllGroups();
	dataView.endUpdate();
});
};

jQuery(document).ready(function($) {
  // Stuff to do as soon as the DOM is ready;
  populateList(ajaxFileURL);
});
</script>
{/literal}