Dynamically generate a hyperlink when attachment is loaded

[Felice]

Hi,
I have a radGrid with an attachment column visible only in form edit mode. The attachment is saved in a folder not in the db.
I would like to generate an hyperlink when an attachment is loaded and place it somewhere in the edit form of the record so that the user can simply click on the link and visualize the attachment.
The user may load more than one attachment so every time a new one is loaded, a new link should be generated.
How can I do something like that? I am completely lost on this one!

I think I should set the DataNavigateUrlFields of the dynamically generated attachmentcolumn to the path/filename of the new loaded/selected file. But I do not know how to get such url.
Moreover how do I generate dynamically a new column every time I load a new file pointing to such url?



Thanks

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

Forum.aspx

<telerik:RadCodeBlock ID="telerikodeBlock1" runat="server">
    <script type="text/javascript">
            $find('<%=RadAjaxManager1.ClientID %>').ajaxRequest();
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   </telerik:RadScriptManager>

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="RadGrid1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>
   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
   </telerik:RadAjaxLoadingPanel>
   <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
       OnItemDataBound="RadGrid1_ItemDataBound" OnUpdateCommand="RadGrid1_UpdateCommand">
       <MasterTableView DataKeyNames="ID">
           <Columns>
               <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID">
               </telerik:GridBoundColumn>
               <telerik:GridTemplateColumn>
                   <EditItemTemplate>
                       <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default2.aspx">Click here to see file</asp:HyperLink>
                       <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnFileUploaded="RadAsyncUpload1_FileUploaded"
                           OnClientFilesUploaded="OnClientFilesUploaded" MaxFileInputsCount="1">
                       </telerik:RadAsyncUpload>
                   </EditItemTemplate>
               </telerik:GridTemplateColumn>
               <telerik:GridEditCommandColumn>
               </telerik:GridEditCommandColumn>
           </Columns>
       </MasterTableView>
   </telerik:RadGrid>

Forum.aspx.cs

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data1 = new[] {
           new { ID = 1, Name ="Name_1"},
           new { ID = 2, Name = "Name_2"},
           new { ID = 3, Name = "Name_3"},
           new { ID = 4, Name = "Name_4"},
           new { ID = 5, Name = "Name_5"}
       };

    RadGrid1.DataSource = data1;
}




protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
    using (Stream stream = e.File.InputStream)
    {
        byte[] imgData = new byte[stream.Length];
        stream.Read(imgData, 0, imgData.Length);
        MemoryStream ms = new MemoryStream();
        ms.Write(imgData, 0, imgData.Length);
        Session["TempFiles"] = imgData;
        Session["FileName"] = e.File.FileName;
        Session["ContentType"] = e.File.ContentType;
    }
}
protected void RadGrid1_UpdateCommand(object sender, GridCommandEventArgs e)
{
    GridEditableItem item = e.Item as GridEditableItem;
    RadAsyncUpload RadAsyncUpload1 = (item.FindControl("RadAsyncUpload1") as RadAsyncUpload);
    RadAsyncUpload1.UploadedFiles[0].SaveAs(Server.MapPath("~/TempFiles/") + RadAsyncUpload1.UploadedFiles[0].FileName);
}

Default2.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    MemoryStream ms = new MemoryStream((byte[])Session["TempFiles"]);
    Response.ContentType = Convert.ToString(Session["ContentType"]);
    Response.AddHeader("content-disposition", "attachment;filename=" + Convert.ToString(Session["FileName"]));
    Response.Buffer = true;
    ms.WriteTo(Response.OutputStream);
    Response.End();
}

Thanks,
Jayesh Goyani

[Felice]

Hi Jayesh,

thanks a lot. I will try it for sure. Could you be so nice to be a little bit more verbose. What those code blocks do?
I see that the codes are belonging to one page that is Forum and another page that is Default2. Why that?

[Jayesh Goyani]

Hello,

Forum.aspx : Contains Grid

Default2.aspx : Open uploaded document

Thanks,
Jayesh Goyani

[Princy]

Hi Felice,

I guess you want to see the already saved files on the button click of a HyperLink,which are can be viewed in the edit mode.Please try the below code snippet.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
      <telerik:RadWindow ID="RadWindowDetails" runat="server">
      </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<telerik:RadGrid ID="RadGrid1"  .  .  .  .  .>
  .  .  .  .
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem edit = (GridEditableItem)e.Item;
        DirectoryInfo dir = new DirectoryInfo("path");// path of the folder where your  files are stored
        DirectoryInfo[] subDirs = dir.GetDirectories();
        FileInfo[] files = dir.GetFiles();
        foreach (FileInfo fi in files)
        {
            HyperLink lktest = new HyperLink();
            lktest.ID = "lnk" + Guid.NewGuid();
            lktest.Text = fi.Name.ToString();
            lktest.NavigateUrl = "#";
            lktest.Attributes.Add("Onclick", "ViewCheck('" + fi.Name + "')");
            edit["UniqueNameofAttachmentColumn"].Controls.Add(lktest);
            edit["UniqueNameofAttachmentColumn"].Controls.Add(new LiteralControl("<br>"));
        }
    }
}

JS:

<script type="text/javascript">
    function ViewCheck(filename) {
      var targetfile = "target/" + filename;
      var openWnd = radopen(targetfile, "RadWindowDetails");
    }
</script>

Thanks,
Princy

[Felice]

Hi Jayesh,

I am getting this error "The buffer cannot be null"
on this line of code:

MemoryStream ms = new MemoryStream((byte[])Session["TempFiles"]);

[Felice]

Hi Princy,

thanks a lot for supporting.
I am not an expert coder. I do it on my spare time. I code small apps for my own needs.
If I understood correctly what you have done, you have added a RadWindowManager (which I suppose needs some setting) and a script that goes in the page where the Radgrid is located + some code to add in the code behind.

My question is, where those links will be placed?
Do I need to create a new column for the links? or they will simply appear on the recordform when in modification mode?

Thanks,
Felice

[Princy]

Hi Felice,

These HyperLink are placed inside the editform of the RadGrid. When you are in editmode,it will display the previously uploaded files as HyperLink just near to the Upload control. On clicking the HyperLinks, the content of the files will be shown in a Window. For that purpose i have added RadWindow in ASPX. When ever you upload a new file to the target folder, another  hyperlink with the file name will be added in the edit form.

C#:

if (e.Item is GridEditableItem && e.Item.IsInEditMode)// Check if the Grid is in EditMode
    {
        GridEditableItem edit = (GridEditableItem)e.Item;
        DirectoryInfo dir = new DirectoryInfo("path");// path of the target folder where your  files are stored
        DirectoryInfo[] subDirs = dir.GetDirectories();
        FileInfo[] files = dir.GetFiles(); //Getting the files inside the Directory
        foreach (FileInfo fi in files) //To loop through all files for setting each file as HyperLink
        {
            HyperLink lktest = new HyperLink(); //Add HyperLink Column
            lktest.ID = "lnk" + Guid.NewGuid(); //Setting Unique IDs
            lktest.Text = fi.Name.ToString(); //Get the File name
            lktest.NavigateUrl = "#";
            lktest.Attributes.Add("Onclick", "ViewCheck('" + fi.Name + "')"); // Calling the JS event
            //Adding the HyperLink to EditForm
            edit["UniqueNameofAttachmentColumn"].Controls.Add(lktest);
            edit["UniqueNameofAttachmentColumn"].Controls.Add(new LiteralControl("<br>"));
         }
      }

In order to add a RadWindowManager to you page just write the below code above your RadGrid.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
      <telerik:RadWindow ID="RadWindowDetails" runat="server">
      </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

You need to add a JS code to open the Window. When you click a HyperLink,it calls this JS event and a Window will be opened viewing that saved link page in editmode.

JS:

function ViewCheck(filename) {
      var targetfile = "target/" + filename;
      var openWnd = radopen(targetfile, "RadWindowDetails"); //Open the Window with the respective files
  }

Thanks,
Princy

[Felice]

Hi Princy,

I'm grateful for your help. I have added all the code you indicated me and changed the references accordingly.
I have no errors but nothing is happening.
I think I may have misplaced the JS script. Where is it supposed to go? I have put it in the aspx page as shown in the code

</asp:ScriptManager>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
      <telerik:RadWindow ID="RadWindowDetails" runat="server">
      </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

    <script type="text/javascript">
        function ViewCheck(filename) {
            var targetfile = "target/" + filename;
            var openWnd = radopen(targetfile, "RadWindowDetails");
        }
</script>


    <telerik:RadGrid ID="RadGrid1" runat="server"......

But as I said, nothing visible is happening.
As directory folder I am simply giving the name of the folder where I am actually saving the files in the solution "Allegati". Should I instead specify the full path in the cs code?

Help

[Princy]

Hi Felice,

Here is the full code snippet that i tried.I created the target folder , in the same folder where my current page resides.Please try and let me know if any concern.Please find the attached screen shot of the output.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    <Windows>
        <telerik:RadWindow ID="RadWindowDetails" runat="server">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ViewCheck(filename) {
            var targetfile = "target/" + filename;
            var openWnd = radopen(targetfile, "RadWindowDetails");
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"
    AllowPaging="true" OnItemCreated="RadGrid1_ItemCreated" AutoGenerateEditColumn="true"
   OnItemDataBound="RadGrid1_ItemDataBound">
    <MasterTableView DataKeyNames="OrderID" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn DataField="orderid" HeaderText="orderid">
            </telerik:GridBoundColumn>
            <telerik:GridAttachmentColumn EditFormHeaderTextFormat="Upload File:" Text="download"
                HeaderText="Download" UniqueName="AttachmentColumn" AttachmentDataField="BinaryData">
            </telerik:GridAttachmentColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem edit = (GridEditableItem)e.Item;
            DirectoryInfo dir = new DirectoryInfo("D:\\SampleApplication\\RadGrid7\\target");// path of the folder where your  files are stored
            DirectoryInfo[] subDirs = dir.GetDirectories();
            FileInfo[] files = dir.GetFiles();
            foreach (FileInfo fi in files)
            {
                HyperLink lktest = new HyperLink(); //Create the HyperLink
                lktest.ID = "lnk" + Guid.NewGuid();
                lktest.Text = fi.Name.ToString();
                lktest.NavigateUrl = "#";
                lktest.Attributes.Add("Onclick", "ViewCheck('" + fi.Name + "')"); //Calling the JS Function
                edit["AttachmentColumn"].Controls.Add(lktest);
                edit["AttachmentColumn"].Controls.Add(new LiteralControl("<br>"));
            }
        }
    }
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
       //Code to save files to the target folder
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem edititem = (GridEditableItem)e.Item;
            RadUpload upload = (edititem.EditManager.GetColumnEditor("AttachmentColumn") as GridAttachmentColumnEditor).RadUploadControl;
            upload.TargetFolder = "target";
        }
    }

Thanks,
Princy

[Felice]

Hi Princy,
thanks for your continuous support. I am sorry but I cannot get it working. Damn!
The folder where I upload the files is inside the project as per picture attached. I can load the attachments inside the folder but links are not generated. I also tried both physical paths and virtual paths to the folder but noting!!
I am sure there is a mistake somewhere in my code but I cannot find it.
This is my CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item.IsInEditMode && e.Item is GridEditableItem)
        {
            GridEditableItem item = e.Item as GridEditableItem;
           (item["columnAllegati"].Controls[0] as RadUpload).TargetFolder = "c:\\Users\\Pink\\Documents\\Visual Studio 21012\\Projects\\Test1_managDoc\\Test1_managDoc\\Allegati"; //phisical path
           // (item["columnAllegati"].Controls[0] as RadUpload).TargetFolder = "Allegati"; //Virtual path
        }

        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {

            GridEditableItem edit = (GridEditableItem)e.Item;
            RadUpload uplo = (RadUpload)edit["columnAllegati"].Controls[0];
            uplo.Localization.Select = "Seleziona";


            GridEditableItem edititem = (GridEditableItem)e.Item;
            RadUpload upload = (edititem.EditManager.GetColumnEditor("columnAllegati") as GridAttachmentColumnEditor).RadUploadControl;
            upload.TargetFolder = "Allegati";

        }
    }

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)// Check if the Grid is in EditMode
        {
            GridEditableItem edit = (GridEditableItem)e.Item;
            DirectoryInfo dir = new DirectoryInfo("Allegati");// path of the target folder where your  files are stored
            DirectoryInfo[] subDirs = dir.GetDirectories();
            FileInfo[] files = dir.GetFiles(); //Getting the files inside the Directory
            foreach (FileInfo fi in files) //To loop through all files for setting each file as HyperLink
            {
                HyperLink lktest = new HyperLink(); //Add HyperLink Column
                lktest.ID = "lnk" + Guid.NewGuid(); //Setting Unique IDs
                lktest.Text = fi.Name.ToString(); //Get the File name
                lktest.NavigateUrl = "#";
                lktest.Attributes.Add("Onclick", "ViewCheck('" + fi.Name + "')"); // Calling the JS event
                //Adding the HyperLink to EditForm
                edit["columnAllegati"].Controls.Add(lktest);
                edit["columnAllegati"].Controls.Add(new LiteralControl("<br>"));
            }
        }

and this is my ASP:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CasaFirenze.aspx.cs" Inherits="CasaFirenze" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Test1_managDocDBConnectionString %>" DeleteCommand="DELETE FROM [TableCasaFi] WHERE [TransazioneID] = @TransazioneID" InsertCommand="INSERT INTO [TableCasaFi] ([Tipo], [Scadenza], [InizioPeriodo], [FinePeriodo], [Note]) VALUES (@Tipo, @Scadenza, @InizioPeriodo, @FinePeriodo, @Note)" SelectCommand="SELECT * FROM [TableCasaFi]" UpdateCommand="UPDATE [TableCasaFi] SET [Tipo] = @Tipo, [Scadenza] = @Scadenza, [InizioPeriodo] = @InizioPeriodo, [FinePeriodo] = @FinePeriodo, [Note] = @Note WHERE [TransazioneID] = @TransazioneID">
        <DeleteParameters>
            <asp:Parameter Name="TransazioneID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Tipo" Type="String" />
            <asp:Parameter DbType="Date" Name="Scadenza" />
            <asp:Parameter DbType="Date" Name="InizioPeriodo" />
            <asp:Parameter DbType="Date" Name="FinePeriodo" />
            <asp:Parameter Name="Note" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Tipo" Type="String" />
            <asp:Parameter DbType="Date" Name="Scadenza" />
            <asp:Parameter DbType="Date" Name="InizioPeriodo" />
            <asp:Parameter DbType="Date" Name="FinePeriodo" />
            <asp:Parameter Name="Note" Type="String" />
            <asp:Parameter Name="TransazioneID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Telerik">
    <Windows>
      <telerik:RadWindow ID="RadWindowDetails" runat="server">
      </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function ViewCheck(filename) {
            var targetfile = "Allegati/" + filename;
            var openWnd = radopen(targetfile, "RadWindowDetails");
        }
    </script>
</telerik:RadCodeBlock>

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0" Culture="it-IT" DataSourceID="SqlDataSource1" GridLines="None" Skin="Telerik" OnItemDataBound="RadGrid1_ItemDataBound">
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
        <MasterTableView CommandItemDisplay="TopAndBottom" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="TransazioneID">
            <RowIndicatorColumn Visible="False">
            </RowIndicatorColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="TransazioneID" DataType="System.Int32" FilterControlAltText="Filter TransazioneID column" HeaderText="TransazioneID" ReadOnly="True" SortExpression="TransazioneID" UniqueName="TransazioneID">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Tipo" FilterControlAltText="Filter Tipo column" HeaderText="Tipo" SortExpression="Tipo" UniqueName="Tipo">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="Scadenza" DataFormatString="{0:dd/MM/yyyy}" FilterControlAltText="Filter columnScadenza column" HeaderText="Scadenza" SortExpression="Scadenza" UniqueName="columnScadenza">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridDateTimeColumn>
                <telerik:GridDateTimeColumn DataField="InizioPeriodo" DataFormatString="{0:dd/MM/yyyy}" FilterControlAltText="Filter columnInizioPeriodo column" HeaderText="Inizio Periodo" MaxDate="2050-12-31" MinDate="2000-01-01" SortExpression="InizioPeriodo" UniqueName="columnInizioPeriodo">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridDateTimeColumn>
                <telerik:GridDateTimeColumn DataField="FinePeriodo" DataFormatString="{0:dd/MM/yyyy}" FilterControlAltText="Filter columnFinePeriodo column" HeaderText="Fine Periodo" MaxDate="2050-12-31" MinDate="2001-01-01" SortExpression="FinePeriodo" UniqueName="columnFinePeriodo">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridDateTimeColumn>
                <telerik:GridAttachmentColumn FileName="attachment" FilterControlAltText="Filter columnAllegati column" HeaderText="Agg. allegati" UniqueName="columnAllegati">
                </telerik:GridAttachmentColumn>
                <telerik:GridBoundColumn DataField="Note" FilterControlAltText="Filter Note column" HeaderText="Note" SortExpression="Note" UniqueName="Note">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Content>

Do you see any mistake in my code?

[Maria Ilieva]

Hi Felice,

The presented C# code looks totally correct to me however the ItemCreated event is not attached to the OnItemCreated handler of the RadGrid. Please attache the event in the page markup and verify how it goes.

Regards,
Maria Ilieva
Telerik

[Felice]

Hello Maria and Princy,
Thanks a lot. It now works beautifully! I am grateful for your help.
:-))


I have another question.
Is it possible to show the loaded attachments to the relevant record only.
I mean...if I load attachment A in record 1 and attachment B in record 2, how can I make attachment A only showing in record 1 and attachment B only showing in record 2.
May be I am asking too much!

[Maria Ilieva]

Hello Felice,

I'm not completely sure what exactly is the requirements you have.
Could you please elaborate a bit more on the exact functionality you need do achieve so that we could further assist?


Regards,
Maria Ilieva
Telerik

[Felice]

Hi Maria,
thanks for your answer. Actually I found the way to get the result I was looking for, so please consider this question closed.

Kind regards,
Felice

[Olanrewaju]

Please can i save the url of the save file to datebase ImageUrl