July 28, 2014 at 8:43 pm #102105

tony

Keymaster

Hello,

 

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

July 29, 2014 at 1:14 pm #102111

rize

Participant

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 = $(‘

‘).attr(‘data-column’, ui.draggable.attr(‘id’).replace(‘jqgh_’ + gridId + ‘_’, ”));

$(‘‘).click(function () {
$(this).parent().remove();
$(‘#’ + gridId).jqGrid(‘groupingRemove’);
$(‘#’ + gridId).jqGrid(‘groupingGroupBy’, getheader());

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

if ($(‘#groups ol li:not(.placeholder)’).length === 0) {
$(‘

‘).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: ,
groupCollapse: true,
ShowGroupColumn: true
}
});
}