How to customise menubar in Aspose Cells gridJs

Aspose.Cells Product Family
, ,
1

I would like to customize the menubar to my preferences. I’m referring to the top menu with the options “File, Home, Insert, Format, Review.”

menuaspose.jpg1188×190 29.9 KB
menuaspose.jpg (29,9 KB)

I want to keep only the first category “File” visible and hide all options within “File” except for “Download As XLSX.” Additionally, I would like to hide the icon next to the menu and the file name above the menu.

The documentation I found is very sparse. I only found an option to show/hide the entire menu: Working with GridJs Client Side|Documentation using the command xs.sheet.menubar.hide().

Is there a way to customize this menu?

2

@klepprime01
in loadoption:
set showFileName:false,

         const option = {
                updateMode: 'server',
                updateUrl: '/GridJs2/UpdateCell',
                showToolbar: true,
                 //do you want to edit or readonly (read ) for the spreadsheet
                mode: edit,
                 //do not want to show filename
                showFileName:false,

Then, customize the menus, though it is not very elegant.
please try this code:


//assume your div id is 'gridjs-demo-uid', after gridjs is loaded call this function
  function customMenus()
        {   //hide toolbar
            document.querySelector("#gridjs-demo-uid > div > div.x-spreadsheet-toolbar").style.display = "none";
            //popup menus
            var parent = document.querySelector("#gridjs-demo-uid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
            var childs = parent.childNodes;

            // keep the first one ->File menu  only
            for (var i = childs.length - 1; i > 0; i--)
            {//remove other nodes
                parent.removeChild(childs[i]);
            }
            //x-spreadsheet-toolbar-btn->x-spreadsheet-dropdown->x-spreadsheet-dropdown-content
            var dropdownparent = childs[0].childNodes[0].childNodes[1];
            var menuitems = dropdownparent.childNodes;
            for (var i = menuitems.length - 1; i >=0; i--)
            {//remove other nodes
                if (menuitems[i].textContent !== 'Download As XLSX')
                {
                    dropdownparent.removeChild(menuitems[i]);
                }
            }

        }