DateTime picker in dynamically created Rows in Grid View : The Official Microsoft ASP.NET Forums

Reply

gopalchettri

Member

39 Points

39 Posts

DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 09:45 AM|LINK

Hi thanx's for checking the problem.

Problem: How to implement datetimepicker(jquery) in dynamically created rows' in gridview.

I have created a Gridview,that add' rows dynamically.I have a Year column in gridview where i want to implement the datetimepicker.But failed to do so.

Help will be highly appriciated. I am attaching the code : below codes are working perfectly and rendering the datetimepicker for only ist row.but for dynamically row's its not working. If any one have done such kind please help me out.

.aspx page

<div>

<asp:GridView ID="GridViewDiploma" runat="server" ShowFooter="True" 
                    AutoGenerateColumns="False" GridLines="None" 
                    onrowcreated="GridViewDiploma_RowCreated">
                    <Columns>
                        <asp:BoundField DataField="RowNumber" HeaderText="Row" Visible="false"  />
                        <asp:TemplateField HeaderText="Subject">                                                      
                            <ItemTemplate>
                                <asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
                            </ItemTemplate>
                            <FooterTemplate>
                                <asp:LinkButton ID="lnkAddAnotherDiploma" runat="server" Text="Add Another Diploma" OnClick="lnkAddAnotherDiploma_click"/>
                            </FooterTemplate>
                        </asp:TemplateField>
                        
                        <asp:TemplateField HeaderText="Year Passed">
                            <ItemTemplate>

                                 <asp:TextBox ID="txtYearPassed" ClientIDMode="Static" runat="server"></asp:TextBox>                                
                               
                            </ItemTemplate>
                        </asp:TemplateField>
 
                        <asp:TemplateField HeaderText="University">
                            <ItemTemplate>
                                <asp:TextBox ID="txtUniversity" runat="server"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
 
                        <asp:TemplateField HeaderText="Address">
                            <ItemTemplate>
                                <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
 
                        <asp:TemplateField HeaderText="Country">
                            <ItemTemplate>
                                <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
                            </ItemTemplate>
                                                       
                        </asp:TemplateField>
                        
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkDiplomaRemove" runat="server" Text="Remove" OnClick="lnkDiplomaRemove_Click"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                        
                    </Columns>
                </asp:GridView>

</div>

 <script type="text/javascript">
 
        $("#txtYearPassed").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1910:Now'
 
        });
 
    </script>


aspx.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
 
 
namespace BencosLabs.en.profile
{
    public partial class Education : System.Web.UI.Page
    {       
        private void SetInitialRow()
        {
            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Column1", typeof(string)));
            dt.Columns.Add(new DataColumn("Column2", typeof(string)));
            dt.Columns.Add(new DataColumn("Column3", typeof(string)));
            dt.Columns.Add(new DataColumn("Column4", typeof(string)));
            dt.Columns.Add(new DataColumn("Column5", typeof(string)));
            
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Column1"] = string.Empty;
            dr["Column2"] = string.Empty;
            dr["Column3"] = string.Empty;
            dr["Column4"] = string.Empty;
            dr["Column5"] = string.Empty;
            dt.Rows.Add(dr);
            //dr = dt.NewRow();
 
            //Store the DataTable in ViewState
            ViewState["CurrentTable"] = dt;
 
            GridViewDiploma.DataSource = dt;
            GridViewDiploma.DataBind();
 
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                SetInitialRow();
            }
        }
 
        protected void GridViewDiploma_RowCreated(object sender, GridViewRowEventArgs e)
        {
            //hide the remove button at the last row of the gridview
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataTable dt = (DataTable)ViewState["CurrentTable"];
                LinkButton lb = (LinkButton)e.Row.FindControl("lnkDiplomaRemove");
                if (lb != null)
                {
                    if (dt.Rows.Count > 1)
                    {
                        if (e.Row.RowIndex == dt.Rows.Count - 1)
                        {
                            lb.Visible = false;
                        }
                    }
                    else
                    {
                        lb.Visible = false;
                    }
                }
            }
        }
       
        protected void lnkDiplomaRemove_Click(object sender, EventArgs e)
        {
            LinkButton lb = (LinkButton)sender;
            GridViewRow gvRow = (GridViewRow)lb.NamingContainer;
            int rowID = gvRow.RowIndex + 1;
            if (ViewState["CurrentTable"] != null)
            {
                DataTable dt = (DataTable)ViewState["CurrentTable"];
                if (dt.Rows.Count > 1)
                {
                    if (gvRow.RowIndex < dt.Rows.Count - 1)
                    {
                        //Remove the Selected Row data
                        dt.Rows.Remove(dt.Rows[rowID]);
                    }
                }
                //store the current data in ViewState for future reference
                ViewState["CurrentTable"] = dt;
                //rebind the GridView for the updated data
                GridViewDiploma.DataSource = dt;
                GridViewDiploma.DataBind();
            }
 
            //set previous Data on Postbacks
            SetPreviousData();
        }
 
        private void SetPreviousData()
        {
            int rowIndex = 0;
            if (ViewState["CurrentTable"] != null)
            {
                DataTable dt = (DataTable)ViewState["CurrentTable"];
                if (dt.Rows.Count > 0)
                {
                    for (int i = 1; i < dt.Rows.Count; i++)
                    {
                        TextBox box1 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[1].FindControl("txtSubject");
                        TextBox box2 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[2].FindControl("txtYearPassed");
                        TextBox box3 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[3].FindControl("txtUniversity");
                        TextBox box4 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[4].FindControl("txtAddress");
                        TextBox box5 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[5].FindControl("txtCountry");
                        
 
                        box1.Text = dt.Rows[i]["Column1"].ToString();
                        box2.Text = dt.Rows[i]["Column2"].ToString();
                        box3.Text = dt.Rows[i]["Column3"].ToString();
                        box4.Text = dt.Rows[i]["column4"].ToString();
                        box5.Text = dt.Rows[i]["column5"].ToString();
                        rowIndex++;
 
                    }
                }
            }
        }
 
        protected void lnkAddAnotherDiploma_click(object sender, EventArgs e)
        {
            AddNewRowforDiploma();
        }
 
        private void AddNewRowforDiploma()
        {
            int rowIndex = 0;
            if (ViewState["CurrentTable"] != null)
            {
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
                DataRow drCurrentRow = null;
                if (dtCurrentTable.Rows.Count > 0)
                {
                    for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                    {
                        //extract the TextBox values
                        TextBox box1 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[1].FindControl("txtSubject");
                        TextBox box2 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[2].FindControl("txtYearPassed");
                        TextBox box3 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[3].FindControl("txtUniversity");
                        TextBox box4 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[4].FindControl("txtAddress");
                        TextBox box5 = (TextBox)GridViewDiploma.Rows[rowIndex].Cells[5].FindControl("txtCountry");
 
 
                        drCurrentRow = dtCurrentTable.NewRow();
 
                        drCurrentRow["RowNumber"] = i + 1;
                        drCurrentRow["Column1"] = box1.Text;
                        drCurrentRow["Column2"] = box2.Text;
                        drCurrentRow["Column3"] = box3.Text;
                        drCurrentRow["Column4"] = box4.Text;
                        drCurrentRow["Column5"] = box5.Text;
 
                        rowIndex++;
                    }
                    dtCurrentTable.Rows.Add(drCurrentRow);
                    ViewState["CurrentTable"] = dtCurrentTable;
 
                    GridViewDiploma.DataSource = dtCurrentTable;
                    GridViewDiploma.DataBind();
                }
            }
            else
            {
                Response.Write("ViewState is null");
            }
 
            //set previous data on PostBack
            SetPreviousData();
        }
    }
}

Regards,
GopalChettri
(MCP)

Reply

mitja.GTI

Star

11157 Points

2094 Posts

Re: DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 11:55 AM|LINK

Hi,

is your GridView in UpdatePanel?

Please "Mark As Answer" if the post helped you.
mitja.gti | www.mitjagti.com
MCC

Reply

gopalchettri

Member

39 Points

39 Posts

Re: DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 11:58 AM|LINK

No, i m not using update panel

Regards,
GopalChettri
(MCP)

Reply

mitja.GTI

Star

11157 Points

2094 Posts

Re: DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 12:07 PM|LINK

Ok,

then please try to use Class instead of ID

<script type="text/javascript">
        $(function () {
            $('.MyDatePicker').datepicker();
        });
    </script>

Please "Mark As Answer" if the post helped you.
mitja.gti | www.mitjagti.com
MCC

Edited by mitja.GTI on Oct 19, 2010 12:09 PM

Reply

gopalchettri

Member

39 Points

39 Posts

Re: DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 01:04 PM|LINK

Perfect.

Thanks' its working the way i wanted.

Well one more thing, if i use update panel. datepicker is not coming. So can you tell me how can i solve this issue. !

Regards,
GopalChettri
(MCP)

Reply

mitja.GTI

Star

11157 Points

2094 Posts

Re: DateTime picker in dynamically created Rows in Grid View

Oct 19, 2010 02:04 PM|LINK

Hi,

It would be nice if you would mark the post that helped you as answer.

And yes, you need to use prerequestmanager and endrequest event

<script type="text/javascript">
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(EndRequest);
            function EndRequest(sender, args) {
                $(".MyDatePicker").datepicker();
            }
        </script>

basicly what this does is calls that function again after update panel updates.

For clean solution you should put datepicker "initialize" in function and call that function on document.ready and also on endrequest, something like this:

    <script type="text/javascript">
        function MyDatePickerInit() {
            $('.MyDatePicker').datepicker();
        }
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(EndRequest);
        function EndRequest(sender, args) {
            MyDatePickerInit();
        }

        $(function () {
            MyDatePickerInit();
        });
    </script>

Please "Mark As Answer" if the post helped you.
mitja.gti | www.mitjagti.com
MCC