RadGrid Upload in edit mode

[Myriam]

Hello
I have a RadGrid with only one MasterTable.
The user can Update, Edit or Insert in this Grid.
When the user Edit a record, I would like to display a upload control to be able to upload the logo of the company and then save it to my table. Is it possible to have this as a gridbound column as I would like also that when the user click on Edit, it display the value that is already in the table..
Thanks in advance

And does it has a property where I could set the width of my controls in the edit part?
Thanks again

[Princy]

Hello Myriam,

You can place one or more controls in the EditItemTemplate of a TemplateColumn, which will appear accordingly in the EditMode of the grid.
aspx:

<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="TemplateColumn">
     <ItemTemplate>
         <asp:Label ID="Label1" runat="server" Text='<%#Eval("FileName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
         <asp:TextBox ID="TextBox1" Text='<%#Eval("FileName") %>' runat="server"></asp:TextBox>
         <telerik:RadUpload ID="RadUpload1" runat="server" />
    </EditItemTemplate>
</telerik:GridTemplateColumn>

To modify the width of the edit controls you have to access the controlsand then vary the width as required.
cs:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
               GridEditableItem editItem=(GridEditableItem)e.Item;
               TextBox txtbx = (TextBox)editItem["TemplateColumn5"].FindControl("TextBox1");//For TemplateColumns
               txtbx.Width = 200;
               //TextBox txtbx = (TextBox)editItem["BoundColumn"].Controls[0]; (For GridBoundColumns)
        }
    }

Thanks
Princy.

[Myriam]

This is perfect!
Many Thanks!

[Myriam]

About the width of my controls in edit mode...I would like to do the same thing in a detailtableview...what do I have to change?

Thanks again...

[Shinu]

Hi Myriam,

You can set the Name property for the Detail table and check for the corresponding name in the ItemDataBound event as shown below.

ASPX:

<DetailTables>
  <telerik:GridTableView runat="server"   Name="Detail"   DataSourceID="SqlDataSource1"  >
      <Columns>
      <telerik:GridTemplateColumn UniqueName="TemplateColumn1" HeaderText="TemplateColumn1">
        <ItemTemplate>
         <asp:Label ID="Label1" runat="server" Text='<%#Eval("FileName") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
         <asp:TextBox ID="TextBox1" Text='<%#Eval("FileName") %>' runat="server"></asp:TextBox>
         <telerik:RadUpload ID="RadUpload1" runat="server" />
    </EditItemTemplate>
      </telerik:GridTemplateColumn>
       <telerik:GridEditCommandColumn ></telerik:GridEditCommandColumn>
      </Columns>
  </telerik:GridTableView>
 </DetailTables>

CS:

 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode && e.Item.OwnerTableView.Name=="Detail")
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            TextBox txtbx = (TextBox)editItem["TemplateColumn1"].FindControl("TextBox1");//For TemplateColumns
            txtbx.Width = Unit.Pixel(300);
        }


    }

Thanks
Shinu.

[John Grymonprez]

I'm using your code in a grid with automatic operations. I would like to know how to update the field that uses the RadUpload control.

[Sebastian]

Hello John,

You can take this demo as a starting point for your implementation:

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

and modify it to use automatic operations instead of manual updates.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Myriam]

Hello John
here is my code
Hope this gonna help

Private Sub RadGrid_offre_UpdateCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGrid_offre.UpdateCommand
If "MTVPostulant".Equals(e.Item.OwnerTableView.Name) Then
            Dim L_NO_Offre = parentItem.OwnerTableView.DataKeyValues(parentItem.ItemIndex)("NO_OFFRE").ToString()
            Dim strsqlUpdate As String
            Dim item As GridEditFormItem
            Dim temp_no_Demande As String
            Dim temp_no_offre As Integer
            item = CType(e.Item, GridEditFormItem)

            Dim dataItem As GridEditFormItem = DirectCast(e.Item, GridEditFormItem)
            temp_no_Demande = item("NO_DEMANDE").Text.ToString
            Dim codePermanent As TextBox = DirectCast(item("CODE_PERMANENT").Controls(0), TextBox)
            strsqlUpdate = ""
            strsqlUpdate = "UPDATE [T_DEMANDE] SET [STATUS] = @STATUS "

            Dim FileUpLettre As FileUpload = DirectCast(item("TemplateColumnLETTRE_PRESENTATION").FindControl("LETTRE_PRESENTATION"), FileUpload)
            'Dim Uploadbx As FileUpload = DirectCast(editItem("TemplateColumn").FindControl("LOGO"), FileUpload)

            L_LETTRE = FileUpLettre.FileName
            If L_LETTRE <> "" Then
                Me.SqlDSPostulant.UpdateParameters("LETTRE_PRESENTATION").DefaultValue = L_LETTRE

                NomFichier(FileUpLettre, codePermanent.Text, "D", "lettre")
                strsqlUpdate = strsqlUpdate & ",[LETTRE_PRESENTATION]=@LETTRE_PRESENTATION "
                SauvegarderFichier(FileUpLettre, "lettre", L_NO_Offre, codePermanent.Text)
            End If

            Dim FileUpcv As FileUpload = DirectCast(item("TemplateColumnCV").FindControl("CV"), FileUpload)
            L_CV = FileUpcv.FileName
            If L_CV <> "" Then
                Me.SqlDSPostulant.UpdateParameters("NOM_CV").DefaultValue = L_CV

                NomFichier(FileUpcv, codePermanent.Text, "D", "cv")
                strsqlUpdate = strsqlUpdate & ",[NOM_CV]=@NOM_CV "
                SauvegarderFichier(FileUpcv, "cv", L_NO_Offre, codePermanent.Text)
            End If

            strsqlUpdate = strsqlUpdate & "WHERE NO_DEMANDE=@NO_DEMANDE"

            SqlDSPostulant.UpdateCommand = strsqlUpdate
            temp_no_offre = parentItem("NO_OFFRE").Text
            fonctionsvbs.LogInsert(Session("sDemandeur"), "Modifier une demande", Session("sDemandeur") & " a modifié la demande de " & codePermanent.Text & " sur l'offre no " & temp_no_offre)
            End If
End Sub

'function to save the files
Protected Function SauvegarderFichier(ByVal sNomFichier As FileUpload, ByVal sType As String, ByVal sNoOffre As Integer, ByVal scodepermanent As String)

        If sNomFichier.HasFile = True Then
            Dim filepath As String = sNomFichier.PostedFile.FileName
            Dim pat As String = "\\(?:.+)\\(.+)\.(.+)"
            Dim r As Regex = New Regex(pat)
            'run
            Dim m As Match = r.Match(filepath)
            Dim file_ext As String = m.Groups(2).Captures(0).ToString()
            Dim filename As String = m.Groups(1).Captures(0).ToString()
            Dim file As String = filename & "." & file_ext

            Dim dir_name As String = Server.MapPath(".\Offre\" & sNoOffre & "\" & scodepermanent & "\")
            If System.IO.Directory.Exists(dir_name) Then
                'Ne rien faire
            Else
                MkDir(Server.MapPath(".\Offre\" & sNoOffre & "\" & scodepermanent & "\"))
            End If


            'save the file to the server
            sNomFichier.PostedFile.SaveAs(Server.MapPath(".\Offre\" & sNoOffre & "\" & scodepermanent & "\") & file)

            Return file
        Else
            Return ""
        End If
    End Function

'Function

' To get the name of the files
Protected Function NomFichier(ByVal NomUpload As FileUpload, ByVal CODE_PERMANENT As String, ByVal LettreTable As String, ByVal sPath As String)

        If NomUpload.HasFile = True Then
            Dim filepath As String = NomUpload.PostedFile.FileName
            Dim pat As String = "\\(?:.+)\\(.+)\.(.+)"
            Dim r As Regex = New Regex(pat)
            'run
            Dim m As Match = r.Match(filepath)
            Dim file_ext As String = m.Groups(2).Captures(0).ToString()
            Dim filename As String = LettreTable & CODE_PERMANENT
            Dim file As String = filename & "." & file_ext

            'save the file to the server
            NomUpload.PostedFile.SaveAs(Server.MapPath(".\" & sPath & "\") & file)
            Return file
        Else
            Return ""
        End If
    End Function

<telerik:GridTemplateColumn
                                    UniqueName="TemplateColumnLETTRE_PRESENTATION"
                                    HeaderText="Lettre présentation"
                                    DataField="LETTRE_PRESENTATION">
                                    <ItemTemplate>
                                        &nbsp;<a href='Offre\<%#Eval("NO_OFFRE") %>\<%#Eval("CODE_PERMANENT") %>\<%#Eval("LETTRE_PRESENTATION") %>' target='_blank'><%#Eval("LETTRE_PRESENTATION") %></a>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <asp:FileUpload ID="LETTRE_PRESENTATION" Text='<%#Eval("LETTRE_PRESENTATION") %>' runat="server" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>

                                <telerik:GridTemplateColumn
                                    UniqueName="TemplateColumnCV"
                                    HeaderText="CV"
                                    DataField="NOM_CV">
                                    <ItemTemplate>
                                        &nbsp;<a href='Offre\<%#Eval("NO_OFFRE") %>\<%#Eval("CODE_PERMANENT") %>\<%#Eval("NOM_CV") %>' target='_blank'><%#Eval("NOM_CV")%></a>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <asp:FileUpload ID="CV" Text='<%#Eval("NOM_CV") %>' runat="server" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>

[John Grymonprez]

Thanks for the input.

I have tried to implement the solution from the example, but still the link does not get updated.

<

telerik:RadGrid ID="rgReport" runat="server" AllowAutomaticDeletes="true"

 

 

AllowAutomaticInserts="true" AllowAutomaticUpdates="true" DataSourceID="LinqDataSource2"

 

 

AutoGenerateColumns="false" OnItemDataBound="rgReport_ItemDataBound"

 

 

OnUpdateCommand="rgReport_UpdateCommand" OnInsertCommand="rgReport_InsertCommand">

 

 

<HeaderContextMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</HeaderContextMenu>

 

 

<MasterTableView CommandItemDisplay="Top" DataKeyNames="SortID,BatchID,User_Ref"

 

 

EditMode="EditForms">

 

 

<Columns>

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton"

 

 

UniqueName="EditCommandColumn">

 

 

</telerik:GridEditCommandColumn>

 

 

<telerik:GridBoundColumn DataField="SortID" HeaderText="SortID"

 

 

UniqueName="SortID" ReadOnly="true">

 

 

<ItemStyle CssClass="hide" />

 

 

<HeaderStyle CssClass="hide" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="newSort" HeaderText="Enclosure #"

 

 

UniqueName="EnclosureID">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Description" HeaderText="Description"

 

 

UniqueName="Description"></telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="Product_Ref" HeaderText="Product"

 

 

UniqueName="Product_Ref" ReadOnly="true">

 

 

<ItemStyle CssClass="hide" />

 

 

<HeaderStyle CssClass="hide" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridTemplateColumn UniqueName="tmplLink">

 

 

<ItemTemplate>

 

 

<asp:Label ID="lblLink" runat="server" Text='<%#Eval("Link") %>'></asp:Label>

 

 

</ItemTemplate>

 

 

<EditItemTemplate>

 

 

<telerik:RadUpload ID="ruLink" runat="server" ControlObjectsVisibility="None" />

 

 

</EditItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn DataField="Type" HeaderText="Type" UniqueName="Type"

 

 

ReadOnly="true">

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridButtonColumn ConfirmText="Delete this product?"

 

 

ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"

 

 

CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

 

 

<ItemStyle HorizontalAlign="Center"/>

 

 

</telerik:GridButtonColumn>

 

 

</Columns>

 

 

<editformsettings>

 

 

<editcolumn uniquename="EditCommandColumn1">

 

 

</editcolumn>

 

 

</editformsettings>

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

</MasterTableView>

 

 

<FilterMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

</telerik:RadGrid>

 

<

asp:LinqDataSource ID="LinqDataSource2" runat="server"

 

 

ContextTypeName="WizardDataContext"

 

 

TableName="tempReports" EnableDelete="True" EnableInsert="True"

 

 

EnableUpdate="True" Where="BatchID == @BatchID">

 

 

 

 

<WhereParameters>

 

 

 

 

<asp:ControlParameter ControlID="hdn" Name="BatchID" PropertyName="Value"

 

 

Type="Int32" />

 

 

 

 

</WhereParameters>

 

 

 

 

<UpdateParameters>

 

 

 

 

<asp:Parameter Name="newSort" Type="Int32" />

 

 

 

 

<asp:Parameter Name="Description" Type="String" />

 

 

 

 

<asp:SessionParameter SessionField="LinkCS" Name="Link" />

 

 

 

 

</UpdateParameters>

 

 

 

 

</asp:LinqDataSource>

 

 

code-behind:

 

 

protected void rgReport_UpdateCommand(object source, GridCommandEventArgs e)

 

{

InitializeUpdateParameter((

RadUpload)e.Item.FindControl("ruLink"));

 

}

 

protected void rgReport_InsertCommand(object source, GridCommandEventArgs e)

 

{

InitializeUpdateParameter((

RadUpload)e.Item.FindControl("ruLink"));

 

}

 

private void InitializeUpdateParameter(RadUpload currentUpload)

 

{

 

if (currentUpload.UploadedFiles.Count > 0)

 

{

 

byte[] data = new byte[currentUpload.UploadedFiles[0].ContentLength];

 

currentUpload.UploadedFiles[0].InputStream.Read(data, 0, data.Length);

Session[

"LinkCS"] = currentUpload.UploadedFiles[0].FileName.ToString();

 

}

}

 

protected void rgReport_ItemDataBound(object sender, GridItemEventArgs e)

 

{

 

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

 

{

 

RadUpload upload = (RadUpload)e.Item.FindControl("ruLink");

 

RadAjaxPanel1.ResponseScripts.Add(

string.Format("window['UploadId'] = '{0}';", upload.ClientID));

 

}

}

[John Grymonprez]

Another thing that I discovered is the following. I can update information (apart from the uploadcontrol), and it will update the grid. However when I update another record afterwards, the previously updated record returns to it's original state. I noticed that when I remove my 'where' clause, that it works fine.

[Sebastian]

Hello John,

The template column value with RadUpload editor cannot be updated automatically because the upload control does not support two-way binding with binding expression which to be evaluated upon update operation.

Therefore, you will need to combine the automatic data editing with LinqDataSource control with manual update for the RadUpload editor as illustrated in this demo:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/programaticlinqupdates/defaultcs.aspx

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Eric Downey]

I'm trying to accomplish something very similar to the original author of this thread - with one exception.  I am using a FormTemplate.  Any words of wisdom on how to incorporate a RadUpload control with the FormTemplate?  Thanx!

[Sebastian]

Hello Eric,

In this case you can embed the RadUpload instance inside the FormTemplate custom edit form of the grid and perform the upload operation manually as explained previously in the thread. You can use the implementation from this online demo for reference:

http://demos.telerik.com/aspnet-ajax/listview/examples/firstlook/defaultcs.aspx
(it is based again on templates which are part of the first RadListView instance)

and port the same logic for RadGrid with FormTemplate edit form.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.