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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Spreadsheet Image Picker in Ribbon

Thread ID:

Created:

Updated:

Platform:

Replies:

130106 Apr 21,2017 06:43 PM UTC Apr 27,2017 07:09 AM UTC ASP.NET Web Forms 7
loading
Tags: Spreadsheet
Don Mason
Asked On April 21, 2017 06:43 PM UTC

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 [Syncfusion]
Replied On April 24, 2017 07:35 AM UTC

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. 
 
 
UG Link: 
 
 
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
Replied On April 25, 2017 12:05 AM UTC

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 [Syncfusion]
Replied On April 25, 2017 06:36 AM UTC

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. 
 
UG Link:  
 
Also, we would like to let you know that the Ribbon control is custom to the Spreadsheet control. 
 
Regards, 
Shanmugaraja K 


Don Mason
Replied On April 25, 2017 04:50 PM UTC

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 [Syncfusion]
Replied On April 26, 2017 12:21 PM UTC

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.  
 
 
Regards, 
Shanmugaraja K 


Don Mason
Replied On April 26, 2017 05:24 PM UTC

Understood.

Thank You


Shanmugaraja K [Syncfusion]
Replied On April 27, 2017 07:09 AM UTC

Hi Don Mason, 
 
You are welcome and follow that incident for further updates. 
 
Regards, 
Shanmugaraja K 


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

;