Cellmaker image is getting cut from the top

Cellmaker image is getting cut from the top

Posted by: nilesh_nichal on 12 September 2023, 6:00 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 September 2023, 6:00 am EST - Updated 12 September 2023, 6:05 am EST

  Hi team,
  
  We followed the below link to create cellmaker image. But the image is getting cut for the first cell.
  
  https://www.grapecity.com/wijmo/demos/Grid/CustomCells/CellMaker/Images/angular
  
  I’ve attached a screenshot of the same

  

  773×261 42.3 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 11:13 pm EST

  Hello,

  To show the image above the columnHeader cell when hovered, you may increase the z-index of the image on hover to 2. This will make the image element appear above the columnHeader cells. Please refer to the below code snippet:

  .wj-flexgrid .wj-cell.cell-img:hover {
     z-index: 2 ;
      overflow: visible;
  }

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 21 September 2023, 2:39 am EST - Updated 21 September 2023, 2:45 am EST

  Hi,
  
  Thanks for the reply. We had one more issue,
  
  Previously image was getting cut at the header, now it is getting cut at grid level. We want the image to pop out of the grid and be completely visible.
  
  We have attached the screenshot of the same. Please could you look into it.
  
  

  

  1473×547 91.2 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 22 September 2023, 7:06 am EST

  Hello,

  Sorry, but it wouldn’t be possible due to the current design structure of FlexGrid control. The only way I could find to show the image outside the boundaries of FlexGrid is to set the overflow selector for FlexGrid and let its child elements use that overflow value by inheriting it. But this leads to a distorted grid layout.

  However, you can use Wijmo tooltip control to show the images over a tooltip when hovering over the image cells. Please refer to the sample link below:

  https://stackblitz.com/edit/angular-sypwjs?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  API link: https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 8 October 2023, 5:49 am EST

  Hi,
  
  Thanyou for the alternate solution. We had one more requirement. Could we open the image on right or left on hover for the cellmaker images implementation?. And while the image is getting opened on the right or left we would also want it to be visible in the grid cell in the form of thumbnail.
  
  Regards.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 8:31 am EST

  Hello,

  You can use the position property of the Tooltip control to set the position of the tooltip as per your requirement. Showing images on the tooltip will not remove the images from the cell so it will remain on the cell like thumbnails. Please refer to the API link below for more information:

  https://www.grapecity.com/wijmo/api/classes/wijmo.tooltip.html#position

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 9 October 2023, 9:14 am EST

  Hi,
  
  We needed this solution for cellmaker image implementation not tool tip. This is the link of cellmaker implementation https://www.grapecity.com/wijmo/demos/Grid/CustomCells/CellMaker/Images/angular

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 10 October 2023, 1:16 am EST

  Hi Nilesh,

  Sorry for the misunderstanding, but as discussed earlier, displaying popup images on hover would not be possible due to the current FlexGrid’s design structure.

  However, you can achieve similar results with a tooltip using a little CSS. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-b7asna?file=src%2Fapp%2Fapp.component.ts,src%2Fstyles.css

  You can show the tooltip image at the mouse position using the showAtMouse property of the Tooltip (as used in the above sample), or you can set a static position for the tooltip using the position property.

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 12 October 2023, 4:28 am EST

  Hi,
  
  Thanks you for the response!