Display SVG images in a RadGrid Column

[Jerry]

 

I would like to store some small SVG image files along with other information about each file as individual records in a SQL Database Table. I have not used SVG files before but I must use then as they are what customer uses/wants.

What SQL data type would I use in a table field where I could upload, download and view SVG files in and from a RadGrid.

What type of Grid column could I use to update, download and view each image in the grid view?

Really not here to discuss pro and con of storing SVG file in a SQL table field.  

I am here to ask for help and example if at all possible to store and view SVG images in a SQL Table record and view in a RadGrid Column.

 Is it doable?  I am using SQLDataSource control on ASP.NET content page as the source for the RadGrid.

 

Thank you very much for any help you can provide.

 

 

[Konstantin Dikov]

Hello Jerry,

For uploading the SVG files you can use GridTemplateColumn with RadAsyncUpload control in the EditItemTemplate, but even if you store the control in your database as a binary (image or varbinary(max) data type), when you try to load the data you will not be able to convert that data back to image and display it within the grid - neither in Image control, nor in RadBinaryImage (unless you covert the data manually to supported image type). With that in mind, I would personally recommend that you store the files directly on the server and save only the URL address of the uploaded images to your database.

Another option, that I would personally recommend is to use GridBinaryImageColumn, but convert the SVG to a supported by RadBinaryImage control image type (like png, jpg, etc.). You can also take a look at the following online demo, which could also prove helpful:

• http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandradasyncupload/defaultcs.aspx?product=grid

Regards,
Konstantin Dikov
Telerik

[Jerry]

Can you recommend an event to use to convert the SVG to a supported file type (OnDataBinding of the RadBinaryImage or?).

I have had success in uploading and downloading the SVG's as well as other types like PNG to a Varbinary(Max) field.

I just cannot seem to figure out how to convert the SVG Bindary data to a supported type in the Grid column Template with RadBinaryImage.

Even better could someone provide an example of how to do this as I am a novice and learning? I have really tried to figure this out and it is beating me! Any help appreciated.

 I just need help to convert the binary SVG data from a SQL var-binary(MAX) field to a supported type and feed it to the RadBinaryImage of each record.

1. Read Data being bound to Template Column

2. IF SVG Data convert to PNG or BMP?

3. Feed converted data file to RadBinaryImage control in ItemTemplate.

 

In your 2nd example I did see this code:

 UploadedFile file = radAsyncUpload.UploadedFiles[0];
 byte[] fileData = new byte[file.InputStream.Length];
 file.InputStream.Read(fileData, 0, (int)file.InputStream.Length);
 cmd.Parameters.Add("@Data", SqlDbType.Image);
 cmd.Parameters["@Data"].Value = fileData;

This code is helpful to my understanding use of byte and stream, but I need the byte data from the datasource not from the up-loader to achieve viewing it in RadBinaryImage control in a RadGrid I believe? So what Event to use to convert and how do I Get the byte data for each record?

 I prefer doing this in C# code behind if possible.

 Whew...

 

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            var uploadedFilesCount = 0;

            var isEditMode;

            function validateRadUpload(source, e)

            {

                // When the RadGrid is in Edit mode the user is not obliged to upload file.

                if (isEditMode == null || isEditMode == undefined)

                {

                    e.IsValid = false;



                    if (uploadedFilesCount > 0)

                    {

                        e.IsValid = true;

                    }

                }

                isEditMode = null;

            }



            function OnClientFileUploaded(sender, eventArgs)

            {

                uploadedFilesCount++;

            }

        </script>

    </telerik:RadCodeBlock>
    <telerik:RadGrid ID="RadGrid1"
        runat="server" CellSpacing="-1"
        DataSourceID="SqlDataSource1"
        AllowPaging="True"
        Width="100%"
        AutoGenerateColumns="False"
        AllowSorting="True"
        PageSize="3"
        AllowAutomaticInserts="true"
        AllowAutomaticUpdates="true"
        OnItemCommand="RadGrid1_ItemCommand"
        GroupPanelPosition="Top"
        AutoGenerateEditColumn="True"
        AutoGenerateDeleteColumn="True" AllowAutomaticDeletes="True">

        <MasterTableView DataKeyNames="ID" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CommandItemDisplay="Top">
            <Columns>

                <telerik:GridBoundColumn DataField="ID" ReadOnly="True" HeaderText="ID" SortExpression="ID" UniqueName="ID" DataType="System.Int32" FilterControlAltText="Filter ID column"></telerik:GridBoundColumn>

                <telerik:GridBoundColumn DataField="FileName" HeaderText="FileName" SortExpression="FileName" UniqueName="FileName" FilterControlAltText="Filter FileName column"></telerik:GridBoundColumn>

                <telerik:GridAttachmentColumn SortExpression="FileName" UploadControlType="RadAsyncUpload" DataSourceID="SqlDataSource2" MaxFileSize="1048576"
                    EditFormHeaderTextFormat="Upload File:" HeaderText="Download" AttachmentDataField="SVGFile"
                    AttachmentKeyFields="ID" FileNameTextField="FileName" DataTextField="FileName"
                    UniqueName="AttachmentColumn">
                </telerik:GridAttachmentColumn>
                <telerik:GridTemplateColumn DataField="SVGFile" HeaderText="Image" UniqueName="SVGFile" >

                        <ItemTemplate >
                      <telerik:RadBinaryImage
                                runat="server"
                                ID="RadBinaryImage1"
                                DataValue='<%# Eval("SVGFile") %>'
                                AutoAdjustImageControlSize="false" Height="80px" Width="80px"
                                VisibleWithoutSource="false"></telerik:RadBinaryImage>

                            <asp:Image ID="Image1" runat="server" />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1"
                                AllowedFileExtensions="jpg,jpeg,png,gif,svg" MaxFileSize="1048576" OnClientFileDropped="" OnClientFileSelected="" OnClientFilesSelected="">
                            </telerik:RadAsyncUpload>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:ConnectionString %>'
        OnInserted="SqlDataSource2_Inserted" OnUpdated="SqlDataSource2_Updated"
        DeleteCommand="DELETE FROM [TestSVG] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [TestSVG] ([SVGFile], [FileName]) VALUES (@SVGFile, @FileName) SET @InsertedID = SCOPE_IDENTITY()"
        SelectCommand="SELECT [SVGFile], [ID], [FileName] FROM [TestSVG]"
        UpdateCommand="UPDATE [TestSVG] SET [SVGFile] = @SVGFile, [FileName] = @FileName WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="SVGFile" Type="Byte"></asp:Parameter>
            <asp:Parameter Name="FileName" Type="String"></asp:Parameter>
            <asp:Parameter Name="InsertedID" Type="Int32" Direction="Output"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="SVGFile" Type="Byte"></asp:Parameter>
            <asp:Parameter Name="FileName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString='<%$ ConnectionStrings:ConnectionString %>' SelectCommand="SELECT  [ID], [SVGFile] FROM [TestSVG] WHERE [ID] = @ID">
        <SelectParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </SelectParameters>

    </asp:SqlDataSource>
</asp:Content>

public partial class test2aspx : System.Web.UI.Page
{

        int fileId;

        byte[] fileData;

        string fileName;


        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {

            }
            if (!Page.IsPostBack)
            {

                RadGrid1.EditIndexes.Add(0);



            }
        }
        protected void SqlDataSource2_Inserted(object sender, SqlDataSourceStatusEventArgs e)
        {

            fileId = (int)e.Command.Parameters["@InsertedID"].Value;

            UpdateFileData("UPDATE [TestSvg] SET [SVGFile] = @SVGFile, [FileName] = @FileName WHERE [ID] = @ID", fileId);

        }



        protected void SqlDataSource2_Updated(object sender, SqlDataSourceStatusEventArgs e)
        {

            UpdateFileData("UPDATE [TestSvg] SET [SVGFile] = @SVGFile, [FileName] = @FileName WHERE [ID] = @ID", fileId);

        }
        private void UpdateFileData(string command, int fileId)
        {

            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["IGWiringConnectionString"].ConnectionString))
            {

                using (SqlCommand comm = new SqlCommand(command, conn))
                {

                    if (fileData != null && fileData.Length > 0)
                    {

                        comm.Parameters.Add(new SqlParameter("ID", fileId));

                        comm.Parameters.Add(new SqlParameter("SVGFile", fileData));

                        comm.Parameters.Add(new SqlParameter("FileName", fileName));

                        conn.Open();

                        comm.ExecuteNonQuery();

                    }

                }

            }

        }

        //   protected void testingSVG()
        //   {

        //   }
        protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
        {

            if (e.CommandName == RadGrid.UpdateCommandName ||

                e.CommandName == RadGrid.PerformInsertCommandName)
            {

                GridEditableItem item = e.Item as GridEditableItem;



                if (!(item is GridEditFormInsertItem))
                {

                    fileId = (int)item.GetDataKeyValue("ID");

                }

                var asyncUpload = item["AttachmentColumn"].Controls[0] as RadAsyncUpload;

                if (asyncUpload != null && asyncUpload.UploadedFiles.Count > 0)
                {

                    var uploadedFile = asyncUpload.UploadedFiles[0];

                    fileData = new byte[uploadedFile.ContentLength];

                    fileName = uploadedFile.FileName;

                    using (Stream str = uploadedFile.InputStream)
                    {

                        str.Read(fileData, 0, (int)uploadedFile.ContentLength);

                    }

                }

            }
        }
    }

 

[Konstantin Dikov]

Hello Jerry,

The easiest way for handling this requirement would be to call your custom converting function as shown bellow:

<telerik:RadBinaryImage
    runat="server"
    ID="RadBinaryImage1"
    DataValue='<%# ConvertImageData(Eval("SVGFile") as byte[]) %>'
    ...

And in the code-behind:

public byte[] ConvertImageData(byte[] originalData)
{
    //convert to supported type
    //....
    return convertedData;
}

Best Regards,
Konstantin Dikov
Telerik