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

Ribbon Enabled But Minimized

Thread ID:

Created:

Updated:

Platform:

Replies:

132052 Aug 10,2017 06:50 AM UTC Aug 16,2017 04:36 AM UTC ASP.NET MVC 6
loading
Tags: Spreadsheet
syntax
Asked On August 10, 2017 06:50 AM UTC

Hi,

When I first render the Spreadsheet, I'd like to enable the ribbon but in a collapsed state (same as the user minimizing the ribbon). The user then can expand and pin it if s/he desires to do so. Is this possible?

Thank you in advance.

Silambarasan I [Syncfusion]
Replied On August 11, 2017 09:07 AM UTC

Hi Syntax, 
 
Thank you for using Syncfusion products. 
 
We have checked your query and your requirement ‘To enable the ribbon in a collapsed state’ has been achieved by using ‘collapse()’ client-side method from ejRibbon instance in Spreadsheet. Please refer the following code example. 
 
 
<div id="Spreadsheet"></div> 
 
$(function () { 
    $("#Spreadsheet").ejSpreadsheet({ 
        //... 
        loadComplete: "onLoadComplete" 
    }); 
}); 
 
function onLoadComplete(args) { 
    //Collapse ribbon option 
    $("#" + this._id + "_Ribbon").data("ejRibbon").collapse(); 
} 
 
 
 
Regards, 
Silambarasan 


syntax
Replied On August 12, 2017 02:28 AM UTC

Hi Silambarasan,


Thank you, but it did not work on my end. Here is what I have:

@(Html.EJ().Spreadsheet<object>("Spreadsheet")

                              .AllowEditing(true)

                              .AllowImport(true)

                              .AllowInsert(true)

                              .ColumnWidth(100)

                              .AllowResizing(true)

                              .AllowFreezing(true)

                              .AllowFormulaBar(true)

                              .ShowRibbon(true).RibbonSettings(x => x.EnableOnDemand(true))

                              .EnableContextMenu(true)

                              .ScrollSettings(scroll => { scroll.Height(580); })

                              .ExportSettings(x => x.AllowExporting(true))

                              .ImportSettings(import =>

                              {

                                  import.ImportOnLoad(Model.ExcelData != null);

                                  import.ImportMapper(Url.Action("ImportXls", "ExcelData"));

                              })

                              .ClientSideEvents(x=>x.LoadComplete("onLoadComplete"))

                              )

then I have a script:

 $(function() {

                $("#saveXls").bind("click",

                    function() {

                   function onLoadComplete(args) {

                                        $("#Spreadsheet_Ribbon").data("ejRibbon").collapse();                 }

            });

I also tried $("#" + this._id + "_Ribbon").data("ejRibbon").collapse(); 

but that did not work either. I see that your example is working. So the question is what is the difference between the MVC extension and the js plugin.

Thanks for all your help.


syntax
Replied On August 12, 2017 02:30 AM UTC

On a different note, how do you paste code with formatting in this editor? I like how your code looks, nice and formatted.



Silambarasan I [Syncfusion]
Replied On August 14, 2017 12:33 PM UTC

Hi Syntax, 
 
Thanks for your update. 
 
Query #1 “Thank you, but it did not work on my end. Here is what I have:…. I see that your example is working. So the question is what is the difference between the MVC extension and the js plugin.” 
 
We have checked with the provided code example and we can able to reproduce that the ribbon state doesn’t get collapsed. We checked further and found that the cause of this is due to, you have defined the onLoadComplete event within the document.ready() function since the function is unavailable in window scope.  Also, we have found that you have added the onLoadComplete function inside the click function of #saveXls element. So, could you please ensure the following cases in your end. 
 
1. Defined function for the ‘LoadComplete’ event should be available within window scope
 
2. Function for this event should be defined outside of the document.ready() function since it becomes undefined while on event trigger. 
We have modified the provided code example to achieve your requirement. 
 
@(Html.EJ().Spreadsheet<object>("Spreadsheet") 
//... 
.ClientSideEvents(x => x.LoadComplete("onLoadComplete")) 
) 
 
 
<script type="text/javascript"> 
 
    //$(function () { 
 
    //    $("#saveXls").bind("click", function () { 
    //        function onLoadComplete(args) { 
    //            $("#Spreadsheet_Ribbon").data("ejRibbon").collapse(); 
    //        } 
    //    }); 
 
    //}); 
 
    //onLoadComplete function should be defined outside of document.ready function & it should be available in window scope. 
    function onLoadComplete(args) { 
        $("#Spreadsheet_Ribbon").data("ejRibbon").collapse(); 
    } 
 
</script> 
 
 
Could you please ensure the above information and get back to us with issue reproducible sample if the issue still persists? 
 
Query #2 “On a different note, how do you paste code with formatting in this editor? I like how your code looks, nice and formatted.” 
 
Please follow below steps to formatting codes.   
 
  1. Open MS word document or Outlook, then edit code Which format you want to paste.
  2. Copy the code from Visual studio and paste in word file or outlook.
  3. Then copy the code from MS word and past it into our text editor. Please find below screenshot.
 
  
 
Note:   
  
If you directly copy and paste from Visual studio it’s will not format.   
 
 
Regards, 
Silambarasan 


syntax
Replied On August 15, 2017 09:08 AM UTC

Thank you for the information. It worked beautifully. The key was this;

//onLoadComplete function should be defined outside of document.ready function & it should be available in window scope. 

Thank you for the formatting tip too.


Silambarasan I [Syncfusion]
Replied On August 16, 2017 04:36 AM UTC

Hi Syntax, 
 
Thanks for your update.  We are happy to hear that your issue has been resolved. 
Kindly get back to us if you need any further assistance. 
 
Regards, 
Silambarasan 


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

;