Inserting pictures into cells

Inserting pictures into cells

Posted by: baloghbencefacebook on 12 April 2021, 9:07 pm EST

• 

  baloghbencefacebook

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 April 2021, 9:07 pm EST

  is it possible to insert picture into one cell and show the pciture as the new value of the cell?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 13 April 2021, 10:43 pm EST

  Hi,

  You may use backgroundImage property of style class for the required functionality. Please refer to the following code snippet and let us know if you face any issues.

  
  var style = new GC.Spread.Sheets.Style();
  style.backgroundImage = "./css/images/quarter1.png";// url
  activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
  
  

  Style Demo: https://www.grapecity.com/spreadjs/demos/features/cells/basic-style#demo_source_name

  backgroundImage: https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Style~backgroundImage.html

  Regards
  
  Avinash

• 

  baloghbencefacebook

  • Post Options:
  • Link
    Copy

  Posted 14 April 2021, 9:45 pm EST

  realy nice, but the problem is that the text of the cell remains visible, so its quiet ugly.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 15 April 2021, 2:08 pm EST

  Hi,

  This is expectd behaviour since the background image does not prevent cell value. What you could is set the null value using setValue method.

  //after adding style
  sheet.setValue(row, col, null)
  

  setValue: https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Worksheet~setValue.html

  Regards
  
  Avinash

• 

  dave.welch

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 10:35 pm EST

  Hi,
  
  Suppose I upload a new image on cell from my local system, how can I get the URL of the image added - so that I can save the URL in the image?
  
  I am trying to upload using Menu-> Insert-> Picture.
  
  I want the image to be in 1 cell only as of now.
  
  Please suggest.

  Thanks,
  
  Veerendra.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2023, 3:12 pm EST - Updated 11 October 2023, 3:17 pm EST

  Hi Veerendra,

  You could override the “insertPicture” command, to check if the picture is inserted. You could get the “ShapeChanged” event to get the newly added image. You could get the image’s url using the “src()” method on the shape. Later, you could set the style with background image as the shape’s src on the Cell.

  Kindly refer to the following code snippet and the sample:

  // Get the InsertPicture Command
  var insertPictureCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertPicture);
  
  // Get the Default Config
  let config = GC.Spread.Sheets.Designer.DefaultConfig;
  
  let isShapeInserted = false;
  
  config.commandMap = {
      // Override the insertPicture command
      "insertPicture": {
          execute: function (context) {
              insertPictureCommand.execute.apply(this, arguments);
              isShapeInserted = true;
          }
      }
  }
  
  designer.setConfig(config);
  
  spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (sender, args) {
      if (isShapeInserted && args.propertyName === "originalSize") {
          const style = new GC.Spread.Sheets.Style();
          // Set the Background Image
          style.backgroundImage = args.shape.src();
          // Set the style
          args.sheet.setStyle(0, 0, style, GC.Spread.Sheets.SheetArea.viewport);
          // Remove the cell value
          args.sheet.setValue(0, 0, null);
          // Remove the shape from the sheet
          args.sheet.shapes.remove(args.shape.name());
      }
      isShapeInserted = false;
  });

  Sample: https://jscodemine.grapecity.com/share/1HLl3-Xy6ky_x5hFMmI2wg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  ShapeChanged Event: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Events#shapechanged

  insertPicture command: https://www.grapecity.com/spreadjs/api/v15/designer/classes/GC.Spread.Sheets.Designer.CommandNames#insertpicture

  ShapeCollection Class: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Shapes.ShapeCollection#class-shapecollection

  Regards,

  Ankit

  

• 

  dave.welch

  • Post Options:
  • Link
    Copy

  Posted 11 October 2023, 9:52 pm EST

  Hi Chandan,
  
  I added the changes as you mentioned. However, now the Picture button in INSERT menu seems to be disabled. Nothing happens when I click that.
  
  I have created a sample example for you in the same app as we discussed over the call.

  Can you please help?
  
  THanks,
  
  Veerendra.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 12 October 2023, 5:47 pm EST

  Hi Veerendra,

  I have created a separate case at our private portal for your query. The case has been assigned to you. You will find the case by visiting https://www.grapecity.com/my-account/my-support.

  The new case ID is: CAS-44299-T5X2H6. Further, the discussion related to the case will be shared on the mentioned case only.

  Regards,

  Ankit