[CLOSED] Will FileUpload control works with Editable Grid Panel?

**rnachman** · Dec 18, 2011, 5:34 PM

Hi,

In a specific scenario I need to show fileupload control in a editable grid and the selected files should upload while saving. I have added file upload control in editable grid at column 2. I don't know why this control showing like smaller textfiled and bigger "Browse..." button and also no attachment icon showing. I need the functionality like selected files to upload at respective places. Editable grid not even recognizing the file selected. Please have a look at sample code...


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ExtCheckEditableGridUploadControls.aspx.vb"
    Inherits="Testing_ExtCheckEditableGridUploadControls" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="resMngr" runat="server" />
    <ext:Store ID="StoreConditions" runat="server" OnBeforeStoreChanged="Store_BeforeStoreChanged">
        <Reader>
            <ext:JsonReader IDProperty="CONDITION_ID">
                <Fields>
                    <ext:RecordField Name="CONDITION_ID" />
                    <ext:RecordField Name="CONDITION" />
                    <ext:RecordField Name="UPLOADFILE" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
        <Items>
            <ext:TabPanel ID="pnlbackground" runat="server" Region="Center" Border="false">
                <Items>
                    <ext:Panel ID="pnlDocuments" Title="Documents" runat="server" BodyStyle="background-color:#ffffff"
                        Border="false" Layout="CardLayout" ActiveIndex="0">
                        <Items>
                            <ext:Panel ID="pnlDocsCommon" runat="server" Border="false" Region="Center" Layout="BorderLayout"
                                BodyStyle="background-color:#ffffff">
                                <Items>
                                    <ext:GridPanel ID="GridPanel1" runat="server" Region="Center" StoreID="StoreConditions">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:Column Header="Condition" DataIndex="CONDITION">
                                                </ext:Column>
                                                <ext:Column Header="Upload File">
                                                    <Editor>
                                                        <ext:FileUploadField ID="ufield" runat="server" Icon="Attach">                                                        
                                                        </ext:FileUploadField>
                                                    </Editor>
                                                </ext:Column>
                                                <ext:CommandColumn Width="40">
                                                    <Commands>
                                                        <ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="taskreject"
                                                            Icon="ArrowUndo" />
                                                    </Commands>
                                                    <PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.dirty);" />
                                                </ext:CommandColumn>
                                            </Columns>
                                        </ColumnModel>
                                        <Listeners>
                                            <Command Handler="record.reject();" />
                                        </Listeners>
                                        <Plugins>
                                            <ext:EditableGrid ID="EditableGrid1" runat="server" />
                                        </Plugins>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
                                        </View>
                                    </ext:GridPanel>
                                </Items>
                                <Buttons>
                                    <ext:Button ID="btnSaveCondChanges" runat="server" Text="Save">
                                        <Listeners>
                                            <Click Handler="GridPanel1.save();" Delay="10" />
                                        </Listeners>
                                    </ext:Button>
                                </Buttons>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

code behind...


Imports Ext.Net

Partial Class Testing_ExtCheckEditableGridUploadControls
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Ext.Net.X.IsAjaxRequest Then
            Call LoadAllStoreInfo()
        End If
    End Sub

    Public Sub LoadAllStoreInfo()
        StoreConditions.DataSource = GetAllConditions()
        StoreConditions.DataBind()
    End Sub

    Public Function GetAllConditions() As DataTable
        Dim dt As New DataTable
        Dim dr As DataRow
        Dim i As Integer

        dt.Columns.Add("CONDITION_ID")
        dt.Columns.Add("CONDITION")
        dt.Columns.Add("UPLOADFILE")

        For i = 0 To 10
            dr = dt.NewRow()
            dr(0) = i + 1
            dr(1) = "Condition " & i.ToString()
            dr(2) = ""
            dt.Rows.Add(dr)
        Next

        Return dt
    End Function

    Public Sub Store_BeforeStoreChanged(ByVal sender As Object, ByVal e As BeforeStoreChangedEventArgs)

        Dim jsonData As String = e.DataHandler.JsonData
        Ext.Net.X.Msg.Alert("Saved", jsonData).Show()

    End Sub
End Class

**Daniil** · Dec 18, 2011, 6:15 PM

Hi,

Unfortunately, FileUploadField doesn't work in a capacity of Column's Editor.

**rnachman** · Dec 19, 2011, 8:30 AM

Hi Daniil,

Is it possible to add FileUploadField to grid panel? If not possible, can you let me know which is best approach to get my requirement as in screenshot.

Originally Posted by Daniil

Hi,

Unfortunately, FileUploadField doesn't work in a capacity of Column's Editor.

**Daniil** · Dec 19, 2011, 8:43 AM

The best approach would be manual rendering as many FileUploadField-s as you need.

**rnachman** · Dec 19, 2011, 11:57 AM

Hi Daniil,

You mean required number of fileuploadfield controls can add to any formPanel from code behind and the formpanel should have layout as in screenshot. I will check it. Can you please provide small example where required number of fileuploadfield controls loads from code behind. It will be helpful.

Originally Posted by Daniil

The best approach would be manual rendering as many FileUploadField-s as you need.

**Daniil** · Dec 19, 2011, 1:07 PM

Yes, you correctly understand.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    private static int number = 0;

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 10; i++)
        {
            this.FormPanel1.Items.Add(GetField());
        }
    }

    private FileUploadField GetField()
    {
        FileUploadField f = new FileUploadField()
        {
            FieldLabel = number++.ToString()
        };
        return f;
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FormPanel 
            ID="FormPanel1" 
            runat="server" 
            Width="200" 
            DefaultAnchor="100%" 
            LabelWidth="25" />
    </form>
</body>
</html>

**rnachman** · Dec 19, 2011, 2:46 PM

Hi Daniil,

I have verified this example and I would like to know the uploaded file names and Ids for those controls, for that I just modified the code as below...but I am getting error like "Object reference not set to an instance of object...". How to get those controls?


private FileUploadField GetField()
    {
        FileUploadField f = new FileUploadField()
        {
            FieldLabel = number++.ToString(),
            ID = "fuCtrl" + number
        };
        return f;
    }

public void ShowControlsIds(Object sender, DirectEventArgs e)
    {
        string strIdsInfo = "";
        string strCtrl = "";
        FileUploadField fu;
        for (int i = 0; i < 10; i++)
        {
            strCtrl = "fuCtrl" + (i+1).ToString();
            fu = (FileUploadField)FindControl(strCtrl);
            strIdsInfo = strIdsInfo + fu.ID + ", FileName = " + fu.FileName + "^";
        }
        Ext.Net.X.Msg.Alert("Ctrls", strIdsInfo);
    }

Button control added as below...

<ext:Button ID="btnShowFiles" runat="server" Text="Upload Files">
        <DirectEvents>
            <Click OnEvent="ShowControlsIds">
                <EventMask ShowMask="true" Msg="Loading..." />
            </Click>
        </DirectEvents>
    </ext:Button>

Originally Posted by Daniil

Yes, you correctly understand.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    private static int number = 0;

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < 10; i++)
        {
            this.FormPanel1.Items.Add(GetField());
        }
    }

    private FileUploadField GetField()
    {
        FileUploadField f = new FileUploadField()
        {
            FieldLabel = number++.ToString()
        };
        return f;
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FormPanel 
            ID="FormPanel1" 
            runat="server" 
            Width="200" 
            DefaultAnchor="100%" 
            LabelWidth="25" />
    </form>
</body>
</html>

**rnachman** · Dec 19, 2011, 3:41 PM

Hi Daniil,

I have figured out the issue. It got resolved.

**Daniil** · Dec 19, 2011, 3:42 PM

Ok, thanks for the update. I just wanted to post what is wrong.

Though for someone on the forums how might be interested: be sure that an ID which you use to find a control matches a real ID of a control.

**rnachman** · Dec 20, 2011, 5:01 PM

Hi Daniil,

Thank you. I would like know one thing. I my form I have to show file upload controls for around 50 to 80, while doing this the form is taking more time to render all controls, and also while selecting filters the number of upload controls should show based on filters. So it is time consuming to load again based on filters. Is there any best approach to load controls quickly? Is it possible to add fileuploadfield to grid row editor? we can show all records in the grid with paging and while edit row the file upload field will show up and get file to upload and click "Update" to upload file to specific location?

Originally Posted by Daniil

Ok, thanks for the update. I just wanted to post what is wrong.

Though for someone on the forums how might be interested: be sure that an ID which you use to find a control matches a real ID of a control.

Thread: [CLOSED] Will FileUpload control works with Editable Grid Panel?

Thread Tools

Search Thread

Display

[CLOSED] Will FileUpload control works with Editable Grid Panel?

Similar Threads

FileUpload works on local machine but fails when published

Editable Grid Panel - inserting row css class

Editable grid panel - Override css class

Editable Grid Panel - AfterEdit event

Editable Grid Panel with Combo box column

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Will FileUpload control works with Editable Grid Panel?

[CLOSED] Will FileUpload control works with Editable Grid Panel?

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us