0

I have added Thumbnail images to the Sales Order lines grid. This will show the Image that is attached to the inventory item. You can see this customization here: Acumatica - Adding Image in Sales Order Line However, the images that are currently in the customer's system are very large. So a line for the Sales Order is very large. Is there a way I can cut this down in height but still have the whole image shown? Maybe a contain on the ThumbnailURL cell? I have not worked with CSS Styles for grids before in Acumatica so, I'm not sure where to start or if that is even the right direction. Any help would be appreciated.

Dane
  • 163
  • 14

2 Answers2

4

In the customization add javascript element to the form. Note this is tricky and sometimes it will not show up until you save. Then add the following script to its source.

var css = '.GridRow > img { width: 40px; height: 40px; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Customization screen

Then all the images in the grid will be scaled to 40x40 px.

Final result

You can download the example here

Viktor
  • 66
  • 3
  • When I add and hit generate customization script, it changes to a `px:Control` then throw's an error saying `px:Control` is not a thing. – Dane May 21 '18 at 13:04
  • Yeah, I had to modify an answer to use javascript to add the css. In the first version of the answer i just modified the page but it does not work on SO. – Viktor May 21 '18 at 15:46
  • That worked perfectly. Even though I just added the project XML into my XML. As it wouldn't let me put a Javascript control in between Tabs and Dialogs. Never the less it works great! – Dane May 21 '18 at 17:32
  • Hello Viktor, Right now we didn’t have any pagination, because of the below issue we are facing. If set the pagination and if we have 20 line items, we could able to see 5 item in gird by default but when go to fifth record and click on down arrow the cursor is showing us the 6th line item which is hiding below somehow, i think technically it should take us to the next page, which is happening correctly in other girds in which we doesn’t show any images. – John Jun 16 '22 at 11:01
0

@John it sounds like the grid is not reinitializing itself to handle the pagination correctly. I'm guessing maybe because on first load of the data, the records (without the images loaded in yet) would fit in the viewing pane for the grid, but then the images load in and push the height up for each record causing it to go below the fold. I don't know the solution, but if there was either a way to set the height of the row prior to acumatica adjusting/building the table OR to reinitialize based on the row height after image load, that could perhaps be a solution. the latter approach may end up causing issues with the pagination and performance because it would load and then reinitialize causing inconsistent UX around the pagination. So I suspect that the former approach is the better solution. Perhaps @Viktor might have some insight for how to resolve

Cory
  • 305
  • 1
  • 8