The problem here is that your grids are being automatically placed into editMode with this approach, and being in editMode will, in general, specialize various different interactions to be interpreted as attempts to edit the component's configuration, rather than normal interactions with the component (this is mediated by editProxies).
If you didn't intend to turn on editMode, just set autoEditNewNodes: false on your editPane.
If you did want to turn on editMode, but you wanted some kind of mixed behavior (some normal behavior like data dragging, some editMode behavior), please specify which editMode behaviors you wanted to keep.
Announcement
Collapse
No announcement yet.
X
-
drag and drop and reorder not working in List/TreeGrids as portlets.
Hi,
I'm using SmartClient Version: v12.1p_2020-08-16/Enterprise Development Only (built 2020-08-16). I'm trying to create portlets with List/TreeGrids which have drag and drop and reorder functionality. But find that I cannot drag and drop records.
I am basing this on the editGridPortalLayout example https://smartclient.com/smartclient/...idPortalLayout
Code:isc.ListPalette.create({ ID: "listPalette", width: 150, leaveScrollbarGap: false, fields: [ {name: "title", title: "DataSource Name"} ], // specify paletteNodes that will create ListGrids bound to specific DataSources data: [{ title: "Animals", type: "ListGrid", defaults: { dataSource: "animals", autoFetchData: true, canReorderRecords: true, canDragRecordsOut: true, canAcceptDroppedRecords: true, dragDataAction: "copy", showFilterEditor: true } },{ title: "Supply Categories", type: "ListGrid", defaults: { dataSource: "supplyCategory", autoFetchData: true, canReorderRecords: true, canDragRecordsOut: true, canAcceptDroppedRecords: true, dragDataAction: "copy", showFilterEditor: true } },{ title: "Supply Items", type: "ListGrid", defaults: { dataSource: "supplyItem", autoFetchData: true, canReorderRecords: true, canDragRecordsOut: true, canAcceptDroppedRecords: true, dragDataAction: "copy", showFilterEditor: true } }] }); isc.EditPane.create({ ID: "editPane", extraPalettes: isc.HiddenPalette.create({ data: [ { title: "ListGridField", type: "ListGridField" } ] }) }); // Make the new editPane the default Edit Context for the palette, // to support double-clicking on paletteNodes to create them. listPalette.setDefaultEditContext(editPane); editPane.setDefaultPalette(listPalette); // Add a PortalLayout to the editPane var editNode = editPane.addFromPaletteNode({ type: "PortalLayout", defaults: { width: "100%", height: "100%", canResizePortlets: true } }); editPane.getEditContext().defaultParent = editNode; isc.VLayout.create({ ID: "vLayout", width: "100%", height: "100%", membersMargin: 10, members: [ isc.HLayout.create({ ID: "hLayout", membersMargin: 20, width: "100%", height: "100%", members: [ listPalette, editPane ] }) ] }); // This button will destroy the Edit Portal and then recreate it from saved state. isc.IButton.create({ ID: "destroyAndRecreateButton", title: "Destroy and Recreate", autoFit: true, layoutAlign: "right", destroyAndRecreateEditPane : function () { // We save the editPane node data in a variable var paletteNodes = editPane.serializeAllEditNodes(); // Animate the disappearance of the editPane, since otherwise // everything happens at once. editPane.animateFade(0, function () { // Once the animation is finished, destroy all the nodes editPane.destroyAll(); // Then add them back from the serialized form editPane.addPaletteNodesFromXML(paletteNodes); // And make us visible again editPane.setOpacity(100); }, 2000, "smoothEnd"); }, click : function () { this.destroyAndRecreateEditPane(); } }); // This inserts the button into the overall layout for the example. vLayout.addMember(destroyAndRecreateButton, 0);
Please advice.Tags: None
Leave a comment: