We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Programmatically pinning the ribbon

Thread ID:

Created:

Updated:

Platform:

Replies:

125601 Aug 26,2016 09:58 PM UTC Aug 30,2016 12:50 PM UTC JavaScript 3
loading
Tags: ejRibbon
Gabriel Axel
Asked On August 26, 2016 09:58 PM UTC

Greetings,

I'm trying to programmatically expand and collapse the ribbon. I successfully collapse it with the collapse() method and expand it by calling the expand() method and setting selectedItemIndex to one of the tabs, but that opens the ribbon in an unpinned state. Is there a way to programmatically expand and pin the ribbon?

Thanks.

Kavitha Narayanan [Syncfusion]
Replied On August 29, 2016 12:35 PM UTC

Hi Gabriel,   
   
Thank you for contacting Syncfusion support.   
   
Query: Is there a way to programmatically expand and pin the ribbon?   
   
We can achieve your requirement “Expand and pin the ribbon” through expand client side event with the help of below code.   
   
   
expand:"expandRibbon"   
   
function expandRibbon(args)   
                  {   
                $("#defaultRibbon").find(".e-expandcollapse span").removeClass("e-ribbonpinicon").addClass("e-rarrowup-2x");//to change the Ribbon state to pin   
                  }   
   
  
   
Here we can pin the ribbon control through external button click event.   
   
   
<input type="button" value="click to expand" onclick="expandClk(this)">   
   
function expandClk(args)   
                  {   
                var ribbonObj=$("#defaultRibbon").data("ejRibbon");   
                  ribbonObj.collapse();//To collapse the Ribbon   
                  ribbonObj.expand();//To expand the Ribbon   
                  $("#defaultRibbon").ejRibbon({selectedItemIndex:2});//To set active tab             }   
   
  
   
Please refer to the below sample for more information.   
   
   
Regards,   
Kavitha N. 

Gabriel Axel
Replied On August 29, 2016 02:42 PM UTC

Changing the classes doesn't really pin the ribbon - it does change the pin icon to look as if it's pinned, but clicking outside it still collapses it. I was able to get the behaviour I wanted by calling $('#Ribbon_togglebutton.e-expanded.e-ribbonpin").click() after expand() . It's good enough for me, but it would be nice to have a direct API for this.

Another thing is that I want to start with the ribbon in a collapsed state. This is the spreadsheet's ribbon, so on the spreadsheet's "load" event I call its ribbon's collapse() method, but the ribbon is initially expanded and immediately collapses. Is there a clean way to really have the ribbon initially collapsed? I though about initially hiding part of the ribbon with CSS, but the ribbon's expand/collapse state affects the entire spreadsheet so it didn't work as expected.

Thanks.

Kavitha Narayanan [Syncfusion]
Replied On August 30, 2016 12:50 PM UTC

Hi Gabriel, 
 
Query #: It's good enough for me, but it would be nice to have a direct API for this. 
 
We don’t have any separate API method for pin the Ribbon, which can be customized though user end.   
 
Query#:  Is there a clean way to really have the ribbon initially collapsed? I thought about initially hiding part of the ribbon with CSS, but the ribbon's expand/collapse state affects the entire spreadsheet so it didn't work as expected. 
 
We suggest to use refreshSpreadsheet() method after hide ribbon content with CSS in loadComplete client side event. Please refer the below code examples.  
 
 
 $(function () {  
     $("#Spreadsheet").ejSpreadsheet({  
        ..//  
        loadComplete: 'onloadComplete'  
            });  
        });  
        function onloadComplete(args) {  
            var ribElem = $("#Spreadsheet_Ribbon"), ribObj, activeContent;  
            ribObj = $("#Spreadsheet_Ribbon").data("ejRibbon"), tabObj = $("#Spreadsheet_Ribbon").data("ejTab");  
            activeContent = ribElem.find('.e-active-content');  
            activeContent.hide();  
            ribElem.find('li.e-active').removeClass("e-active").addClass("e-collapseactive e-select");  
            tabObj.option({ selectedItemIndex: 0 });  
            tabObj.model.selectedItemIndex = 0;  
            $("#Spreadsheet_Ribbon_togglebutton").removeClass("e-expanded").addClass("e-collapsed");  
            this.refreshSpreadsheet();  
        }  
 
Please refer the below sample with these code examples.  
 
 
 
If you are not satisfied with the above workaround solution, then please let us know whether you are using collapse () method or you are expecting  
property of collapsed state to set the Ribbon with collapsed state at initial loading.  
 
Regards, 
Kavitha N. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;