How to disable drag option on inserted image to the cell

[Jishnu Vijayakumar]

I'm trying to create a tabular structure in Angular using the spreadsheet. In this table, I have to insert an image into the cell. This image will act as a strip structure in each cell.

But after insertion of the image could not prevent the drag option of the image.

So please help me prevent the drag option or suggest an alternative way to bind the strip to the cell other than adding an image.

[Sangeetha Priya Murugan]

Hi Jishnu,

Before we proceed further, please share the below details to proceed further.

1.Mentioned the term strip to the cell, please explain the details regarding this.

2.Screenshot or video demonstration if this requirement.

3.Why you need to prevent the image dragging, please share the details.

Could you please get back to us with above requested details, based on that we will check and provide you a better solution.

Regards,

Sangeetha M

[Jishnu Vijayakumar]

Hello,

Here I'm addressing your questions.

1) Mentioned the term strip to the cell, please explain the details regarding this.

The strip is nothing but a vertical border-like structure with 16px width and 60px height. But it is not always a stable structure, some strips are in the bent format. So cannot make this structure with a simple CSS border.

2)  Screenshot or video demonstration if this requirement. 
Sorry there is a limitation.

3)  Why you need to prevent the image dragging, please share the details.

Because that structure position is always constant, as I said earlier we are trying to create a table structure with the spreadsheet.

So I have to disable the dragging feature.

Hope you got the calrity. Please suggest a way. 

[Sangeetha Priya Murugan]

Hi Jishnu,

Your reported requirement can be achievable in our spreadsheet by using the protection support. In this you need to set the isProtected property as true in sheet directives and unlock the used range cells using lockCells method in created event as like as below.

Code Block:

  

 

 

 <ejs-spreadsheet

    #spreadsheet

    (created)="created()"

    

  >

    <e-sheets>

      <e-sheet

        name="Weekly Diet Planner"

        [showGridLines]="false"

        selectedRange="B4"

        [isProtected]="true"

        [protectSettings]="{ selectCells: true }"

      >

        .///

      </e-sheet>

    </e-sheets>

  </ejs-spreadsheet>

 

 

 created() {

.//

    let sheet = this.spreadsheetObj.getActiveSheet();

 

    var address = getRangeAddress([

      0,

      0,

      sheet.usedRange.rowIndex,

      sheet.usedRange.colIndex,

    ]);

 

    this.spreadsheetObj.lockCells(address, false);

  }

 

For your convenience, we have prepared the sample based on our suggestion. Please find the link below.

Sample Link: https://stackblitz.com/edit/angular-6pesg6?file=app.component.ts

For more details regarding this requirement, please refer the below links.

https://ej2.syncfusion.com/angular/documentation/spreadsheet/protect-sheet/#unlock-the-particular-cells-in-the-protected-sheet

https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#lockcells

Could you please check the above links and get back to us, if you need any further assistance on this.

Regards,

Sangeetha M

[Jishnu Vijayakumar]

Hello Sangeetha,

This is awesome! Thank you very much for your valuable suggestion.

Regards,

Jishnu

[Jishnu V]

Hello Sangeetha, 

Thank you for your previous help. Similarly, I have inserted the strip into the cells.

One more help is required to finish this task, 

Here I'm stating my requirement. 

The images which I have inserted into the cells as you suggested are working fine. But while scrolling horizontally through the sheet due to the frozen cells the strip image is remaining in a constant position. 

Is there any way to solve this issue? 

For your reference here I'm attaching the screen recording.

 

Reagrds, 

Jishnu

Attachment: Spreadsheetrecord_1a9ca0a3.zip

[Sangeetha Priya Murugan]

Hi Jishnu,

We have checked your reported issue by providing multiple images in the second row, and the image scrolled properly in our end. Please find the sample link below.

Sample Link: https://stackblitz.com/edit/angular-6pesg6?file=app.component.ts,app.component.html

Could you please check the above sample and replicate your issue in the above link and send back to us. Or else please share us the issue replicable sample with dummy data. Based on that we will check and provide you a better solution quickly.

Regards,

Sangeetha M

[Jishnu V]

Hello Sangeetha,

Thank you for your response. You have arranged the image the way I want in the above link. 

But that is not how exactly I want. 

So I have replicated my issue on this link. Please find it and check it out how the image is moving while scroll the table horizontally. 

https://stackblitz.com/edit/angular-6pesg6-oel6c8

Attachment: Samplesheet_57b34748.zip

[Sangeetha Priya Murugan]

Hi Jishnu,

We have checked your reported issue and we have confirmed this as defect and the fix will be available in our September 7^th, 2022 patch release, we appreciate your patience until then. You can track the status of this defect using below link from our feedback portal, 

Feedback Portal Link:
https://www.syncfusion.com/feedback/37220/image-element-is-not-positioned-properly-while-scrolling-with-the-frozen-sheets

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works re prioritization.”

Regards,

Sangeetha M

[Jishnu V]

Hello Sangeetha,

Thank you!

Regars,

Jishnu

[Sangeetha Priya Murugan]

Hi Jishnu,

As promised, we will include this fix in our September 7^th patch release. We appreciate your patience until then.

Regards,

Sangeetha M

[Sangeetha Priya Murugan]

Hi Jishnu,

We deeply regret for the inconvenience caused. 

We have fixed your reported issue, but we need to consider this fix with all other combination of features in EJ2 Spreadsheet. And need to ensure many test cases for this item. So, we have planned to include this fix in our Essential studio volume 3 release. Which is scheduled to be rolled out in end of this month. We appreciate your patience until then.

Regards,

Sangeetha M

[Jishnu Vijayakumar]

Hello Sangeetha, 

Ok fine no problem, will wait until then. Waiting for your next release.

Thanks and Regards,

Jishnu

[Sangeetha Priya Murugan]

Hi Jishnu,

Thank you for your feedback, as promised we will include this fix in our Essential studio volume 3 release. We appreciate your patience until then.

Regards,

Sangeetha M

[Vasanth Ravi]

Hi Jinshu,

Thanks for your patience.

We found that it was an limitation from our end. But, we can achieve your requirement in the sample end.  We have prepared workaround sample for your requirement on below.

Note: Remove the previously provided suggestion on the below forum.

https://www.syncfusion.com/forums/176718/how-to-disable-drag-option-on-inserted-image-to-the-cell?reply=SfZeFq

Workaround sample : https://stackblitz.com/edit/angular-6pesg6-acghbu?file=app.component.ts,app.component.html,app.component.css

In this sample, We have append the image into the each cells using beforeCellRender event. So that, image will get scroll along with while scrolling the sheet. Added customHeight to true in order to make the height to be fixed and unchangeable.

CODE BLOCK:

beforeCellRender(args: CellRenderEventArgs): void {
if (args.rowIndex === 0 && args.colIndex <= Object.keys(this.data[0]).length) {
const image: HTMLElement = this.spreadsheetObj.createElement('div', {
className: 'e-image-border e-ss-overlay',
styles: 'width: 18px; height: 60px;',
});
image.style.backgroundImage = 'url(Image URL)';
args.element.appendChild(image);
} }

generateRow(): RowModel[] {
...
...
row.push({ height: 60, customHeight: true });
...
...

}

Kindly get back to us if you need further assistance regarding.

Regards,

Vasanth R