creating dynamic gridview with datepicker control drop down inside it

Question

I am trying to create a gridview that is created dynamically. I have a AjaxFileUpload control on my page. As soon as the user uploads the file, I want to show a grid or a table that shows an image icon, a date picker control, a drop down and the name of the file that is uploaded. The data for the drop down is coming from the database.

Below is the code behind:

 protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {



        }

        protected void grdtest_rowdatabound(object sender, GridViewRowEventArgs e)
        {
            tsContext ts = new tsContext();
            DropDownList ddlType = (DropDownList)e.Row.FindControl("ddlType");
            ddlType.DataSource = ts.DocumentType.ToList();
            ddlType.DataTextField = "id";
            ddlType.DataValueField = "description";
            ddlType.DataBind();
        }

when I upload the file using ajaxfileupload control, I want to show the grid with the icon, drop down and the name of the file that has been uploaded and a date picker control. I want the user to choose an item from the drop down and choose a date from the date picker control and the value to be read in code behind.

below is my ajax upload control:

 <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1"
            ThrobberID="myThrobber"
            ContextKeys="fred"
            AllowedFileTypes="jpg,jpeg"
            MaximumNumberOfFiles=10
            runat="server" OnUploadComplete="AjaxFileUpload1_UploadComplete"/>

I also made a gridview, but whenever I tried to post my gridview, I am getting access denied error so Ia m not putting it.

any help will be greatly appreciated.

Answer 1

Ok, we don't have your Types and table.

but, the idea here is you have the ajax file uploader.

So, we could have this markup:

Note that I am ONLY used in the File Upload complete event. it fires for each file.

I also NEED VERY much a means to run code after ALL is done, but I do NOT want to use the complete all event of the ajaxfile up-load since that is ONLY a web method call to the page - and without post-back, I really can't do much of anything. So, drop in a final plane jane button on the page - we will "trick/fool" the up-loader into clicking on that button when ALL is done. And we will use the client side "all done" event of the file up-load to do this

So, we have this markup:

Ok, and we have this code to drive the table you have (I suspect it comes from a database, but for now, just table and it will hold each file up-loaded.

So, we have this code so far:

        DataTable rstFiles = new DataTable();  
  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!IsPostBack)  
            {  
                rstFiles.Columns.Add("FileName", typeof(string));  
                rstFiles.Columns.Add("Type", typeof(int));  
                rstFiles.Columns.Add("RecordDate", typeof(DateTime));  
                rstFiles.Columns.Add("DestructionDate", typeof(DateTime));  
                Session["rstFiles"] = rstFiles;  
            }  
            else  
            {  
                rstFiles = (DataTable)Session["rstFiles"];  
            }  
        }  

If you have that table in a database - then of course we don't have to create the table in above code. But NOTE VERY carefully - we persisted the data table into session.

Ok, so now we have this:

Now we WILL HIDE the "done" button - but note how when all done, we click the "done" button.

So, now we have the server side each file complete code. That code looks like this:

        protected void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)  
        {  
            // one file done - save to our table  
            rstFiles = (DataTable)Session["rstFiles"];  
            DataRow MyFile = rstFiles.NewRow();  
            MyFile["FileName"] = e.FileName;  
            MyFile["RecordDate"] = DateTime.Today;  
            rstFiles.Rows.Add(MyFile);  
            // SAVE the file to our up-load folder  
            string sFile = Server.MapPath(@"~/Files/" + e.FileName);  
            AjaxFileUpload1.SaveAs(sFile);  
        }  

So now we up-load.

and right below the above up-loader, we have a grid, say like this:

Ok, so now when we hit up-load on the up-loader, we get this:

And our "done" button code - that gets clicked by the up-loader - it has this code:

       protected void cmdDone_Click(object sender, EventArgs e)  
        {  
            GridFiles.DataSource = rstFiles;  
            GridFiles.DataBind();  
  
            uploader.Style.Add("Display", "none");  
  
        }  

So when "all done" we send the table to the grid, and display it.

So the above quite much outlines how this can/will work.

As noted, I did not have a database table. And as a FYI, that database table would not only add the above file name, but ALSO should add the current user "ID" of who is logged into the site - that way your up-loading files, and presenting a user interface + grid for files "only" belong to the one logged on user in question.

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada