July 29, 2014 at 5:38 pm in reply to: jqgrid drag and drop headings for grouping #102114

rize

Participant

Hi ,

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

July 29, 2014 at 1:14 pm in reply to: jqgrid drag and drop headings for grouping #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
}
});
}