jQuery Grid Plugin - jqGrid

Hi Tony,

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
}
});
}