radGrid with image...click show full image

[SSirica]

I have a bound grid that contains an image.  Since the image is about the size of a thumbnail...I want to give the user the ability to click the image and have it displayed in full.  I figured a good way to do this would be to use a RadLightBox.  Am I barking down the right path?  Is there a better way?  

                        <telerik:RadGrid ID="rgMain" runat="server" Width="100%" AutoGenerateColumns="False">
                            <MasterTableView EditMode="PopUp" ShowHeadersWhenNoRecords="True" EnableNoRecordsTemplate="True" DataKeyNames="RaceID" CommandItemDisplay="Top">
                                <CommandItemSettings ShowRefreshButton="False" ShowAddNewRecordButton="False" />
                                <Columns>
                                    <telerik:GridBoundColumn UniqueName="RaceName" DataField="RaceName" HeaderText="Race Name"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn UniqueName="SeriesName" DataField="SeriesName" HeaderText="Series"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn UniqueName="RaceDesc" DataField="RaceDesc" HeaderText="Description"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn UniqueName="RaceDate" DataField="RaceDate" HeaderText="Date" DataFormatString="{0:MM/dd/yyyy}"></telerik:GridBoundColumn>
                                    <telerik:GridHyperLinkColumn DataNavigateUrlFields="RaceRegLink" HeaderText="Registration Link" DataTextField="RaceRegLink" Target="_blank"></telerik:GridHyperLinkColumn>
                                </Columns>
                                <DetailTables>
                                    <telerik:GridTableView Name="Members" DataKeyNames="MemberID,RaceID" ClientDataKeyNames="MemberID,RaceID" Width="100%" ShowFooter="True">
                                        <ParentTableRelation>
                                            <telerik:GridRelationFields MasterKeyField="RaceID" DetailKeyField="RaceID" />
                                        </ParentTableRelation>
                                        <NoRecordsTemplate>No records to display.</NoRecordsTemplate>
                                        <Columns>
                                            <telerik:GridTemplateColumn HeaderText="Member" UniqueName="Member">
                                                <ItemTemplate>
                                                    <telerik:RadBinaryImage ID="imgProfPic" runat="server" ImageUrl="~/images/ProfilePicBlank.jpg" Height="50px" Width="50px"
                                                        ResizeMode="Fit" DataValue='<%# IIf(Eval("ProfPic") IsNot DBNull.Value, Eval("ProfPic"), New System.Byte(-1) {})%>'
                                                        AlternateText='<%# Eval("MemberID") %>' />
                                                    <asp:Label runat="server" Text='<%# Eval("FullName") %>'></asp:Label>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn UniqueName="Division" DataField="Division" HeaderText="Division"></telerik:GridBoundColumn>
                                        </Columns>                                        
                                        <HeaderStyle Font-Bold="True" BackColor="Silver" />
                                    </telerik:GridTableView>
                                </DetailTables>                                
                                <NoRecordsTemplate>
                                    No records to display.
                                </NoRecordsTemplate>
                                <HeaderStyle Font-Bold="True" BackColor="#CCCCCC" />
                            </MasterTableView>
                        </telerik:RadGrid>

[SSirica]

OK I did some more searching around and I ended up on https://www.telerik.com/support/code-library/displaying-full-size-image-on-click-or-hover and applied it to my scenario.  It works, but I have resolution issues.    When I display the saved Db image like this it look good

<telerik:RadBinaryImage ID="imgProfPic" runat="server" ImageUrl="~/images/ProfilePicBlank.jpg" DataValue='<%# IIf(Eval("ProfPic") IsNot DBNull.Value, Eval("ProfPic"), New System.Byte(-1) {})%>' AlternateText='<%# Eval("MemberID") %>' />

but when I add 

Height="50px" Width="50px" ResizeMode="Fit"

the thumb nail looks good but the tooltip image is distorted.  

[Rumen]

Happy New Year 2024!!!

Regardless of whether RadLightBox or the other method from the codelibrary is used, ensure that the images stored in your database are of high resolution. This way, when thumbnails are clicked or hovered and images are displayed in a larger view, they will maintain clarity. 

Another approach is to separate Thumbnails from Full-Size Images: Instead of resizing a single image for both thumbnail and full-size views, consider storing two versions of each image – a high-resolution one for the lightbox and a lower-resolution one for the thumbnail. This approach will prevent the need to stretch a small image to a larger size, avoiding distortion.

If you still experience the issue, please confirm whether the RadLightBox component or a different method (like the one found in the code library) is being used. It will be also useful to share your complete page and codebehind code for review as well as to share a Fiddler Jam capture to reproduce the problem.

[SSirica]

I ended up rendering the image from an .ashx page.  It's working now.  Did not end up using the lightbox.  

[Rumen]

Thank you for the update. It's great to hear that you resolved the issue by rendering the image from an .ashx handler. This approach is quite effective for serving dynamic content like images in ASP.NET Web Forms.