I have a textbox which when a users fills in the box and hits return does an auto postback and the update panel is there to just refresh that part of the page where the textbox is located.
I have attached to that textbox a requiredfieldvalidator which needs to fire if the user does not complete the box when they to move off to the next step in the wizard control.
The problem is that the validator is not firing, and I cannot see why? Is this a bug in ASP or do I need to do something else to validate inside an Update Panel?
I had the same problem with a modal and a UpdatePanel, you have to add in the requirefilevalidator property as a ValidationGroup="groupvalidationX", the same for the Button:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:RequiredFieldValidator runat="server" ID="rfvtxtClave" ForeColor="Red"
ControlToValidate="txtClaveDependencia" Display="Dynamic"
ErrorMessage="Rellena este campo" SetFocusOnError="true"
ValidationGroup="validacionesDependencia">
</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtClaveDependencia" MaxLength="10"
autocomplete="off" placeholder="Clave de la dependencia"
Style="display: inline" CssClass="form-control tb8">
</asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnGuardarDependencia" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="btnGuardarDependencia"
CssClass="btn btn-block botonAfirmacion"
ValidationGroup="validacionesDependencia"
Text="Guardar dependencia" CausesValidation="true"
OnClick="btnGuardarDependencia_Click" />
Because AutoPostBack is set to true, I believe the client-side validation process isn't able to fire when it needs to.
Try adding CausesValidation="True" to the TextBox.
Related
I have a GridButtonColumn in my RadGrid and I want to open a ModalPopupExtender on click event of the GridButtonColumn. Now the problem is what do I have to give in TargetControlID in my ModalPopupExtender?
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID=""
RepositionMode="RepositionOnWindowResize" PopupCo## Heading##ntrolID="TargetTemplatePanel"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
You can set the ModalPopupExtender's TargetControlID to pretty much any server-side control you want. Here's an example from a project of mine:
<div id="rscmain" runat="server">
<telerik:RadScriptManager ID="SM1" runat="server" EnablePageMethods="true" />
</div>
<asp:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="rscmain" />
I had a nightmare getting this going.
Adding the ModalPopupExtender to a form is easy, you drop it on and tell it the two required controls parameters
PopupControlID="MyModalPanel"
TargetControlID="ButtonToLoadIt"
And it just works fine, but is triggered by a client side click of the Target Control.
If you want to do some server side code behind??? how to do it ?
The example code is shown below:
HTML CODE:
<!-- Hidden Field -->
<asp:HiddenField ID="hidForModel" runat="server" />
<asp:ModalPopupExtender
ID="WarningModal"
TargetControlID="hidForModel"
runat="server"
CancelControlID="btnWarning"
DropShadow="true"
PopupControlID="pnlIssues" >
</asp:ModalPopupExtender>
<!-- Panel -->
<asp:Panel ID="pnlIssues" runat="server"
BorderColor="Black" BorderStyle="Outset"
BorderWidth="2" BackColor="Wheat" Width="400px" Height="106px">
<center>
<h2 class="style2">
Information</h2>
<p>
<h3> <asp:Label ID="lblWarning"
runat="server"> </asp:Label></h3>
</p>
<!-- Label in the Panel to turn off the popup -->
<asp:ImageButton ID="btnWarning" runat="server"
ImageUrl="~/images/buttons/update.png" />
</center>
</asp:Panel>
C# Code
WarningModal.Show();
lblWarning.Text = "This is a popup warning";
for ref s
http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True"/><br>
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/><br>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
protected void Button1_Click(object sender, EventArgs e) {
if (Attorney.Checked) {
Pane2.Visible = true;
} else {
Pane2.Visible = false;
}
//Message1.Text = Age1.Text;
}
I have five Accordion Panels. Last Panel should be displayed only if a checkbox is checked in the first panel. Inside each Accordion Panel I have a UpdatePanel and within that I have ContentTemplate with controls and submit button particular to that accordion panel. The reason I added UpdatePanel is so that when i update a particular panel it does not affect other accordion panels.
The problem is I need to toggle last accordion panel display depending upon if a checkbox is checked in the first Panel and submit button is clicked. In Code behind, in the btnSubmit1 event...I have code that says if checkbox is checked....Pane2.Visible = true else Pane2.Visible=false. For some reasons it still shows the LastPanel.
I am not sure where am I going wrong...please advise!
Thanks!
Jini
I fixed the problem by adding an outer update panel...and removed the updatepanel for Panel 2. Haven't tested it thoroughly but so far looks good.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="OuterPanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True" /><br />
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
I'd like to see your code to be sure, but I'm expecting it's because you have an UpdatePanel in each of the AccordionPanels. Once an event happens in one UpdatePanel, ASP.NET will not run code handling that event that is attached to another UpdatePanel.
First, I'd take out all UpdatePanels to see if your code works as expected. Then, I'd add one UpdatePanel wrapped around the entire Accordion and see if your code still works.
If you really decided you need to have 5 UpdatePanels, look into the <Triggers> portion of the UpdatePanel. You'll be able to provide the CheckBox's ID to force the other associated UpdatePanel to PostBack.
I wrote the following code, based on telerik examples:
<telerik:RadComboBox ID="rcbPageSize"
runat="Server"
skin="Gray"
AllowCustomText="true"
Style="float:right; margin-left: 5px;"
Width="60px"
OnClientTextChange = "PageSizeChanged"
OnClientSelectedIndexChange = "PageSizeChanged">
<Items>
<telerik:RadComboBoxItem runat="Server" Text="10" Value="10" />
<telerik:RadComboBoxItem runat="Server" Text="20" Value="20" Selected="true" />
<telerik:RadComboBoxItem runat="Server" Text="50" Value="50" />
<telerik:RadComboBoxItem runat="Server" Text="150" Value="150" />
<telerik:RadComboBoxItem runat="Server" Text="250" Value="250" />
</Items>
</telerik:RadComboBox>
<telerik:RadCodeBlock ID="rcb" runat="server">
<script type="text/javascript">
function PageSizeChanged(sender, eventArgs) {
alert("You typed " + sender.get_text());
}
</script>
</telerik:RadCodeBlock>
When I change the selection, the function "PageSizeChanged" is called, but when I change the text by typing inside the combobox, the function is never called.
Anyone has a suggestion why?
Thanks,
Inbal.
I find it's definitely a 'feature' of this Telerik control. If you use your code, type something, press enter and then click outside the box the event will fire.
Just pressing enter or just clicking outside don't fire it on their own.
I'm using a slightly newer version of the Telerik controls as the skin Gray has been deprecated but I'm assuming it will be the same in your version.
OnClientTextChange WILL NOT fire until the user hits Enter or clicks outside the RadComboBox. Says so here: http://www.telerik.com/help/aspnet-ajax/combobox-onclienttextchange.html
You will have to set AutoPostBack="true", to fire server events.
<telerik:RadComboBox ID="rcbPageSize"
AutoPostBack="true"
runat="Server"
skin="Gray"
AllowCustomText="true"
Style="float:right; margin-left: 5px;"
Width="60px"
OnClientTextChange = "PageSizeChanged"
OnClientSelectedIndexChange = "PageSizeChanged">
Trying to update RadDock (open/close it) by putting it in UpdatePanel however no luck....I'm getting the following response.
189|error|500|Invalid JSON primitive: {"Top":179,"Left":583,"DockZoneID":"","Collapsed":false,"Pinned"
:false,"Resizable":false,"Closed":false,"Width":"300px","Height":null,"ExpandedHeight":0,"Index":-1}
.|
Here is the code:
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDock ID="RadDock1" runat="server" Width="300px">
<TitlebarTemplate>
<h2>
this is a dock</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server" OnClick="lbtnUpdate_Click">update</asp:LinkButton>
Code behind:
protected void lbtnUpdate_Click(object sender, EventArgs e)
{
if (this.RadDock1.Closed)
this.RadDock1.Closed = false;
else
this.RadDock1.Closed = true;
}
What am I doing wrong here?
UPDATE: You are not doing anything wrong in your code. I was able to duplicate this problem using both UpdatePanel and RadAjaxManager. According to Telerik support, this is a "limitation" in the RadDock control. More like a bug in my opinion.
Here's what it says in their Support Page Forum: Non-docked Docks cloned plus Invalid JSON primitive
The RadDock control is not a standard
control and there are some limitations
when it is updated via ajax. If you
want to update a RadDock via ajax you
should update all RadDockZones and all
RadDocks should be docked.
The error you experience is due to
that you update a floating RadDock
with AJAX. When dragging the dock you
move it outside the update panel and
this causes AJAX not working properly
as it attempts to recreate the dock at
the place it was previously located.
In this way two docks with the same id
appear on the page and this leads to
an exception. This is a common problem
for all controls which could be moved
in the DOM.
I was able to make your code work by wrapping the RadDock inside a RadDockZone and setting the DockMode property to "Docked". If however, I drag the dock out of the zone, leave it floating and click the "Update" button, the error reappears.
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDockZone runat="server">
<telerik:RadDock ID="RadDock1" runat="server" Width="300px"
DockMode="Docked">
<TitlebarTemplate>
<h2>
this is a dock
</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server"
OnClick="lbtnUpdate_Click">update</asp:LinkButton>
I have a couple RadDocks floating inside a RadDockLayout. Ajax works if I update the RadDock, the RadDockLayout, or the main panel that wraps the RadDockLayout through the RadAjaxManager object.
Ex:
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainPanel" />
</UpdatedControls>
</telerik:AjaxSetting>