creating dynamic gridview with datepicker control drop down inside it

Anjali Agarwal 141 Reputation points

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";

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"
            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.

ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
411 questions
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
7,024 questions
.NET Standard
.NET Standard
A formal specification of .NET APIs that are available on multiple .NET implementations.
485 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Albert Kallal 3,451 Reputation points

    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;  
                    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;  
                // SAVE the file to our up-load folder  
                string sFile = Server.MapPath(@"~/Files/" + e.FileName);  

    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;  
                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.

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

    No comments