Programmatically pinning the ribbon

[Gabriel Axel]

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]

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.   

   

Sample:  http://www.syncfusion.com/downloads/support/forum/125601/ze/sample-876721639.zip 

   

Regards,   

Kavitha N. 

[Gabriel Axel]

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]

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.  

 

Sample:  http://www.syncfusion.com/downloads/support/forum/125601/ze/Sample260855268     

 

 

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.