I am playing with using a Kendo Sortable. I would like to drag an item from one list in order to populate another, but I need to leave that item in the original list. Does anyone have an idea on how to do this?
An alternative to sortable might be draggable & dropTarget.
Have a look at Moving items from one list to another.
$("#listB").kendoDropTarget({
dragenter: addStyling,
dragleave: resetStyling,
drop: function(e) { //apply changes to the data after an item is dropped
var draggableElement = e.draggable.currentTarget,
dataItem = listA_DS.getByUid(draggableElement.data("uid")); //find the corresponding dataItem by uid
//--- Change --- listA_DS.remove(dataItem); //remove the item from ListA
listB_DS.add(dataItem); //add the item to ListB
resetStyling.call(this); //reset visual dropTarget indication that was added on dragenter
}
});
Modified Example from that page
Related
I have a button outside the grid, on clicking of this button i am iterating the row nodes and doing a check whether the data is empty or not. If it is empty i want to highlight that row. Did not found anything which can give me any option to highlight the row in ag grid on button click.
Kindly help
I found the answer for above:
In Component: may be in constructor
this.rowClassRules = {
'invalid-row': (params) => {
if (this.inValidRowNode && this.inValidRowNode.data.name === params.data.name) {
return true;
}
}
};
On button click (in validation method), while iterating the node we need to set the data. I am setting in this way.
node.setDataValue('name', ' ');
In Html:
<ag-grid-angular #agGrid rowSelection="multiple" [gridOptions]="gridOptions" [columnDefs]="gridColumnDefs" (gridReady)="onGridReady($event)"
[rowClassRules]="rowClassRules">
How to fires event after Drag & Drop on TreePanel
On an ExtJS drag and drop tree using the drop or beforedrop listeners dont seem to fire
How do I make an ExtJS drag and drop tree be copy only -- not remove items from the display?
I'm trying to take the new parent of the moved node:
drop: function (node, data, overModel, dropPosition) {
var theNode = data.records[0];
console.log( theNode.data.parentId );
console.log( theNode.parentNode.id );
},
but :
note 1: the node parameter is not the real TreeNode, just a HTML tag.
note 2: The theNode.parentNode is not updated and I'm taking the old node parent (before the drag). It will be updated AFTER the drop function.
How can I take the new node parent?
Solved (ExtJS 6.2.x).
drop: function (node, data, overModel, dropPosition) {
var thisIsTheMovedNode = data.records[0];
var thisIsTheNewParentNodeData = overModel.data;
var thisIsTheOldParentNodeData = data.records[0].parentNode;
}
The new parent node ID is : overModel.data.id;
When I try to load context menu in here map, it shows error in firebug as "ReferenceError: nokia is not defined"
What's it that I'm doing wrong.
Imported js files:
The code that creates the bug is:
createContextMenu(map);
function createContextMenu(map) {
contextMenu = new nokia.maps.map.component.ContextMenu();
/* Add Custom Context Menu Items */
//This adds three items with a menu separator
menuItems1 = function (contextMenuEvent, group) {
group.addEntry("Menu Item 1",
function (activationEvent) {alert("Menu Item 1 clicked"); });
group.addEntry("Menu Item 2",
function (activationEvent) {alert("Menu Item 2 clicked"); });
group.addEntry("Menu Item 3",
function (activationEvent) {alert("Menu Item 3 clicked"); });
};
contextMenu.addHandler(menuItems1);
map.components.add(contextMenu);
}
Currently working on jquery 1.9.1
and
Firefox 48
HERE Javascript API have moved to the namspace "H" with version 3.X onward hence "nokia." would not work any more. With respect to context menu functionality, it can achieved by adding an event listener on the map
Example: https://developer.here.com/documentation/examples/maps-js/events/context-menu
/**
* Adds context menus for the map and the created objects.
* Context menu items can be different depending on the target.
* That is why in this context menu on the map shows default items as well as
* the "Add circle", whereas context menu on the circle itself shows the "Remove circle".
*
* #param {H.Map} map Reference to initialized map object
*/
function addContextMenus(map) {
// First we need to subscribe to the "contextmenu" event on the map
map.addEventListener('contextmenu', function (e) {
// As we already handle contextmenu event callback on circle object,
// we don't do anything if target is different than the map.
if (e.target !== map) {
return;
}
// "contextmenu" event might be triggered not only by a pointer,
// but a keyboard button as well. That's why ContextMenuEvent
// doesn't have a "currentPointer" property.
// Instead it has "viewportX" and "viewportY" properties
// for the associates position.
// Get geo coordinates from the screen coordinates.
var coord = map.screenToGeo(e.viewportX, e.viewportY);
// In order to add menu items, you have to push them to the "items"
// property of the event object. That has to be done synchronously, otherwise
// the ui component will not contain them. However you can change the menu entry
// text asynchronously.
e.items.push(
// Create a menu item, that has only a label,
// which displays the current coordinates.
new H.util.ContextItem({
label: [
Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
].join(' ')
}),
// Create an item, that will change the map center when clicking on it.
new H.util.ContextItem({
label: 'Center map here',
callback: function() {
map.setCenter(coord, true);
}
}),
// It is possible to add a seperator between items in order to logically group them.
H.util.ContextItem.SEPARATOR,
// This menu item will add a new circle to the map
new H.util.ContextItem({
label: 'Add circle',
callback: addCircle.bind(map, coord)
})
);
});
}
I have some draggables and a sortable container
when I drag that in to the sortable container I need to get the draggable instance,ie I need to find which draggable element I have dragged in to it.
Now the problem is, I have coded like, when I drag a draggable into the sortable area, it becomes the part of the sortable area.
There is no way to find out which draggable I have dragged in.
Can you guys please help.?
Thanks in advance.
This is kind of old, but I solved this by getting the event.target inside the drop function.
$('.my-drop-zone').droppable ({
drop: function(event, ui) {
// item that was dragged
var draggedItem = ui.draggable; //or ui.draggable.attr('id');
// item it was dropped on
var droppedOnItem = $(event.target); //or $(event.target).attr('id');
}
});
I am using JQuery UI sortable ,How do i prevent the sortable action when there is only one element ?
Check before sortable use.For example:
var n = $("div li").length;
if(n>1)
{
$("div li" ).sortable({ items: 'li' });
}
Count the number of siblings that the element has, if it is equal to 0 then there is only one element so then you can call .sortable('destroy') to remove the sortable functionality.
if ($(this).siblings().length < 2) {
$(this).sortable('destroy');
}
Unfortunately there is no option to explicitly set a minimum amount of items so there's no other way than to check manually.