Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • Isomorphic
    replied
    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.

    Leave a comment:


  • 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);
    The goal is for a user to be able to drop multiple grids and start dragging and dropping records from one grid to the other.

    Please advice.
Working...
X