[CLOSED] [#1248] [3.2.1] GridPanel WidgetColumn as MultiUpload component

  1. #1

    [CLOSED] [#1248] [3.2.1] GridPanel WidgetColumn as MultiUpload component

    Dears,

    I would like to use ext:MultiUpload as ext:WidgetColum in ext:GridPanel.

    This is what I want to achieve:

    - Each row in the grid panel will represent a type of document, which need to be uploaded.
    - The user can upload the document by simply click on the widget column and selecting the file from the prompt windows.

    When I try this, I'm getting the following error:

    Click image for larger version. 

Name:	errorUpload.jpg 
Views:	90 
Size:	63.4 KB 
ID:	24412

    And here the test case:

    <ext:Viewport runat="server" Layout="FitLayout">
    	<Items>
    		<ext:Panel 
    			runat="server" 
    			Title="Documents"
    			Icon="PageWhiteAcrobat"
    			Layout="FitLayout"
    			PaddingSpec="0 0 0 0"
    			BodyCls="my-carousel"
    			AutoScroll="true"
    			MarginSpec="0 0 0 0">
    				<Items>
    					<ext:GridPanel
    						runat="server"
    						ID="DocumentGV"
    						PaddingSpec="0 0 0 0"
    						MarginSpec="0 0 5 0"
    						ClientIDMode="Static"
    						Layout="FitLayout"
    						EmptyText="No documents found"
    						Title="Documents List"
    						Header="false"
    						Frame="false">
    						<Store>
    							<ext:Store runat="server">
    								<Model>
    									<ext:Model runat="server"  >
    										<Fields>				
    											<ext:ModelField Name="DOCUMENT_TYPE" />
    											<ext:ModelField Name="DISPLAY_SEQUENCE" />                                
    											<ext:ModelField Name="DOCUMENT_DESC_E" />     
    											<ext:ModelField Name="DOCUMENT_DESC_A" />     
    											<ext:ModelField Name="UPLOADED" />
    											<ext:ModelField Name="PATH" />
    										</Fields>
    									</ext:Model>
    								</Model>
    							</ext:Store>
    						</Store>
    						<ColumnModel runat="server">
    							<Columns>        
    								<ext:RowNumbererColumn Header="#" runat="server"  Align="Center" />   
    								<ext:Column runat="server" Align="Center" width="170" Text="Document Type" DataIndex="DOCUMENT_TYPE" >
    									<Filter>
    										<ext:StringFilter />
    									</Filter>
    								</ext:Column>
    								<ext:Column runat="server" Flex="2" Text="En Description" DataIndex="DOCUMENT_DESC_E" >
    									<Filter>
    										<ext:StringFilter />
    									</Filter>
    								</ext:Column>
    								<ext:Column runat="server" Flex="2" Text="Ar Description" DataIndex="DOCUMENT_DESC_A" >
    									<Filter>
    										<ext:StringFilter />
    									</Filter>
    								</ext:Column>
    								<ext:Column runat="server"   width="120" Align="Center" Text="Collected" DataIndex="UPLOADED" >
    									<Filter>
    										<ext:ListFilter Options="Yes,No" />
    									</Filter>
    								</ext:Column>
    								<ext:WidgetColumn runat="server" Width="120" Text="Upload">
    									<Widget>
    										<ext:MultiUpload
    											ID="MultiUpload1"
    											runat="server"
    											OnFileUpload="MultiUpload_FileUpload"
    											AutoStartUpload="true"
    											FileDropAnywhere="true"
    											FileSizeLimit="15 MB"
    											FileTypes="*.*"
    											FileTypesDescription="All Files"
    											FileUploadLimit="100"
    											FileQueueLimit="0">
    											<Listeners>
    																		
    												<UploadError Fn="uploadError" />
    												<FileSelectionError Fn="fileSelectionError" />
    											</Listeners>
    										</ext:MultiUpload>                                                                    
    									</Widget>
    														   
    								</ext:WidgetColumn>
    							</Columns>
    						</ColumnModel>
    						<Plugins>
    							<ext:GridFilters runat="server" />
    						</Plugins>                                          
    					</ext:GridPanel>
    				</Items>
    		</ext:Panel>
    	</Items>
    </ext:Viewport>
    And behind code:

        Protected Sub MultiUpload_FileUpload(sender As Object, e As FileUploadEventArgs)
            If e.HasFile = True Then
    
                Dim file As HttpPostedFile = e.PostedFile
                Dim fileName As String = file.FileName
                Dim path As String = Server.MapPath("..\..\Uploads") & "\" & fileName
    
                Try
                    file.SaveAs(path)
                Catch ex As Exception
    
                End Try
    
            End If
        End Sub
    And JS functions:

    var uploadError = function (item, file, errorCode, message) {
        alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
    };
    
    var fileSelectionError = function (item, file, errorCode, message) {
        alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
    };
    If this approach is not applicable, kindly suggest the best way to achieve what I want.

    Regards,
    Alaswad
  2. #2
    Hello Alaswad!

    Your example unfortunately is not runnable. When making a test case, whenever possible, if you make them as simple as possible it would allow us to faster identify and suggest a fix. No problem being on C# or VB.NET, just something with no missing data, or information or methods in order to be fully runnable.

    After a little tinkering I could reproduce your issue based on the Examples Explorer's Simple Array Grid example. I've come up with this (broken, reproducing the issue I believe you are having):

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" }
                };
            }
        }
        
        protected void MultiUpload_FileUpload(object sender, FileUploadEventArgs e)
        {
            var file = e.PostedFile;
            var fileName = e.FileName;
            var path = Server.MapPath("./uploads" + "/" + fileName);
    
            try
            {
                file.SaveAs(path);
            }
            catch (Exception ex)
            {
                
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var uploadError = function (item, file, errorCode, message) {
                alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
            };
    
            var fileSelectionError = function (item, file, errorCode, message) {
                alert("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                    <ext:WidgetColumn runat="server" Width="120" Text="Upload">
                        <Widget>
                            <ext:MultiUpload
                                ID="mu001"
                                runat="server"
                                OnFileUpload="MultiUpload_FileUpload"
                                AutoStartUpload="true"
                                FileDropAnywhere="true"
                                FileSizeLimit="15 MB"
                                FileTypes="*.*"
                                FileTypesDescription="All Files"
                                FileUploadLimit="100"
                                FileQueueLimit="0">
                                <Listeners>
                                    <UploadError Fn="uploadError" />
                                    <FileSelectionError Fn="fileSelectionError" />
                                </Listeners>
                            </ext:MultiUpload>
                        </Widget>
                    </ext:WidgetColumn>
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
        <ext:MultiUpload
            runat="server"
            OnFileUpload="MultiUpload_FileUpload"
            AutoStartUpload="true"
            FileDropAnywhere="true"
            FileSizeLimit="15 MB"
            FileTypes="*.*"
            FileTypesDescription="All Files"
            FileUploadLimit="100"
            FileQueueLimit="0">
            <Listeners>
                <UploadError Fn="uploadError" />
                <FileSelectionError Fn="fileSelectionError" />
            </Listeners>
        </ext:MultiUpload>
    </body>
    </html>
    As you can see in the example, there are the MultiUpload buttons inside the grid and one in the end of the page, outside of the grid. All buttons in the grid fails while the one outside it does not.

    Also notice the DirectMethod FileUpload_UploadFile() is not called at all for the buttons on the grid. What I can say now is that, currently the MultiUpload component is not supported inside a GridPanel's WidgetColumn.

    We are now going to analyze whether it is a limitation or a bug and return to you with a solution soon.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again, with further investigation, we've found that not only multiupload, but direct events to any controls inside the `<widget />` domain are not working. As their nature is to be simpler, it is likely the reason they were not made to work with server-side events.

    The issue just created is #1248.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Here's an approach that will probably work for you. Instead of WidgetColumn use ComponentColumn as follows:
    <ext:ComponentColumn runat="server" Width="120" Text="Upload">
        <Component>
            <ext:MultiUpload
                runat="server"
                Hidden="false"
                OnFileUpload="MultiUpload_FileUpload"
                AutoStartUpload="true"
                FileDropAnywhere="true"
                FileSizeLimit="15 MB"
                FileTypes="*.*"
                FileTypesDescription="All Files"
                FileUploadLimit="100"
                FileQueueLimit="0">
                <Listeners>
                    <UploadError Fn="uploadError" />
                    <FileSelectionError Fn="fileSelectionError" />
                </Listeners>
            </ext:MultiUpload>
        </Component>
    </ext:ComponentColumn>
    EDIT: Sorry, this is not the case, ComponentColumn as well as WidgetColumns have this limitation, they don't work with DirectEvents. Due to this limitation, it is not feasible to use the MultiUpload component in grid panels.

    Daniil has just provided feedback on the issue created and found another question on forums that asked a similar question: ComponentColumn.

    In that question, there's a possibility to use directMethods from Listeners, but in your case, with MultiUpload, you'd also need to pass as a parameter to the directMethod the sent file data and other information that MultiUpload automatically inputs to the directEvent calls.
    Last edited by fabricio.murta; Jan 27, 2016 at 5:04 PM.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 0
    Last Post: Dec 05, 2014, 7:29 AM
  2. Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM
  3. Replies: 8
    Last Post: Feb 06, 2013, 6:27 PM
  4. [CLOSED] [1.0] Two component at GridPanel View
    By x1000 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 12, 2010, 8:42 AM
  5. Replies: 1
    Last Post: May 22, 2009, 7:38 AM

Posting Permissions