Wow - it is good. Thanks for sharing this solution.

 

Kind Regards

Tony

I posted a similar Question on a different form and was pointed to a updated drag and drop heading source.

This seems to solve my problems..

 

Drag/Drop Grouping

 

Thanks for the help.

Ryan

Thanks for the response.

I was hoping someone else had this problem before and it had been solved already.

here is my JS function to setup drag and drop headings.

It works very well except for my heading name problem. 

Please see the comments in the code for the problem I am facing.

Thanks again for the help.

Ryan

 

function SetupDragAndDropHeader() {
$('tr.ui-jqgrid-labels th div').draggable({
appendTo: 'body',
helper: 'clone'
});

$('#groups ol').droppable({
activeClass: 'ui-state-default',
hoverClass: 'ui-state-hover',
accept: ':not(.ui-sortable-helper)',

drop: function (event, ui) {
var $this = $(this);
$this.find('.placeholder').remove();

var groupingColumn = $('<li ></li>').attr('data-column', ui.draggable.attr('id').replace('jqgh_' + gridId + '_', ''));

$('<span class="ui-icon ui-icon-close"></span>').click(function () {
$(this).parent().remove();
$('#' + gridId).jqGrid('groupingRemove');
$('#' + gridId).jqGrid('groupingGroupBy', getheader());

// !!!!!!!!!!!!!!!! tried adding here
// setGroupHeaderText();

if ($('#groups ol li:not(.placeholder)').length === 0) {
$('<li class="placeholder">Drag a column header and drop it here to group by that column</li>').appendTo($this);
}
}).appendTo(groupingColumn);

 

groupingColumn.append(ui.draggable.text());
groupingColumn.appendTo($this);

$('#' + gridId).jqGrid('groupingRemove');
$('#' + gridId).jqGrid('groupingGroupBy', getheader());

// !!!!!!!!!!!!!!!!  tried adding here

//This almost works but it sets the first group Name only when you drag and drop a second group.
// the second group then has no group heading name but data as the group name group ie {0}
// adding a third group adds names for the first and second group but the third group has data

//as the group name group ie {0}

setGroupHeaderText();

}

}).sortable({
items: 'li:not(.placeholder)',
sort: function () {
$(this).removeClass('ui-state-default');
},

stop: function () {
$('#' + gridId).jqGrid('groupingRemove');
$('#' + gridId).jqGrid('groupingGroupBy', getheader());

// !!!!!!!!!!!!!!!! tried adding here
// setGroupHeaderText();

}
});
}

function getheader()
{
var header = $('#groups ol li:not(.placeholder)').map(function () { return $(this).attr('data-column'); }).get();
return header;
}

function setGroupHeaderText()
{
$('#' + gridId).jqGrid('setGridParam',
{
groupingView:
{
groupText: getheader(),

// Future Problem

// groupText: [getheader() + ' : {0} '],
// on second column drag/drop it adds add heading to first group but it puts the names as

//" Name,Price : John"

// adding a third group changes the first heading to Name,Price,Location : John. The Second and third //group only has data as the group name i.e {0}

groupSummaryPos: ['footer'],
groupCollapse: true,
ShowGroupColumn: true
}
});
}

 

This is a very interesting job.

You can use groupText property in grouping - see docs and demos.

 

If you have difficulties to realise this, please let me know I will try to help you.

 

Kind Regards

Tony

I have setup drag and drop headings to group by the relevant column  from http://jsfiddle.net/tpeczek/vRtKS/

It works great however I am trying to display the column name before the value i.e.

 

Client : Test

data

data

 

Client : Test2

data

data

 

I've been going around in circles for a week now if any one could help.

 

Kind Regards,

Ryan