Question

How to set Image size in the grid?

  • 15 May 2024
  • 1 reply
  • 33 views

I have created a screen for uploading bulk images using an Excel Import.

I have an action button  “Attach Image”. Using this I can able to attach images in the Grid Row files section. Once the image is attached user wants to see the image in the Grid so we assigned to the PXGridColumn. I want to align and fit image sizes in a Grid column.

This is the .aspx code:-

<px:PXGrid ID="grid" runat="server" DataSourceID="ds" Width="100%" Height="150px" SkinID="Primary" AllowAutoHide="false">
    <Levels>
      <px:PXGridLevel DataMember="BrandImages">
          <Columns>
        <px:PXGridColumn DataField="BrandName" Width="220" ></px:PXGridColumn>
        <px:PXGridColumn DataField="ImageData" Width="280" ></px:PXGridColumn>
        <px:PXGridColumn Width="700px" DataField="ImagePath" DisplayMode="Value" Type="Icon" LinkCommand="gridControl">

        </px:PXGridColumn>
          </Columns>
      </px:PXGridLevel>
    </Levels>
    <AutoSize Container="Window" Enabled="True" MinHeight="150" />
    <Mode InitNewRow="True" AllowFormEdit="True" AllowUpload="True" AllowDragRows="true" ></Mode>
    <ActionBar >
    </ActionBar>
  </px:PXGrid>

Following is the Field Selecting Event:-

 protected void TSBrandImages_ImagePath_FieldSelecting(PXCache cache, PXFieldSelectingEventArgs e)
        {

            var row = (TSBrandImages)e.Row;
            if (row == null) return;

            foreach (Guid noteId in PXNoteAttribute.GetFileNotes(cache, e.Row))
            {

                PX.SM.FileInfo fileInfo = upload1.GetFile(noteId);

                if (fileInfo != null)
                {
                    string fileExtension = System.IO.Path.GetExtension(fileInfo.Name).ToLowerInvariant();

                    if (fileExtension == ".png" || fileExtension == ".jpg" || fileExtension == ".jpeg" || fileExtension == ".gif" || fileExtension == ".bmp" || fileExtension == ".eps" || fileExtension == ".heic" || fileExtension == ".jfif" || fileExtension == ".svg" || fileExtension == ".psd")
                    {
                        e.ReturnValue = string.Concat(PXUrl.SiteUrlWithPath(), "/Frames/GetFile.ashx?fileID=", fileInfo.UID.ToString());
                        break;
                    }
                }
            }

        }
 

 

 

 

  


1 reply

Userlevel 2

Hi Shay,

I was able to get this to work by first getting the image as a byte[], resize it then converting it to a base64 URL. See my code below:
  

namespace MyNamespace
{
[PXVirtual]
[PXHidden]
public partial class ImageFile : PXBqlTable, IBqlTable
{
#region Name
[PXString(255, IsKey = true, IsUnicode = true)]
[PXUIField(DisplayName = "Name", Enabled = false, IsReadOnly = true)]
public virtual string Name { get; set; }
public abstract class name : PX.Data.BQL.BqlString.Field<name> { }
#endregion

#region Image
[PXString]
[PXUIField(DisplayName = "Image", Enabled = false, IsReadOnly = true)]
public virtual string Image
{
get
{
string mimeType;
switch (Path.GetExtension(Name).ToLower())
{
case ".jpg":
case ".jpeg":
mimeType = "image/jpeg";
break;
case ".png":
mimeType = "image/png";
break;
case ".gif":
mimeType = "image/png";
break;
default:
return "";
}
return $"data:{mimeType};base64,{Convert.ToBase64String(ResizeImageToHeight(Content, 150))}";
}
}
public abstract class image : PX.Data.BQL.BqlString.Field<image> { }
#endregion

#region Content
[PXBinary]
[PXUIField(DisplayName = "Content")]
public virtual byte[] Content { get; set; }
public abstract class content : PX.Data.BQL.BqlByteArray.Field<content> { }
#endregion

public static byte[] ResizeImageToHeight(byte[] imageBytes, int targetHeight = 150)
{
using (var inputStream = new MemoryStream(imageBytes))
{
// Load the image from the byte array
using (var originalImage = System.Drawing.Image.FromStream(inputStream))
{
// Calculate the new width while maintaining the aspect ratio
int originalWidth = originalImage.Width;
int originalHeight = originalImage.Height;
float aspectRatio = (float)originalWidth / originalHeight;
int newWidth = (int)(targetHeight * aspectRatio);

// Create a new bitmap with the target dimensions
using (var resizedImage = new Bitmap(newWidth, targetHeight))
{
// Draw the original image onto the new bitmap, resized
using (var graphics = Graphics.FromImage(resizedImage))
{
graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
graphics.DrawImage(originalImage, 0, 0, newWidth, targetHeight);
}

// Convert the resized image to a byte array
using (var outputStream = new MemoryStream())
{
resizedImage.Save(outputStream, ImageFormat.Png);
return outputStream.ToArray();
}
}
}
}
}
}
}

 

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved