Back to Community Threads
Need to obtain names of user selected\highlighted files please
Question asked by Serge Zee - 8/3/2018 at 2:41 PM
Answered
Hi , 
I need to be able to select user chosen/highlighted items and the pass these values to JavaScript, It used to work ok in previous versions with grid.selectedItems code. 
Now it does not. 
I tried ClientChosen event and it works ok, but then FileVista control view disappears. I tried your sample project and that's the behavior i experienced. 
So, i wonder if this can not be resolved, then if there is some alternative way to find 
user selected/highlighted items? 
Thank You 
Serge
Cem Alacayir Replied
8/15/2018 at 11:34 AM
Employee Post
There is no direct event for it (we plan to add it in future) but for now you can use this code:
 
<head> 
  <script type="text/javascript">
  
    //Override for adding getNavigationSelectionInfo amd getViewSelectionInfo methods
    //and fileManagerNavigationSelectionChange and fileManagerViewSelectionChange events
    function fileManagerLoading(sender, e) {
        var fileManager = sender;

        Ext.override(fileManager, {
            getNavigationSelectionInfo: function () {
                var record = this.navigationSelection;

                if (!record)
                    return null;

                return {
                    Name: record.data.name,
                    FullPath: record.getPathData().fullPath,
                    ItemType: Ext.Object.getKey(GleamTech.FileUltimate.FileManagerItemType, record.data.itemType)
                };
            },
            getViewSelectionInfo: function() {
                var parentFullPath = this.navigationSelection.getPathData().fullPath;

                var items = [];
                for (var i = 0; i < this.viewSelection.length; i++) {
                    var record = this.viewSelection[i];

                    items.push({
                        Name: record.data.name,
                        FullPath: GleamTech.Util.Path.combine(parentFullPath, record.data.name, GleamTech.Util.Path.backSlash),
                        ItemType: Ext.Object.getKey(GleamTech.FileUltimate.FileManagerItemType, record.data.itemType),
                        Extension: record.data.extension,
                        Size: record.data.size
                    });
                }

                return items;
            },
            onNavigationSelectionChange: function() {
                this.callParent(arguments);

                var eventArgs = this.getNavigationSelectionInfo();

                if (eventArgs)
                    Ext.callback(window["fileManagerNavigationSelectionChange"], window, [this, eventArgs]);
            },
            onViewSelectionChange: function () {
                this.callParent(arguments);

                var eventArgs = this.getViewSelectionInfo();

                Ext.callback(window["fileManagerViewSelectionChange"], window, [this, eventArgs]);
            }
        });
    }

  </script>
</head> 
<body>

  <GleamTech:FileManager id="fileManager" runat="server" 
    ClientLoading="fileManagerLoading" />
  
</body>
 
Then for navigation selection:
 
//OPTION 1:
function fileManagerNavigationSelectionChange(sender, e) {
    //Pretty print the navigation selection (from event object) when it changes
    alert(JSON.stringify(e, null, 2));
}

//OPTION 2:
function myButton1Click() {
    //Pretty print the navigation selection when the your button is clicked
    var selection = fileManager.getViewSelectionInfo();
    alert(JSON.stringify(selection, null, 2));
}

//SAMPLE OUTPUT:
/*

{
  "Name": "Folder One",
  "FullPath": "[1. Root Folder]:\\Folder One",
  "ItemType": "Folder"
}

*/
 
 
Then for view selection:
 
//OPTION 1:
function fileManagerViewSelectionChange(sender, e) {
    //Pretty print the view selection (from event object) when it changes
    alert(JSON.stringify(e, null, 2));
}

//OPTION 2:
function myButton2Click() {
    //Pretty print the view selection when the your button is clicked
    var selection = fileManager.getNavigationSelectionInfo();
    alert(JSON.stringify(selection, null, 2));
}


//SAMPLE OUTPUT:
/*

[
  {
    "Name": "DOCX Document.docx",
    "FullPath": "[1. Root Folder]:\\DOCX Document.docx",
    "ItemType": "File",
    "Extension": "docx",
    "Size": 84272
  },
  {
    "Name": "Folder One",
    "FullPath": "[1. Root Folder]:\\Folder One",
    "ItemType": "Folder",
    "Extension": "",
    "Size": null
  }
]

*/
 
Serge Zee Replied
8/15/2018 at 6:16 PM
Thank You Cem,

Unfortunately this Javascript has some syntax error somewhere, i tried both in my page and via JavaScript validator.

Provided you can easily figure out syntax error, can i use some code related
to regular input button click Javascript event?

Thank You

S
Cem Alacayir Replied
8/17/2018 at 12:24 AM
Employee Post
I updated the code with also button click option and I verified it works, please see above.
Cem Alacayir Replied
9/5/2018 at 11:44 AM
Employee Post Marked As Answer
FYI, we have just released FileUltimate v6.2.0 with this featue:
 
Added: New client-side events. Before events: ClientCreating, ClientDeleting, ClientRenaming, ClientCopying, ClientMoving, ClientCompressing, ClientExtracting, ClientUploading, ClientDownloading, ClientPreviewing. It's possible to stop a file action (and optionally display a message) by canceling the corresponding before event. After events: ClientFolderChanged, ClientSelectionChanged, ClientCreated, ClientDeleted, ClientRenamed, ClientCopied, ClientMoved, ClientCompressed, ClientExtracted, ClientUploaded. Refer to new "Client-side events" sample and updated docs for event handler usage.
 
Now you don't need any overrides anymore and you can directly use these client side events:
​<head> 
  <script type="text/javascript">
  
    function fileManagerFolderChanged(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);
    }

    function fileManagerSelectionChanged(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);
    }

  </script>
</head>
 
Binding JS event handlers in ASP.NET MVC:
var fileManager = new FileManager
{
    ClientFolderChanged="fileManagerFolderChanged",
    ClientSelectionChanged="fileManagerSelectionChanged"
};
 
Binding JS event handlers in ASP.NET WebForms:
<GleamTech:FileManager id="fileManager" runat="server" 
  ClientFolderChanged="fileManagerFolderChanged"
  ClientSelectionChanged="fileManagerSelectionChanged" />
 
Sample outputs for these event handlers (pretty printing of event arguments):
​//SAMPLE OUTPUT for ClientFolderChanged:
{
  "eventName": "folderChanged",
  "folder": {
    "name": "Folder One",
    "fullPath": "[1. Root Folder]:\\Folder One",
    "itemType": "Folder"
  }
}

//SAMPLE OUTPUT for ClientSelectionChanged:
{
  "eventName": "selectionChanged",
  "items": [
    {
      "name": "DOCX Document.docx",
      "fullPath": "[1. Root Folder]:\\DOCX Document.docx",
      "itemType": "File",
      "extension": "docx",
      "size": 84272
    },
    {
      "name": "Folder One",
      "fullPath": "[1. Root Folder]:\\Folder One",
      "itemType": "Folder",
      "extension": "",
      "size": null
    }
  ]
}
 
Getting current folder info and selection info when your buttons are clicked (without using FileManager events):
//Pretty print the current folder info when the your button is clicked
function myButton1Click() {
    var folderInfo = fileManager.getFolderInfo();
    var json = JSON.stringify(folderInfo, null, 2);

   alert(json);
}

//SAMPLE OUTPUT:
/*
{
  "name": "Folder One",
  "fullPath": "[1. Root Folder]:\\Folder One",
  "itemType": "Folder"
}
*/

//Pretty print the selection info when the your button is clicked
function myButton2Click() {
    var selectionInfo = fileManager.getSelectionInfo();
    var json = JSON.stringify(selectionInfo, null, 2);

   alert(json);
}

//SAMPLE OUTPUT:
/*
[
  {
    "name": "DOCX Document.docx",
    "fullPath": "[1. Root Folder]:\\DOCX Document.docx",
    "itemType": "File",
    "extension": "docx",
    "size": 84272
  },
  {
    "name": "Folder One",
    "fullPath": "[1. Root Folder]:\\Folder One",
    "itemType": "Folder",
    "extension": "",
    "size": null
  }
]
*/
 
 
 
Back to Community Threads

Reply to Thread

Enter the verification text