Dynamically creating grids

[Staale EikebraatenParticipant]

We are creating a dragdrop page for splitting students into several groups. Destination groups is created by the user, and is one or more jqxGrids.
When creating groups, and then fetching data, the droptarget for the master cells is set to class”.drop-target”, and we can distribute students to the groups made before getting data.
If we try to add a new grid adter fetching data, and reinitiate the dragdrop, the dragdrop cant find the new grid, but if we check with jquery, it is present it the DOM.

Any suggestions or are we way out of line here ??

Thanx
-=Staale=-

This is our “initDrop” function, the init-drag function is the same as the example from your website and works ok.
This function is called when master data is fetched, and when adding groups. when adding groups after data is fetched the new droptarget is not found.
function initDragDrop(vm) {
// select all grid cells.
var gridCells = $(‘#StudentSelectorGrid’).find(‘.jqx-grid-cell’);

var droptargs = $(“.drop-target”);
$.pnotify({ title: ‘No of’ + droptargs.length, text: “”, type: ‘info’ });

// initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
gridCells.jqxDragDrop({ appendTo: ‘body’, dragZIndex: 99999,
dropAction: ‘none’,
dropTarget: “.drop-target”,
onTargetDrop: function (data) {
var gridid = “#” + data[0].id;
$(gridid).jqxGrid(‘addrow’, 0, vm.selectedRows());
},
initFeedback: function (feedback) {
var rowsindexes = $(“#StudentSelectorGrid”).jqxGrid(‘getselectedrowindexes’);
feedback.height(25);
feedback.width($(“#StudentSelectorGrid”).width());
feedback.css(‘background’, ‘#aaa’);
}
});

}

Here is our addnewgroup function, as you can see last in the function we have tried both to init again, and fetching data again, without succes.
self.addGroup = function (subgroup, vm) {
bootbox.prompt(“Navn på gruppen”, function (name) {
if (name != undefined) {
var newId = subgroup + “_” + Math.floor((Math.random() * 10) + 1);
self.groups.push(new Group(name, subgroup, newId));

var fane = “#content_norskgrupper”;
$(fane).append(‘<div class=”pasgroup”><span>’ + name + ‘</span><div style=”float:left;” id=”‘ + newId + ‘” class=”drop-target”></div></div>’);

$(“#” + newId).jqxGrid({
width: ‘190px’,
height: ‘200px’,
source: { datafields: [{ name: ‘StudentId’ }, { name: ‘StudentFirstName’ }, { name: ‘StudentLastName’}] },
columns: [
{ datafield: ‘StudentId’, hidden: true },
{ text: ‘Fornavn’, datafield: ‘StudentFirstName’, width: ’70px’ },
{ text: ‘Etternavn’, datafield: ‘StudentLastName’, width: ‘100px’ },
{ text: ”, datafield: ‘delete’, cellsrenderer: renderSlettElev, width: ‘8px’ }
]
});

//initDragDrop(self);
getStudents(self);
}

});
};

[Peter StoevKeymaster]

Hi Staale Eikebraaten,

The initialization according to me is wrong. The Grid’s source object is expected to be dataAdapter and is expected to have some data. In addition, you should initialize the dragDrop plugins after the Grid is rendered and the Grid’s data is loaded which does not happen in your case i.e you should use the Grid’s rendered callback or ready callback to create the dragDrop plugins.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Staale EikebraatenParticipant]

I did not post the initialization of the master grid, what you see is the init of the empty target grids, and they do not have a source.
But I did as you suggested and moved the initDragDrop to the rendered callback in the mastergrid, with the same result. drop-targets which exists prior to initialization of dragdrop is found, and receptive of drags, but new grids/targets added after rendering is not found even if we re-initialize dragdrop.
It is this code that worries me, as it does not reset when we tells it to:

gridCells.jqxDragDrop({ appendTo: ‘body’, dragZIndex: 99999,
dropAction: ‘none’,
dropTarget: “.drop-target”,
onTargetDrop: function (data) {
var gridid = “#” + data[0].id;
$(gridid).jqxGrid(‘addrow’, 0, vm.selectedRows());
},
initFeedback: function (feedback) { }
});

[Author]

Posts