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)
{
}
}
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
Related
I have gridView were if the user clicks on a button I want to give its informations to popup.
Here is the javascript to open and close the popup
<script type="text/javascript">
function ShowModalPopup() {
$find("mpe").show();
return false;
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
Here is were my button is
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/shopping.png" runat="server" ToolTip="Shopping" Width="20px" Height="20px" OnClick="makePurchaseOrder" />
</ItemTemplate>
</asp:TemplateField>
here is what happens when I call the button
protected void makePurchaseOrder(object sender, EventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
int rowindex = gvr.RowIndex;
var idrow = (Control)sender;
GridViewRow row = (GridViewRow)idrow.NamingContainer;
componenteID = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[0]);
proveedor_id = Convert.ToInt32(gvInventario.DataKeys[row.RowIndex].Values[2]);
Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup();", false);
}
This is what my modual popup looks like
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" style="display: none">
<div >
<div class="modal-content">
<asp:Button ID="btnHide" runat="server" OnClientClick="return HideModalPopup()" />
<a class="close" href="#" >×</a>
<h2>Here i am</h2>
<div class="content">
<asp:Label ID="Label17" runat="server" Text="Comprar" CssClass="second-menu-title"></asp:Label>
<br/>
<b><asp:Label ID="Label18" runat="server" Text="Proveedor: "></asp:Label></b>
<asp:Label ID="Label19" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label20" runat="server" Text="Tipo: "></asp:Label></b>
<asp:Label ID="Label21" runat="server" Text=""></asp:Label>
<asp:Label ID="Label22" runat="server" Text=""></asp:Label>
<br/>
<b><asp:Label ID="Label23" runat="server" Text="Cantidad pedida: "></asp:Label></b>
<asp:TextBox width="50px" ID="TextBox2" runat="server" TextMode="Number" min="0" step="1" Value="0"></asp:TextBox>
<br/>
</div>
</div>
</div>
</asp:Panel>
The probelm is the modual popup does not appear on the button click. I am unsure why. Any help would be verry appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function ShowModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
function HideModalPopup() {
$('#<%= pnlPopup.ClientID %>').toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvTest" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClick="Unnamed_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Panel ID="pnlPopup" runat="server" style="display:none;">
<asp:ImageButton ID="btnTest" ImageUrl="~/Images/system/RightArrow.png" runat="server" OnClientClick="HideModalPopup(); return false;" />
<p>Content Goes here</p>
</asp:Panel>
</div>
</form>
</body>
</html>
public partial class _testPWforSO : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
int rowcount = 0;
Collection<Product> products = InternalProduct.FindAll(0, 10, ref rowcount);
gvTest.DataSource = products;
gvTest.DataBind();
}
}
protected void Unnamed_Click(object sender, ImageClickEventArgs e)
{
// code to find out which one was clicked
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenPopupClick", "ShowModalPopup()", true);
}
}
The values set from javascript is getting cleared after postback, I'm setting value to gridview process column from setdata button client click but when the button in start column is clicke the value set previously is cleared. Please see the code below and suggest a solution.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function SetData(name, name2) {
document.getElementById(name).innerHTML = 'data.d.Name';
document.getElementById(name2).innerHTML = 'data.d.Name2';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:GridView ID="gvMonitoring" runat="server" Width="100%" AllowPaging="false" PageSize="10"
AutoGenerateColumns="false" DataKeyNames="Id"
EnableViewState="true" OnRowDataBound="gvMonitoring_OnRowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name 2">
<ItemTemplate>
<asp:Label ID="lblName2" runat="server" EnableViewState="True" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Set Data">
<ItemTemplate>
<asp:Button ID="btnSetData" runat="server" Text="Set Data" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Start">
<ItemTemplate>
<asp:Button ID="btnStartTime" runat="server" Text="Postback" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
public partial class ProcessDetail
{
public long Id { get; set; }
public string Name { get; set; }
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var details = new List<ProcessDetail>();
for (var i = 1; i <= 5; i++)
{
details.Add(new ProcessDetail() { Name = "Process " + i});
}
gvMonitoring.DataSource = details;
gvMonitoring.DataBind();
}
}
protected void gvMonitoring_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var lblName = ((Label)e.Row.FindControl("lblName"));
var lblName2 = ((Label)e.Row.FindControl("lblName2"));
((Button)e.Row.FindControl("btnSetData")).Attributes.Add("onclick", string.Format("SetData('{0}','{1}');return false;", lblName.ClientID, lblName2.ClientID));
}
}
}
To clarify #Imad, a postback is a complete page reload. Thus if you have any javascript it will also be reloaded. Which will clear out any values you stored. If you have to mix javascript with web forms there are two ways that I would recommend.
1) Your javascript will need to use ajax calls and update controls. Only using postback on a complete save. Meaning if you have a form and it takes Someones name/address. I would validate the data through ajax. And then, when it is all correct I would trigger a postback for save.
2) Create some Hidden Fields, that would hold the important var's that you need to save, and access those through server tags <%= =>. This way is pretty terrible but it can be done.
This code worked in another page
But it's not working in the new page
JS Function to be called:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
function myfun() {
alert("test");
}
</script>
</asp:Content>
Html code:
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton CssClass="Link" ID="IMGDetail"
ClientIDMode="Static" runat="server"
ImageUrl="~/Img/Detail.png" Height="19px"
Width="19px" OnClick="IMGDetail_Click" ToolTip="Detail" />
</ItemTemplate>
</asp:TemplateField>
Code behind:
protected void IMGDetail_Click(object sender, ImageClickEventArgs e) {
LinkButton lbtn = (LinkButton) sender;
GridViewRow gvr = (GridViewRow) lbtn.NamingContainer;
Label LabelTicketId = (gvr.FindControl("LBTicketId") as Label);
Session["TicketId"] = LabelTicketId.Text;
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "myfun()", true);
}
I think you need to add following tag in your aspx page.
<asp:ScriptManager ID="ScriptManager" runat="server" />
In Codebehind
ScriptManager.RegisterStartupScript(this, typeof(string), "myfun", "myfun()", true);
I am having problem with the script of passing values from child to parent with tabpanel (controller). Within that Tab there's a textbox. When I tried to pass a value that within the TabPanel it doesn't work. When I removed the panel it works.
Here the html script from
Parent.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<HeaderTemplate>
TabPanel1<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</HeaderTemplate>
<ContentTemplate>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Button" />
</div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</cc1:TabPanel>
</cc1:TabContainer>
</form>
</body>
</html>
and here's the child and Javascript
child.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Initialtest" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Initialtest2" runat="server"></asp:TextBox>
<br />
<%--<input type="button" value="Select" onclick="SetName();" />--%>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("TextBox1");
txtName.value = document.getElementById("Initialtest").value;
var txtName1 = window.opener.document.getElementById("TextBox2");
txtName1.value = document.getElementById("Initialtest2").value;
}
alert("test");
window.close();
}
</script>
</form>
</body>
</html>
the child.aspx.cs (code behind)
public partial class Child : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
//protected void Button1_Click(object sender, EventArgs e)
//{
// //
// Button1.Attributes.Add("onclick", "javascript:SetName();");
//}
protected void Button1_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "SetName()", true);
}
}
The scenario child must pass the value to textbox1 within that TabPanel. Hoping that someone will help me to resolve the problem.
Done, I resolved this problem.
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("TextBox1");
txtName.value = document.getElementById("Initialtest").value;
var txtName1 = window.opener.document.getElementById("TextBox2");
txtName1.value = document.getElementById("Initialtest2").value;
}
alert("test");
window.close();
}
</script>
I have this gridpanel:
<ext:GridPanel ID="GridPanel1" runat="server" Width="300px" Height="200px" Header="false">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:ComponentColumn ID="comColName" runat="server" Flex="1" Text="Name">
<Component>
<ext:Container ID="container" runat="server" Layout="HBoxLayout">
<Items>
<ext:TextField ID="txt1" runat="server" Flex="1"></ext:TextField>
<ext:Button ID="btn1" runat="server" Width="22px" Icon="Add">
</ext:Button>
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
And the code behind is:
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[] {
new object[] {},
new object[] {},
new object[] {},
new object[] {},
new object[] {},
new object[] {}
};
this.Store1.DataBind();
}
The screenshot looks like:
What i want to do is display only the textfields at start, then display the add button at right when a textfield is clicked. All other buttons should be hidden at that time.
How can I do this?I want to achieve this using client side scripting. Please help. Hiding another column while editing a column cell might work as well. Thank you.
Example
<%# Page Language="C#" %>
<%# Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] {},
new object[] {},
new object[] {}
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
runat="server"
Width="300"
Height="200">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:ComponentColumn runat="server" Flex="1" Text="Name">
<Component>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:TextField runat="server" Flex="1">
<Listeners>
<Focus Handler="this.ownerCt.getComponent('AddButton').show();" />
<Blur Handler="this.ownerCt.getComponent('AddButton').hide();" />
</Listeners>
</ext:TextField>
<ext:Button
runat="server"
ItemID="AddButton"
Width="22"
Icon="Add"
Hidden="true" />
</Items>
</ext:Container>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
By the way, there is a TextField's RightButtons collection which you might want to use instead. Here is an example.