2
How to Custom Menu and Custom ToolBar
Question asked by Sky.Edge - 11/13/2014 at 12:37 AM
Answered
4.1.5  Run  Wrong,help
 
 
 
You should first register a client loaded event:

<GleamTech:FileManager ID="fileManager" runat="server" ClientLoaded="fileManagerLoaded" > ...

Then in the host page you should add this javascript function:

function fileManagerLoaded(sender, eventArgs) {
    var fileManager = sender;

    fileManager.ToolBar.imagesPath = "/myimages/";
    fileManager.ToolBar.RenderItem(fileManager.ToolBar.AddSeparator());
    fileManager.ToolBar.RenderItem(fileManager.ToolBar.AddButton("TestButtonAction", "description", "newbutton.png"));
    fileManager.ToolBar.onButtonClick = function (toolBarButton, e) {
        switch (toolBarButton.action) {
            case "TestButtonAction":
                alert("Test button clicked!");
                break;
            default :
                fileManager.onAction(toolBarButton);
        }
    };

    GleamTech.JavaScript.UI.ContextMenuIconsPath["custom"] = "/myimages/";
    fileManager.ContextMenus.FileGridRow.InsertMenuItem(fileManager.ContextMenus.FileGridRow.menuItems["OpenWith"].index + 1, "TestMenuAction", "New menu item", "description", "custom:newmenuitem.png");
    fileManager.ContextMenus.FileGridRow.onMenuItemClick = function (menuItem, e) {
        switch (menuItem.action) {
            case "TestMenuAction":
                var gridRow = menuItem.menu.target;
                var selectedItemName = gridRow.GetCellValue(fileManager.GridView.columns.Name);
                alert("Test menu item clicked for item: " + selectedItemName);
                break;
            default:
                fileManager.onAction(menuItem, menuItem.menu.target);
        }
    };
}

Note that the size for toolbar images is 24x24 and for menu item images is 16x16.
I also recommend you to use Firebug on Firefox to figure out the available properties of the objects found in FileManager API.

9 Replies

Reply to Thread
2
Cem Alacayir Replied
Employee Post
Yes, with v4.x, client-side API is changed so you can do it like this from now on:
 
<head> 
    <script type="text/javascript">
    
        function fileManagerLoading(sender, e) {
          var fileManager = sender;

          fileManager.ribbon.addTab({
              title: "Test tab",
              items: [
                  {
                      title: "Test group",
                      items:[
                          {
                              text: "Test button",
                              iconCls: "", //css class for image
                              icon: "", //or url to the image
                              scale: "small", //or medium or large
                              handler: function () {
                                  var selectedItemNames = Ext.Array.map(
                                    fileManager.currentViewSelection, 
                                    function (item) { return item.data.name; }
                                  );
                                  alert(
                                      "Clicked test button!\n"
                                      + "Current selection:" + selectedItemNames
                                  );
                              }
                          }
                      ]
                  }
              ]
          });

          Ext.override(fileManager, {
              createViewItemContextMenu: function () {
                  var me = this;

                  var menu = this.callParent();
                  menu.add([// or menu.insert(0, [
                      {
                          text: "Test menu item",
                          handler: function () {
                              alert(
                                  "Clicked test menu item!\n"
                                  + "Context menu record:" 
                                  + me.contextMenuRecord.data.name
                              );
                          }
                      }
                  ]);
                  return menu;
              }
          });

          fileManager.centerPane.columns.push({
              text: "Test column",
              dataIndex: "name",
              tdCls: "x-item-value",
              renderer: function (value, meta, record) {
                  //you can use the name value as an id to 
                  //get your own corresponding value here
                  //e.g if you have an object customValues with file names as key
                  //you can retreive and return customValues[record.data.name]
                  return record.data.name;
              }
          });
        }
        
    </script>
</head> 
<body>

  <GleamTech:FileManager id="fileManager" runat="server" 
    ClientLoading="fileManagerLoading" />
  
</body>
 
0
joseph Replied
Hi is this still applicable for version 5.6? It tried this but i receive
 
Uncaught TypeError: Cannot read property 'addTab' of null
 
Please advise. Thanks
1
Cem Alacayir Replied
Employee Post
After v5.5.5 there was this change:
 
Fixed: ClientLoading event was being fired too late, some functions like fileManager.onViewRefresh are registered as event handlers to internal components so even you override them later the components still referred to the old function reference, so Ext.override was not working. From now on ClientLoading will now fire at the start of initComponent and ClientLoaded at the end of initComponent. ClientLoading should be used for Ext.override calls, ClientLoaded should be called for adding actions, UI elements.
So for addTab to work, you should use fileManagerLoaded event instead of fileManagerLoading event:
 
<head> 
  <script type="text/javascript">

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

        //Adding a context menu item
        Ext.override(fileManager, {
            createViewItemContextMenu: function () {
                var me = this;

                var menu = this.callParent();
                menu.add([// or menu.insert(0, [
                    {
                        text: "Test menu item",
                        handler: function () {
                            alert(
                                "Clicked test menu item!\n"
                                + "Context menu record:" 
                                + me.contextMenuRecord.data.name
                            );
                        }
                    }
                ]);
                return menu;
            }
        });

        //Adding a column for "Details" view layout
        Ext.override(fileManager, {
            getViewColumnsConfig: function () {
                var columns = this.callParent(arguments);

                columns.push({
                    text: "Test column",
                    dataIndex: "name",
                    tdCls: "x-item-value",
                    renderer: function (value, meta, record) {
                        //you can use the name value as an id to 
                        //get your own corresponding value here
                        //e.g if you have an object customValues 
                        //with file names as key, you can retrieve
                        //and return customValues[record.data.name]
                        return record.data.name;
                    }
                });

                return columns;
            }
        });

      }
      
      function fileManagerLoaded(sender, e) {
        var fileManager = sender;

        //Adding a new ribbon tab
        fileManager.ribbon.addTab({
            title: "Test tab",
            items: [
                {
                    title: "Test group",
                    items:[
                        {
                            text: "Test button",
                            iconCls: "", //css class for image
                            icon: "", //or url to the image
                            scale: "small", //or medium or large
                            handler: function () {
                                var selectedItemNames = Ext.Array.map(
                                  fileManager.currentViewSelection, 
                                  function (item) { return item.data.name; }
                                );
                                alert(
                                    "Clicked test button!\n"
                                    + "Current selection:" + selectedItemNames
                                );
                            }
                        }
                    ]
                }
            ]
        });

      }
      
  </script>
</head> 
<body>

  <GleamTech:FileManager id="fileManager" runat="server" 
    ClientLoading="fileManagerLoading"
    ClientLoaded="fileManagerLoaded" />
  
</body>
 
 
0
Cem Alacayir Replied
Employee Post
Updated code for "Adding a column for "Details" view layout", need to override getViewColumnsConfig so that it works when the initial view layout is "Details" (with the old code, it required switching view layout once to work)
0
Rhett Cawood Replied
IN MVC Using Partial View Example - Is there any way to add custom context menu items and custom tabs. I have not been able to get the above to work at all.
0
Jerome Atchison Replied
@Rhett Cawood... There is an example of using Partial Views in the Examples on GitHub.... Check this link:


If you take Cem's custom JS code above and insert it after the $(document).Ready function in the "UsingPartial.cshtml", then add the event handlers to the @Model in the controller "FileManagerController.UsingPartial.cs" then run the example you will see the tabs/buttons/context menu show in the partial view...

I'm attaching the example, modified and working...
(VS 2019/ASP.Net Core 3.0 MVC) 


0
Rhett Cawood Replied
Jerome - You are the Man!!! - Thanks so much - Worked like a charm....
Sorry pushing my luck - How would I Prepend the Date e.g. 20191126 to a file by right clicking on it and then the file manager would rename the file?
0
Software Developer Replied
@Cem Alacayir  : I am trying to add custom field in the Details view layout. I have used the following code in fileManagerLoading event:
 Ext.override(fileManager, {   
         getViewColumnsConfig: function () {                
        var columns = this.callParent(arguments);                 
        columns.push({                    
        text: "Test column",                    
        dataIndex: "name",                    
        tdCls: "x-item-value",                   
        renderer: function (value, meta, record) {
                        //you can use the name value as an id to                          //get your own corresponding value here                            //e.g if you have an object customValues                             //with file names as key, you can retrieve                           //and return customValues[record.data.name]                       
         return record.data.name;              
              }       
         });             
        return columns;       
     }  
    });   
 }
But ,renderer function is not working. I want to pick the value of 'documentBelongsTo' field based on the 'Name' field in the custom column. How to achieve this?

The above code always picks the value according to the 'dataIndex' irrespective of code written in renderer secton.

0
Cem Alacayir Replied
Employee Post Marked As Answer
For future reference, here is updated example code for recent versions of FileUltimate (also added more details in comments):

In your page HTML (inside <head> tag), put this JS event handler:

<head> 
  <script type="text/javascript">

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

            //Creating a context menu item
            Ext.override(fileManager, {
                createViewItemContextMenu: function () {
                    var me = this;

                    var menu = this.callParent();
                    menu.add([// or menu.insert(0, [
                        {
                            text: "My menu item",
                            handler: function () {

                                var selectedItem = me.contextMenuSelection;

                                alert(
                                    "Clicked my menu item! Context menu was opened for this item:\n"
                                    + selectedItem.data.name
                                );

                            }
                        }
                    ]);
                    return menu;
                }
            });

            //Adding a column for "Details" view layout
            Ext.override(fileManager, {
                getViewColumnsConfig: function () {
                    var columns = this.callParent(arguments);

                    columns.push({
                        text: "My Column",
                        dataIndex: "name", //the field to use for the column (there are other fields like "itemType", "extension" etc.)
                        width: 200,
                        isToolTipValue: true,
                        formatterFn: function (value, record) {
                            //the function will receive the value for chosen field ("name" in this example)

                            /*
                            you can use the name field as an id to 
                            get your own corresponding value
                            e.g if you have an object customValues 
                            with file names as key, you can retrieve
                            and return it here:

                            var customValues = {
                                "File1.txt": "Custom value for File1.txt",
                                "File2.doc": "this custom value different"
                            }
                           
                            return customValues[record.data.name];
                            */

                            return "Custom value for " + value;
                        }
                    });

                    return columns;
                }
            });

            //Creating buttons, tabs, groups in ribbon (top toolbar)
            Ext.override(fileManager, {
                createRibbon: function () {
                    var me = this;
                    var ribbon = this.callParent();

                    //Creating a new group with a button in "Home" tab
                    var homeTab = ribbon.down("#homeTab");
                    //or find tab with index
                    //var homeTab = ribbon.items.getAt(0);
                    ribbon.insertGroup(homeTab, homeTab.items.getCount(),
                        {
                            title: "My Group",
                            layout: "vbox",
                            items: [
                                {
                                    text: "My Button",
                                    iconCls: "", //css class for image
                                    icon: "", //or url to the image
                                    scale: "small", //or medium or large
                                    handler: function () {

                                        var selectedItems = me.viewSelection;
                                        var info = Ext.Array.map(selectedItems, function (item) { return item.data.name; });
                                        //or use all fields not just name
                                        //var info = Ext.Array.map(selectedItems, function (item) { return item.data; });

                                        //Pretty print the selected items
                                        var json = JSON.stringify(info, null, 2);

                                        alert(
                                            "Clicked my button! These items were selected:\n"
                                            + json
                                        );

                                    }
                                }
                            ]
                        }
                    );

                    //Creating a new tab with new group with a button
                    ribbon.addTab({
                        title: "My Tab",
                        items: [
                            {
                                title: "My Group 2",
                                items: [
                                    {
                                        text: "My Button 2",
                                        iconCls: "", //css class for image
                                        icon: "", //or url to the image
                                        scale: "small", //or medium or large
                                        handler: function () {

                                            var firstSelectedItem = me.viewSelection[0];

                                            me.createChildWindow({
                                                childWindowId: "MyWindow" + firstSelectedItem.data.name, //This can be used to open the existing window e.g. for same folder/item
                                                title: "My Window for " + firstSelectedItem.data.name,
                                                width: 800,
                                                height: 600,
                                                items: {
                                                    xclass: "GleamTech.UI.IFrame",
                                                    //you can put your custom page url here
                                                    //src: "/my-url-here"
                                                    //or use srcDoc to embed inline html in frame
                                                    srcDoc: "<h1>Welcome to frame content for " + firstSelectedItem.data.name + "</h1>"
                                                }
                                            });

                                        }
                                    }
                                ]
                            }
                        ]
                    });

                    return ribbon;
                }
            });
        }
      
  </script>
</head> 

Then in your controller or in code behind, register the JS (client) event:

fileManager.ClientEvents.Loading = "fileManagerLoading";

Or in markup for ASP.NET Web Forms, you can register it like this:

<body>

    <GleamTech:FileManager id="fileManager" runat="server">
        <ClientEvents Loading="fileManagerLoading"
    </GleamTech:FileManagerControl>  
    
</body>

@Software Developer, see the updated code for the answer to your problem.

Reply to Thread