Spreadsheet Image Picker in Ribbon

[Don Mason]

I have a need to present my users with an Image Picker from within the Spreadsheet Ribbon control allowing them to make "Rubber Stamp" notations on the worksheet.

The behavior would be very similar to the manner in which Charts are selected, but will instead be predefined images that represent tasks or required actions:
such as "Signature Required", "Please Review" to that effect.

Can you please provide some guidance to achieving that goal?

Thank You
Don

[Shanmugaraja K]

Hi Don Mason, 

 

Thanks for using Syncfusion products, 

 

We have checked your requirement and we can achieve this by using addTabGroup method. In this method you can set custom tab group option in Ribbon. Here, we have used this to set and change picture by clicking dropdown option. Please refer the below code example. 

 

[ASPX] 

 

 

  <ej:Spreadsheet ID="Spreadsheet1" runat="server"> 

      <ClientSideEvents LoadComplete="loadComplete" /> 

          <ScrollSettings Width="100%" Height="570" /> 

  </ej:Spreadsheet> 

 

 

 

[JS] 

 

 

            function loadComplete(args) { 

                var xlFormat = this.XLFormat, images = ["Signature", "Review"]; 

                if (!this.isImport) { 

                    this.setWidthToColumns([120, 125, 110, 130, 160, 112]); 

                    xlFormat.format({ "style": { "font-weight": "bold" } }, "A1:F1"); 

                    var ribbonGrp = { 

                        alignType: ej.Ribbon.AlignType.Rows, text: "Image Picker", content: [{ 

                            groups: [{ 

                                id: "imgPic", dropdownSettings: { 

                                    dataSource: images, 

                                    watermarkText: "Select a Image", 

                                    width: 150, 

                                    change: "onChange" 

                                } 

                            }], defaults: { type: ej.Ribbon.Type.DropDownList } 

                        }] 

                    }; 

                    this.XLRibbon.addTabGroup(6, ribbonGrp, 5); // To add the tab group in the ribbon.  

                    $("#Spreadsheet1_Ribbon").ejRibbon({ "selectedItemIndex": 6 }); 

                    this.XLRibbon.updateRibbonIcons(); 

                } 

            } 

            function onChange(args) { 

                var xlObj = $("#Spreadsheet1").data("ejSpreadsheet"), xlShape = xlObj.XLShape, pictureId = "Spreadsheet1_picture1"; 

                switch (args.text) { 

                    case "Signature": 

                        xlShape.setPicture("A1", "/Images/Signature.png", 280, 160); 

                        break; 

                    case "Review": 

                        if ($("#" + pictureId).length > 0) 

                            xlShape.changePicture(pictureId, "/Images/PleaseReview.png"); 

                        break; 

                } 

            } 

 

 

 

Also we have prepared simple sample with these code example and the same can be downloaded from the below location. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130106/ze/SyncfusionASPNETApplication1-1175234330  

 

UG Link: 

 

https://help.syncfusion.com/api/js/ejspreadsheet#methods:xlribbon-addtabgroup  

https://help.syncfusion.com/api/js/ejspreadsheet#methods:xlshape-setpicture  

https://help.syncfusion.com/api/js/ejspreadsheet#methods:xlshape-changepicture  

 

Please check the sample whether this fulfilling your requirement. If not please provide more information so that we can work on this and provide you a better solution quickly. 

 

Regards, 

Shanmugaraja K 

[Don Mason]

yes, this worked great ( no surprise) but now I have a new issue - my Save routine isn't persisting the image.
Do I need to modify my Save method to look for (inserted) images?

Thank you for the links to the API guide.
Information on the ribbon is hard to find specific to the Spreadsheet.
Is the ribbon control the same as the stand-alone control or is it custom to the Spreadsheet control?

Many Thanks !

[Shanmugaraja K]

Hi Don Mason, 

 

Thanks for your update, 

 

We would like to know about which kind of save you are using for Spreadsheet with images?  

However, you can save the Spreadsheet with the images as JSON by using saveAsJSON method and you can retrieve it by using loadFromJSON method. Please refer the below code examples. 

 

[JS] 

 

 

   <input type="button" value="Save" onclick="saveJSON()" /> 

   <input type="button" value="Load" onclick="loadJSON()" /> 

 

   <script type="text/javascript"> 

       function saveJSON() { 

           var json = $("#Spreadsheet1").data("ejSpreadsheet").saveAsJSON(); 

           localStorage.setItem("spread_json", JSON.stringify(json)); 

           alert("Spreadsheet data saved!!!"); 

       } 

       function loadJSON() { 

           var json = JSON.parse(localStorage.getItem("spread_json")); 

           $("#Spreadsheet1").data("ejSpreadsheet").loadFromJSON(json); 

       } 

   </script> 

 

 

We have modified the previously attached sample with the above code example and the same can be downloaded from the below location. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130106/ze/SyncfusionASPNETApplication1_(2)-1391089551  

UG Link:  

https://help.syncfusion.com/api/js/ejspreadsheet#methods:saveasjson  

https://help.syncfusion.com/api/js/ejspreadsheet#methods:loadfromjson  

 

Also, we would like to let you know that the Ribbon control is custom to the Spreadsheet control. 

 

Regards, 

Shanmugaraja K 

[Don Mason]

re: SaveAs
I need to be able to save this in native Excel format .xls/.xlsx with the images please.

re: Ribbon Control
The documentation you have shows declarative markup for the Ribbon items.
When used with the Spreadsheet it seems the only way to manipulate it is using the JS API.
Is this correct?

Thank You

[Shanmugaraja K]

Hi Don Mason, 

 

Thanks for your update, 

 

We have created a support incident under your account for your queries. Please log on to our support website to check for further updates.  

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents  

 

Regards, 

Shanmugaraja K 

[Don Mason]

Understood.

Thank You

[Shanmugaraja K]

Hi Don Mason, 

 

You are welcome and follow that incident for further updates. 

 

Regards, 

Shanmugaraja K