Ribbon Collapse

Ribbon Collapse

Posted by: sathwik.kotla on 23 November 2022, 10:53 pm EST

• 

  sathwik.kotla

  • Post Options:
  • Link
    Copy

  Posted 23 November 2022, 10:53 pm EST - Updated 23 November 2022, 10:58 pm EST

  I want to override the functionality of the ribbon collapse I want to readjust my screen and viewport whenever the ribbon is collapsed.
  
  

  

  1919×196 55.5 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 27 November 2022, 9:23 pm EST

  Hi,

  To overwrite the “ribbon collapse”, please refer to the following line of code:

  let designerEl = document.getElementById("designer-container");
  // Get the collapse Ribbon button
  let collapseRibbonBtn = designerEl.getElementsByClassName("collapsedRibbon").item(0);
  collapseRibbonBtn.addEventListener("click", function(ev) {
      ev.stopPropagation();
      designer.setData('isRibbonCollapse', !designer.getData("isRibbonCollapse"));
      console.log("Ribbon Collapsed");
      // Execute your custom commands
  }, true);

  Sample: https://jscodemine.grapecity.com/share/F84QT3RMSkG8gEdzM4V3jA/

  References:

  setData method: https://www.grapecity.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer#setdata

  getData method: https://www.grapecity.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer#getdata

  Regards,

  Ankit