Essential JS1 - Ribbon (expand button)

[Bai Yuan]

Hi,

As in the picture above, there is a collapse button at the bottom right corner.

However, there is no expand button after I collapsed the ribbon (shown in the bottom picture).

I wish to have an expand button at the upper right corner. Is there any way to do it?

Thanks in advance!

[Keerthana Rajendran]

Hi Bai, 

Thanks for contacting Syncfusion support. 

Currently we are validating your requirement with ejRibbon at our end and we will update you further details on May 5, 2021. 

Regards, 

Keerthana.  

[Sharon Sanchez Selvaraj]

Hi Bai, 

 

We have created a Ribbon sample based on your requirement. We have rendered the expand icon in the header, during the collapse event and expanded the Ribbon header on icon click by invoking expand method. And during the expand event, we have removed the expand icon from the header.  

 

Please refer to the code snippet below. 

 

<ej-ribbon css-class="custom" id="defaultRibbon" width="100%" allow-resizing="true" expand="expand" collapse="collapse"> 

……… 

……… 

</ej-ribbon> 

 

 

<script type="text/javascript"> 

 

    function collapse(args) { 

        // Get the header element of ribbon 

        var header = $(".custom .e-box.e-header")[0]; 

        var ele = document.createElement("SPAN"); 

        header.appendChild(ele); 

        ele.style.marginLeft = 'auto'; 

        ele.classList.add('e-icon'); 

        ele.classList.add('e-arrow-sans-down'); 

        ele.id = "expandIcon"; 

        $('#expandIcon').click(function () { 

            var ribbonObj = $("#defaultRibbon").data("ejRibbon"); 

            // Expand the header on icon click 

            ribbonObj.expand(); 

        }); 

 

    } 

    function expand(args) { 

        // Remove the expand icon once expanded 

        $("#expandIcon")[0].remove() 

    } 

</script> 

 

Refer to the sample. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/RibbonSample315885265.zip 

 

API Link: https://help.syncfusion.com/api/js/ejribbon 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S.  

[Bai Yuan]

Hi Sharon,

Thank you so much for the reply. I have run the sample project and it's working well.

However, when I run in my project, the ribbonObj become undefined object as in the picture below:

I wonder if there is a way to solve this problem. Thanks in advance!

Best Regards,

Bai Yuan

[Keerthana Rajendran]

Hi Bai, 

 

Based on the screenshot, we suspect that proper id of Ribbon control is not updated in your sample while fetching Ribbon instance during collapse event. Please refer to our shared sample for getting instance through Ribbon id and if the issue persists with your sample, kindly get back to us with your complete code snippet along with the exact product version used in your end. If possible, modify the shared sample to replicate the issue at our end which will help us to assist you promptly.  

UG Link: https://help.syncfusion.com/aspnet-core/ribbon/how-to#get-ribbon-object  

Regards, 

Keerthana.  

[Bai Yuan]

Hi,

I'm using both Ej1 and Ej2 in my project. The product version is 18.2.0.48.

My jquery version is "/jquery-3.3.1.min.js".

I have copied my ribbon view to your sample project and it worked. However, it still did not work in my project.

I have added two console log on defaultRibbon and ribbonObj as followed.

function collapse(args) {

        // Get the header element of ribbon

        var header = $(".custom .e-box.e-header")[0];

        var ele = document.createElement("SPAN");

        header.appendChild(ele);

        ele.style.marginLeft = 'auto';

        ele.classList.add('e-icon');

        ele.classList.add('e-arrow-sans-down');

        ele.id = "expandIcon";

        $('#expandIcon').click(function () {

            var ribbonObj = $("#defaultRibbon").data("ejRibbon");

            console.log($("#defaultRibbon"));

            console.log(ribbonObj);

            // Expand the header on icon click

            ribbonObj.expand();

        });

}

I noticed a few differences from your sample project and my project. (left side of the picture is the sample project and right side is my project)

• There is a "context" under the defaultRibbon in the sample project but not in my project.

• There is a jQuery in my project which contains the ejRibbon but not in the sample project

Hope to get your reply soon. Thanks in advance.

[Sharon Sanchez Selvaraj]

Hi Bai, 

 

We have checked with the provided details and screenshots. We have rendered a similar sample with both EJ1 and EJ2 components. We have also checked with your provided version (18.2.0.48) and with the jQuery version 3.3.1. 

 

But we are unable to replicate the reported issue at our end. Please check with the provided sample. 

 

https://www.syncfusion.com/downloads/support/forum/165012/ze/Ribbon_Sample_F1650121310042179.zip 

 

Refer to the below screenshot. 

 

 

 

Kindly ensure with all the provided scripts and styles in the above sample and modify the sample so as to replicate your issue. This will help us to assist you promptly.  

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S.