[EricParticipant]

I am trying to get a grid row to grid drag and drop working using the above. When I select the row to be dragged the cell value that I am on shows up at the top of the page in the feedback? area and that is all. Any cell I select shows at the top of the page but just that data.

Trying to put some alerts into the code I find that the groupslength is always 0. Below is my code for the grid I am trying to drag from. Any help would be appreciated.

			// Initialize the main datagrid
			$("#electivesGrid").jqxGrid(
            {
            	height: 500,
                width: 800,
                source: gridDataAdapter,
                theme: 'energyblue',
                pageable: true,
                sortable: true,
				columns: [
					{ text: 'Class Code', datafield: 'classCode', width: 80 },
					{ text: 'Course Name', datafield: 'courseName', width: 300 },    	
					{ text: 'Start Date', datafield: 'startDate', width: 100 },
					{ text: 'End Date', datafield: 'endDate', width: 100 },
					{ text: 'Institution', datafield: 'institution', width: 200 }
				],
                rendered: function () {
                    // select all grid cells.
                    var gridCells = $('#electivesGrid').find('.jqx-grid-cell');
                    if ($('#electivesGrid').jqxGrid('groups').length > 0) {
                        gridCells = $('#electivesGrid').find('.jqx-grid-group-cell');
                    }
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: 'energyblue', dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(100);
                            feedback.width(300);
                        }
                    });
                    // initialize the dragged object.
                    gridCells.off('dragStart');
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#electivesGrid").jqxGrid('getcellatposition', position.left, position.top);
                        $(this).jqxDragDrop('data', $("#electivesGrid").jqxGrid('getrowdata', cell.row));
                        var groupslength = $('#electivesGrid').jqxGrid('groups').length;
              alert(groupslength);    
                        // update feedback's display value.
                        var feedback = $(this).jqxDragDrop('feedback');
                        var feedbackContent = $(this).parent().clone();
                        var table = '<table>';
                        $.each(feedbackContent.children(), function (index) {
                            if (index < groupslength)
                                return true;
                            table += '<tr>';
                            table += '<td>';
                            table += columns[index - groupslength].text + ': ';
                            table += '</td>';
                            table += '<td>';
                            table += $(this).text();
                            table += '</td>';
                            table += '</tr>';
                        });
                        table += '</table>';
                        feedback.html(table);
                    });
                    gridCells.off('dragEnd');
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).jqxDragDrop('data');
                        var position = $.jqx.position(event.args);
                        var pageX = position.left;
                        var pageY = position.top;
                        var $destination = $("#selectionGrid");
                        var targetX = $destination.offset().left;
                        var targetY = $destination.offset().top;
                        var width = $destination.width();
                        var height = $destination.height();
                        if (pageX >= targetX && pageX <= targetX + width) {
                            if (pageY >= targetY && pageY <= targetY + height) {
                                $destination.jqxGrid('addrow', null, value);
                            }
                        }
                    });
                }
            });

[Author]

Posts