Ribbon Enabled But Minimized

[syntax]

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]

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(); 

} 

 

 

JSPlayground Sample: http://jsplayground.syncfusion.com/igtxs0mn 

 

Regards, 

Silambarasan 

[syntax]

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]

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]

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]

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]

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