How to get selected nodes in FolderBrowserWidget ?

Fuaadali

on a button click i need to get selected node id

can anyone help?

my code:

 <div id="browser"  
<input type="button" vale="Generate" id="BtnGenerate" />   
  
  var folderBrowser = new FolderBrowserWidget({
       connection: {
                   url: 'https://domain/otcs/cs.exe/api/v1/',
          supportPath: '/img',
          authenticationHeaders: {OTCSTicket:'[LL_REPTAG_OTCSTICKET /]' 
          }
       },
       start:{id:217872},
    breadcrumb: false 
  });
  folderBrowser.show({placeholder: '#browser'});
 folderBrowser.on("containerOpened", function (args) {
        console.log("Current Containerx: " + args.node.id);// success here id came
      });
   
  $('#BtnGenerate').on('click',function(){
    console.log("here")
    console.log(folderBrowser.getSelectedChildren()) 
  })

error :

folderbrowser.widget.js:94 Uncaught TypeError: Cannot read properties of undefined (reading 'toJSON')

  at o.getSelectedChildren (folderbrowser.widget.js:94:1)

  at HTMLInputElement.<anonymous> (<anonymous>:23:35)

  at HTMLInputElement.dispatch (jquery.js:5403:1)

  at HTMLInputElement.m.handle (jquery.js:5207:1)

Jan Velas

Hi fuaad!

I saw your question and got interested myself.

Try:

folderBrowser.allSelectedNodes();

When selecting 3/7 rows outputs something like:

child {cid: 'a599', length: 3, models: Array(3), _byId: {…}, modelId: ƒ, …}
  cid: "a599"
  length: 3
  modelId: ƒ (attrs)
  models: (3) [NodeModel, NodeModel, NodeModel]
  _byId: {3418: NodeModel, 3457: NodeModel, 3460: NodeModel, c1173: NodeModel, c1199: NodeModel, c1225: NodeModel}
  _events: {remove: Array(3), add: Array(3), reset: Array(6), update: Array(2), change: Array(1), …}
  _listenId: "l600"
  _listeners: {l576: Listening, l1843: Listening, l1944: Listening}
  [[Prototype]]: Backbone.Collection

This method apparently comes from a mixin:

lib\src\csui\controls\mixins\view.state\node.selection.restore.mixin.js

...
    collection = collection || options.collection;

    var allSelectedNodes = collection.selectedItems || this.getCollectionWithSpecificModelId(collection);

    this.getAllSelectedNodes = function() {
        return allSelectedNodes;
    };
...

Looking more deeply at the mixin, you can also see something like tableView.selectedChildren:

console.log(folderBrowser.tableView.selectedChildren);

It returns a similar collection to the one before, but directly from the tableView:

child {cid: 'a737', length: 3, models: Array(3), _byId: {…}, _listenId: 'l738', …}
  cid: "a737"
  length: 3
  models: (3) [NodeModel, NodeModel, NodeModel]
  _byId: {c922: NodeModel, c948: NodeModel, c974: NodeModel}
  _events: {reset: Array(1)}
  _listenId: "l738"
  _listeners: {l733: Listening}
  [[Prototype]]: Backbone.Collection

Last but not least, you could get the collection from the folderBrowser and filter it using an underscore method, to only have rows which have "csuiIsSelected" === true (taken from the model attributes)

var selectedCollection = folderBrowser.collection.filter(function (nodeModel) {
    return nodeModel.get('csuiIsSelected') === true;
});
console.log(selectedCollection);

Leaves you with only the selected models:

(3) [NodeModel, NodeModel, NodeModel]
    0: NodeModel {cid: 'c922', attributes: {…}, collection: NodeChildrenCollection, actions: ActionCollection, parent: NodeModel, …}
    1: NodeModel {cid: 'c948', attributes: {…}, collection: NodeChildrenCollection, actions: ActionCollection, parent: NodeModel, …}
    2: NodeModel {cid: 'c974', attributes: {…}, collection: NodeChildrenCollection, actions: ActionCollection, parent: NodeModel, …}
    length: 3
    [[Prototype]]: Array(0)

May this help you 😁

Your Smart UI comrade-in-arms,

Jan