How to fire when the text 's jquery datepicker is selectedRSS

2 replies

Last post Jun 03, 2019 02:23 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
hkbeer
Participant

753 Points

2406 Posts

How to fire when the text 's jquery datepicker is selected

Jun 02, 2019 01:01 PM|hkbeer|LINK

I have a date textbox which filters the Gridview.

I added a jquery datepicker to this textbox

How to make it fire when date is selected so the Gridview filter based on this date is selected ?

Thanks

Thanks. I will try to credit the ones who helped but most important is we really do sincerely thanks to all who have helped.

www.developerfusion.com/tools/convert/csharp-to-vb/
- Reply
bruce (sqlwo...
All-Star

55914 Points

14513 Posts

Re: How to fire when the text 's jquery datepicker is selected

Jun 02, 2019 08:49 PM|bruce (sqlwork.com)|LINK

try the docs:

https://api.jqueryui.com/datepicker/#option-onSelect

bruce (sqlwork.com)

Yongqing Yu

Contributor

3680 Points

1042 Posts

Re: How to fire when the text 's jquery datepicker is selected

Jun 03, 2019 02:23 AM|Yongqing Yu|LINK

Hi hkbeer,

According to your description,there are two ways for you to choose.

First, as Bruce recommends, you could use the onSelect event of the datepicker to call the Ajax method to rebind the filtered data to the gridview when you select a date.

Second, you could use the OnTextChanged event of textbox to get the date value selected by textbox directly in the code behind, then rebind the data filtered by gridview.

Here I use the second method to do an example, you could refer to the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../jquery-ui-1.12.1.custom/jquery-ui.structure.min.css" rel="stylesheet" />
    <link href="../jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Date:<asp:TextBox ID="datepicker" runat="server" OnTextChanged="datepicker_TextChanged" AutoPostBack="true"></asp:TextBox><br />
            <br />
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ResultId"  OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="ResultId" HeaderText="ResultId" InsertVisible="False" ReadOnly="True" SortExpression="ResultId" />
                    <asp:BoundField DataField="ResumeID" HeaderText="ResumeID" SortExpression="ResumeID" />
                    <asp:BoundField DataField="HRID" HeaderText="HRID" SortExpression="HRID" />
                    <asp:BoundField DataField="TelInterviewerID" HeaderText="TelInterviewerID" SortExpression="TelInterviewerID" />
                    <asp:BoundField DataField="F2FInterviewerID" HeaderText="F2FInterviewerID" SortExpression="F2FInterviewerID" />
                    <asp:BoundField DataField="AvgScore" HeaderText="AvgScore" SortExpression="AvgScore" />
                    <asp:BoundField DataField="Result" HeaderText="Result" SortExpression="Result" />
                    <asp:BoundField DataField="EntryDate" HeaderText="EntryDate" SortExpression="EntryDate" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }
        private void BindData(string date = "")
        {
            string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            StringBuilder strSql = new StringBuilder();
            strSql.Append("select * from ResumeResult");
            SqlParameter param = new SqlParameter();
            if (date != "")
            {
                strSql.Append(" where EntryDate = @EntryDate");
                param = new SqlParameter("@EntryDate", date);
            }
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                using (SqlCommand cmd = new SqlCommand(strSql.ToString(), connection))
                {
                    if (date != "")
                    {
                        cmd.Parameters.Add(param);
                    }
                    try
                    {
                        connection.Open();
                        SqlDataAdapter da = new SqlDataAdapter(cmd);
                        DataSet ds = new DataSet();
                        da.Fill(ds);
                        if(ds.Tables[0].Rows.Count <= 0)
                        {
                            Response.Write(" no data!");
                        }
                        GridView1.DataSource = ds.Tables[0];
                        GridView1.DataBind();
                    }
                    catch (SqlException ex)
                    {
                        throw new Exception(ex.Message);
                    }
                    finally
                    {
                        connection.Close();
                    }
                }
            }
        }
   
        protected void datepicker_TextChanged(object sender, EventArgs e)
        {
            string date = datepicker.Text.ToString().Trim();
            BindData(date);
        }

The result of my work demo:

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›