I want my ajaxToolkit:TabContainer to have a tabpanel that allows the user to add another tab. I only want it to postback when they have clicked the "+" tabpanel and no other.
I can't seem to stop the event bubbling in the Javascript:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function checkTab(sender, e) {
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") {
cancelBubble(e);
}
else {
if (!confirm('Are you sure?')) {
cancelBubble(e);
}
}
}
function cancelBubble(e) {
if (e) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" OnActiveTabChanged="MyTabContainer_OnActiveTabChanged"
AutoPostBack="true" OnClientActiveTabChanged="checkTab">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void MyTabContainer_OnActiveTabChanged(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
Thanks,
Alex
You can use return false; in JavaScript to stop a PostBack. So I think all you need is this:
function checkTab(sender, e)
{
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+")
{
return false;
}
else
{
return confirm('Are you sure?');
}
}
Add script below to your project and add reference on at at very bottom of page:
Sys.Extended.UI.TabPanel.prototype.raiseClick = function (eventArgs) {
var eh = this.get_events().getHandler("click");
if (eh) {
eh(this, eventArgs);
}
};
Sys.Extended.UI.TabPanel.prototype._header_onclick = function (e) {
e.preventDefault();
var eventArgs = new Sys.CancelEventArgs();
this.raiseClick(eventArgs);
if (eventArgs.get_cancel() === true)
return;
this.get_owner().set_activeTab(this);
this._setFocus(this);
};
Now we add capability to cancel click on particular tab on client. The sample of usage:
<script type="text/javascript">
function AddTabOnClientClick(sender, args) {
args.set_cancel(!confirm("Are you sure?"));
}
</script>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" AutoPostBack="true"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" OnClientClick="AddTabOnClientClick">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script src="Scripts/MyAjaxToolkitExtensions.js" type="text/javascript"></script>
Thanks to jadarnel27, this is the final solution I went for:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
<script type="text/javascript">
function addTab() {
if (confirm('Are you sure?')) {
document.getElementById('<%=AddTabButton.ClientID %>').click();
}
}
</script>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:Button ID = "AddTabButton" runat="server" OnClick="AddTabButton_OnClick" CssClass="DisplayNone" />
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true" OnClientClick="addTab">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void AddTabButton_OnClick(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
Related
I have a Gridview that has a hide/show panel. Inside the Panel there is a dropdown and a button. On button press I need the selected value of the dropdown, but I keep getting the first item, no matted what is selected.
I have been investigating the issue and it is to do with the panel control. If I place the dropdown outside the panel, everything works as intended. But dropdown only passes the first value when inside the panel.
Here is my code:
ASP Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="DD.aspx.cs" Inherits="DD" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
<script type="text/javascript">
$(document).on("click", '[src*=plus]', function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$(document).on("click", '[src*=minus]', function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT * FROM [Requests]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT [Name] FROM [Staff]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="RequestID" HeaderText="RequestID" InsertVisible="False" ReadOnly="True" SortExpression="RequestID" />
<asp:TemplateField>
<ItemTemplate>
<img runat="server" style="cursor: pointer" src="images/plus.png" />
<asp:UpdatePanel ID="pnlOrders" runat="server" Style="display: none" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="Name" DataValueField="Name" AutoPostBack="true">
</asp:DropDownList>
<asp:Button runat="server" ID="test" OnClick="test_Click" />
</ContentTemplate> </asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
C# Code
protected void test_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
DropDownList referalDD = gvr.FindControl("DD1") as DropDownList;
string www = referalDD.SelectedItem.Text;
string qqq = referalDD.SelectedItem.Value;
}
Can anyone help me to solve this issue
Ok so I have found a work around / solution. Thanks to Niko for the placeholder suggestion. I got rid of this code:
<img runat="server" style="cursor: pointer" src="images/plus.png" />
and the related Jquery
$(document).on("click", '[src*=plus]', function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$(document).on("click", '[src*=minus]', function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
})
Added a placeholder around the updatepanel and a Image button
<asp:ImageButton runat="server" ID="ShowHide" ImageUrl="~/images/plus.png" OnClick="ShowHide_Click" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="false">
And this code for the button click event.
protected void ShowHide_Click(object sender, EventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
PlaceHolder ph = gvr.FindControl("PlaceHolder1") as PlaceHolder;
if (btn.ImageUrl.ToString() == "~/images/plus.png")
{
ph.Visible = true;
btn.ImageUrl = "~/images/minus.png";
}
else
{
ph.Visible = false;
btn.ImageUrl = "~/images/plus.png";
}
}
Note: After further testing the whole issue was to do with UpdatePanel having this code Style="display: none" As soon as I removed this, everything worked. But I added the placeholder for by show/Hide feature.
I have this checkbox that I need to be AutoPostBack="True" so that I can trigger OnCheckedChanged="chkCompany_OnCheckedChanged". The problem is that I dont want the page to be refreshed and redirected, I want the user to stay put exactly where they are.
ASPX:
<asp:CheckBox OnCheckedChanged="chkCompany_OnCheckedChanged" AutoPostBack="True" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
C#:
protected void chkCompany_OnCheckedChanged(object sender, EventArgs e)
{
if (chkCompany.Checked)
{
txtName.Visible = false;
}
else
{
txtName.Visible = true;
}
}
You should use UpdatePanel control to do this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:CheckBox OnCheckedChanged="chkCompany_OnCheckedChanged" AutoPostBack="True" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Keep your code inside update pannel.
you can use javascript to do this,if Update panel does not work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type=text/javascript>
function CheckedChanged()
{
if((document.getElementById('chkCompany').checked))
`{`
document.getElementById('txtname').Visible=false;
}
`else`
{
document.getElementById('txtname').Visible=false;
`}`
}
</script>
</head>
<body>
<asp:CheckBox OnCheckedChanged="CheckedChanged" AutoPostBack="false" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
<asp:TextBox ID="txtname" runat="server"/>
</body>
</html>
-----------------------------------------------------------------------------
Here is another solution but for DropDownCheckList.
The same works for CheckBox.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<cwc:DropDownCheckList runat="server" ID="myId" AutoPostBack="True" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myId" />
</Triggers>
</asp:UpdatePanel>
I want to show progressBar of microsoft ajax that have an image inside one button, when user clicks that button. but i do not khow how to do that?I khow how show progressbar.my problem is showing it inside button!
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="up">
<ProgressTemplate>
<div class="PlaeseWaite">
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Your aspx code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex:-1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
//Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
prm.add_beginRequest(BeginRequestHandler);
// Raised after an asynchronous postback is finished and control has been returned to the browser.
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Shows the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.show();
}
}
function EndRequestHandler(sender, args) {
//Hide the modal popup - the update progress
var popup = $find('<%= modalPopup.ClientID %>');
if (popup != null) {
popup.hide();
}
}
</script>
<div>
<asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="waiting.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxToolkit:ModalPopupExtender ID="modalPopup" runat="server" TargetControlID="UpdateProgress"
PopupControlID="UpdateProgress" BackgroundCssClass="modalPopup" />
<asp:UpdatePanel ID="pnlData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
and code behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
Here is Solution
I am using asp requiredfieldvalidator. I want the required field validator to fire only when a checkbox on my form is checked.
When the checkbox is fired, the validator works as expected and error message shows up but when the checkbox is unchecked the errormessage that showed up stays on the screen. I have tried different options like validator.resetForm(); disabling the validator, hiding the validator but the error message stays on the screen form. Here is the simplified version of my code:
<script src="jquery-1.4.2.min.js"></script>
<!DOCTYPE html>
<script type="text/javascript">
function enableDisableControls(value) {
var enabledSilentPost = $("#<%=chkEnableSilentPost.ClientID%>").attr("checked");
var validatorControl = $("#<%=valApprovalURL.ClientID%>")[0];
ValidatorEnable(validatorControl, enabledSilentPost);
// If the checkbox is false then assume that the
if (!enabledSilentPost) {
validatorControl.enabled = false;
}
}
$(document).ready(function () {
$("#<%=chkEnableSilentPost.ClientID%>").click(function () {
enableDisableControls();
});
enableDisableControls();
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:CheckBox ID="chkEnableSilentPost" runat="server" Width="250px" Text="Enable" />
<asp:Label ID="lblApprovalURL" runat="server" Text="URL" CssClass="controllabel" meta:resourcekey="lblApprovalURLResource"></asp:Label>
<asp:TextBox ID="txtApprovalURL" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valApprovalURL" runat="server" ControlToValidate="txtApprovalURL" ErrorMessage="Please enter Valid Text" Text="*"></asp:RequiredFieldValidator>
<actk:ValidatorCalloutExtender ID="extApprovalURL" TargetControlID="valApprovalURL" runat="server" Enabled="True"></actk:ValidatorCalloutExtender>
</div>
</form>
I am was able to get the validators to react by doing the following. The Validator was pretty simpe, but I had to predict the ID of the Extender in order for it to work:
<script type="text/javascript">
$(function () {
$('#<%=chkEnableSilentPost.ClientID %>').click(function () {
$("#<%=valApprovalURL.ClientID %>").toggle(this.checked);
$("#extApprovalURL_popupTable").toggle(this.checked);
});
});
</script>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<div>
<asp:CheckBox ID="chkEnableSilentPost" runat="server" Width="250px" Text="Enable" />
<asp:Label ID="lblApprovalURL" runat="server" Text="URL" CssClass="controllabel" meta:resourcekey="lblApprovalURLResource"></asp:Label>
<asp:TextBox ID="txtApprovalURL" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="valApprovalURL" runat="server" ControlToValidate="txtApprovalURL" ErrorMessage="Please enter Valid Text" Text="*"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="extApprovalURL" TargetControlID="valApprovalURL" runat="server" Enabled="True"></asp:ValidatorCalloutExtender>
</div>
</form>
There is a jQuery Dialog with a GridView inside it in my aspx page. also have a button as Save on jQuery Dialog. I need to get values in GridView after click on this button in C#. I have tried as below. But not worked. I changed value in TextBox and click Save button. But it is not gave me edited value. nothing returned.
ASPX Page
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
/* Java scripts and style sheets are here */
<script type="text/javascript">
function showDialog() {
$('#dialogDiv').dialog('open');
}
$(document).ready(function () {
$('#dialogDiv').dialog({
autoOpen: false,
resizable: true,
width: 300,
height: 'auto',
buttons: {
"Save": function () {
$('#' + '<%= btnSaveType.ClientID %>').trigger("click");
}
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="dialogDiv" title="Type" style="overflow: hidden">
<div id="TypeDiv" class="divTable">
<div class="divRow">
<div class="divColumn">
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="open" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="Type_GV" runat="server" ShowFooter="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:TextBox ID="txtType" runat="server" Text='<%# Bind("Type") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="open" runat="server" Text="Open dialog" OnClick="open_Clicked" OnClientClick="showDialog()" />
<br />
<p>
<asp:Button ID="btnSaveType" runat="server" OnClick="btnSaveType_Clicked" Style="visibility: hidden;
display: none;" />
</p>
</asp:Content>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void open_Clicked(object sender, EventArgs e)
{
VehicleType vTypeObject = new VehicleType();
Type_GV.DataSource = vTypeObject.GetTypeList();
Type_GV.DataBind();
}
protected void btnSaveType_Clicked(object sender, EventArgs e)
{
foreach (GridViewRow gvr in Type_GV.Rows)
{
TextBox type = (TextBox)gvr.FindControl("txtType");
Debug.WriteLine("type : " + type.Text);
// when debug, print as type :
// nothing print for type.Text
}
}
}
public class VehicleType
{
public string Type { get; set; }
public List<VehicleType> GetTypeList()
{
List<VehicleType> list = new List<VehicleType>()
{
new VehicleType{Type="Type1"}
};
return list;
}
}
How can i solve this ?