user6634447 user6634447 - 2 months ago 18
Ajax Question

Trigger postback on value change in GridView

I'm using dyndatetime as in this link DyntimeSample

This is used in a gridview, Whenever the user selects a new date or time I want to trigger a postback using update panel.I have tried tracking the value assigned textbox change event but it was not working.Please suggest a solution.
In the below code I want to trigger textbox on change event.
EDIT: Added code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"> </script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>





<script type = "text/javascript">
$(document).ready(function () {
$(".Calender").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Person" />
<asp:TemplateField HeaderText="Date Of Birth">
<ItemTemplate>
<asp:TextBox ID="txtDOB" style="border: 0px solid #505050;" AutoPostBack="True" OnTextChanged="txtDOB_OnTextChanged" runat="server" ReadOnly="true" class = "Calender" />
<img src="calender.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
</div>
</form>
</body>



Code behind

using System;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.BindGridWithDummyData();
}
}

private void BindGridWithDummyData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name");
dt.Columns.Add("DateOfBirth");
dt.Rows.Add();
dt.Rows[0]["Name"] = "John";
dt.Rows.Add();
dt.Rows[1]["Name"] = "Sam";
dt.Rows.Add();
dt.Rows[2]["Name"] = "Tommy";
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void btnSave_Click(object sender, EventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
DateTime dob = DateTime.Parse(Request.Form[row.FindControl("txtDOB").UniqueID]);
//Save the date to Database here
}
}

protected void txtDOB_OnTextChanged(object sender, EventArgs e)
{
}
}

Answer

Note: If you set updateMode to conditional in the update panel, in that case you need to add Triggers. In the code behind file under TextBox1_TextChanged event, you can get the latest value using sender.text property.

Try using the following:

<asp:ScriptManager ID="scrManager" runat="server">
</asp:ScriptManager>    
 <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:GridView ID="grdNumber" runat="server">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="txtNumber" runat="server" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlNumber" runat="server" OnSelectedIndexChanged="ddlNumber_SelectedIndexChanged"
                            AutoPostBack="true">
                            <asp:ListItem>One</asp:ListItem>
                            <asp:ListItem>Two</asp:ListItem>
                            <asp:ListItem>Three</asp:ListItem>
                            <asp:ListItem>For</asp:ListItem>
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

In the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();
        dt.Rows.Add();

        grdNumber.DataSource = dt;
        grdNumber.DataBind();
    }
}

protected void ddlNumber_SelectedIndexChanged(object sender, EventArgs e)
{

}

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    var value = (sender as TextBox).Text;
}

For more, check this link: http://www.aspsnippets.com/Articles/Assign-PostBack-Trigger-Full-PostBack-for-LinkButton-inside-GridView-within-AJAX-UpdatePanel-in-ASPNet.aspx

Comments