ASP.NET How to add javascript to dynamic gridview textbox (ItemTemplate)

Question

I have a gridview with dynamic textboxes and DDLs created.

On the textboxes out of the grid i have managed to apply the javascript i wanted and it works fine (keep in mind im a total javascript noob :S)

so ill post a simple example of my code with only one textbox but its fine since we only need one :)

HTML Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 337px">
            <asp:GridView ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false" OnSelectedIndexChanged="Gridview1_SelectedIndexChanged">
                <Columns>
                    <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
                    <asp:TemplateField HeaderText="Header 1">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField >

                        <FooterStyle HorizontalAlign="Right" />
                        <FooterTemplate>
                            <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
                                OnClick="ButtonAdd_Click" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>


            <br />

            <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
                <asp:ListItem>opt1</asp:ListItem>
                <asp:ListItem>opt2</asp:ListItem>
            </asp:DropDownList>

            <br />
            <br />


            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>



        </div>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#<%=TextBox2.ClientID %>").datepicker({
                showButtonPanel: true
            });
        });
    </script>
    </form>
</body>
</html>

C# Code

namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            setInitialRow();
        }
    }




    protected void Gridview1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }





    protected void ButtonAdd_Click(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }





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


        dr = dt.NewRow();
        dr["RowNumber"] = 1;
        dr["Column1"] = string.Empty;

        dt.Rows.Add(dr);


        ViewState["CurrentTable"] = dt;
        Gridview1.DataSource = dt;
        Gridview1.DataBind();
    }







    private void AddNewRowToGrid()
    {
        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++)
                {

                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");


                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;


                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;



                    rowIndex++;

                }

                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();

            }
            else
            {
                Response.Write("Viewstate is null");
            }
            SetPreviousData();
        }
    }






    private void SetPreviousData()
    {

        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        {

            DataTable dt = (DataTable)ViewState["CurrentTable"];

            if (dt.Rows.Count > 0)
            {

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");


                    box1.Text = dt.Rows[i]["Column1"].ToString();

                    rowIndex++;
                }
            }
        }
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        SetPreviousData();
        if (ViewState["CurrentTable"] != null)
        {

            DataTable dt = (DataTable)ViewState["CurrentTable"];

            if (dt.Rows.Count > 0)
            {
                TextBox box1 = (TextBox)Gridview1.Rows[(dt.Rows.Count - 1)].Cells[1].FindControl("TextBox1");
                box1.Text = DropDownList1.SelectedValue;
            }
        }

    }
}
}

I would like to apply the given javascript to the Textbox that is created by the GridView Control...

Thank you! :D

Answer 1

Change the selector of the jQuery function in order to get all the textboxes:

$("input[type=text]").datepicker({
            showButtonPanel: true
        });

EDITED:

Set a classname to those textboxes you want to apply the script:

  <asp:TextBox CssClass="myclass" runat="server"></asp:TextBox>

Then use this selector to apply the script code:

$(".myclass").datepicker({
        showButtonPanel: true
    });

Answer 2

Make ClientIDMode Property as Static

ClientIDMode="Static"

Check in browser debugger options for the issue

ASP.NET How to add javascript to dynamic gridview textbox (ItemTemplate)

Question

2 answers

solution1
2 ACCPTED 2016-01-19 11:08:14

solution2
0 2016-01-19 10:57:26

ASP.NET How to add javascript to dynamic gridview textbox (ItemTemplate)

Question

2 answers

solution1 2 ACCPTED 2016-01-19 11:08:14

solution2 0 2016-01-19 10:57:26

solution1
2 ACCPTED 2016-01-19 11:08:14

solution2
0 2016-01-19 10:57:26