I am new to ASP.Net and I am confused about the way a GridView control works inside an UpdatePanel.
I have read the documentation here which states "By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel's content." yet, when I place a GridView and a Button control inside the element, unless the button has a defined OnClick event to do grid1.DataBind();, the grid will NOT refresh its data. Also, I have tried by specifying an AsyncPostBackTrigger on the UpdatePanel for the Button, but again I got the same behaviour. Now, I noticed that the UpdatePanel DOES refresh when I press a Button without OnClick event, however the GridView inside it does not. Please can you shed some light on this? Must I always have that call to code behind to explicitly refresh it?
My connection string in Web.Config
<connectionStrings>
<add name="myConnectionString"
connectionString="Data Source=XXXXX;Initial Catalog=XXXX;Persist Security Info=True;User ID=XXXXX;Password=XXXXX"
providerName="System.Data.SqlClient" />
</connectionStrings>
My Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmptyWebApp.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title></title> </head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="grid1" runat="server" DataSourceID="SQLDevelopment" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="UserID" SortExpression="UserID" />
<asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SQLDevelopment" runat="server"
ConnectionString="<%$ ConnectionStrings:myConnectionString %>"
SelectCommand="SELECT * FROM [TestTableA]"></asp:SqlDataSource>
<%=DateTime.Now.ToString()%> <br />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh without C# event"/>
<asp:Button ID="btnRefresh1" runat="server" Text="Refresh with C# event" OnClick="btnRefresh1_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form></body><html>
My Code behind for btnRefresh1
protected void btnRefresh1_Click(object sender, EventArgs e)
{
grid1.DataBind();
}
THANK YOU
There is nothing wrong with update-panel code - issue is that grid-view will not demand the data again from data-source on post-back. Rather, it will use view-state to load the corresponding data.
However, call to DataBind will force grid-view to get the data from data source again thereby refreshing it (or you may try disabling the view-state for grid view) - see documentation for the method - comments within example code says the same.
In case, you do not want to add DataBind call in refresh button, you can do the same in Page_Load - thereby refreshing the grid on every post-back (regardless the control that has caused it).
Use .DataBind() in the script for your gridview (ie gridview1.DataBind();). This is just rebinds the data to the gridview that was already set in your data source.
<asp:GridView ID="grid1" runat="server" DataSourceID="SQLDevelopment" AutoGenerateColumns="False">
See MSDN for more info.
Or allow the ScriptManager to do it all for you in one line of code!
ScriptManager.GetCurrent(this).RegisterPostBackControl(ButtonSubmit);
Replace the ButtonSubmit with your own control.
Related
I have two pages with the same code for ´UpdatePanel, ScriptManager and CalendarExtender, in one of them, theCalendarExtender` is working fine, but in the other, it's giving me this error:
CalendarExtender is not a known Element
Here's my code on aspx
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolKit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div id="conteudo" style="text-align: left">
<fieldset id="fieldset" style="width:730px; margin-left: -200px">
<legend style="text-align:center;"><b>Detalhes do Chamado</b></legend>
<div id="DetalhesChamado">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" EnablePartialRendering="true"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
//Here is a gridview
<asp:CalendarExtender runat="server"></asp:CalendarExtender>
But still giving the error...
--Update 2--
Now i'm getting this error:
The TargetControlID of 'CalendarExtender1' is not valid. A control with ID 'TxtPrevisao' could not be found.
My New code:
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="TxtPrevisao" runat="server" Width="115px"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format=" dd ,MMMM ,yyyy" TargetControlID="TxtPrevisao" PopupButtonID="TxtPrevisao" CssClass="MyCalendar">
</asp:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
Change the Tag-Prefix of the Ajax-Kit an see if it's working
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>
And also:
<act:CalendarExtender runat="server"></act:CalendarExtender>
asp is used for Asp.Net components like the UpdatePanel
------------ Update 2 -------------------
To your new error, you can't assign the PopupButtonID to the textbox, you need a ImageButton
<asp:ImageButton ID="btnCalenderPopup" runat="server" ImageUrl="App_Themes/Standard/Img/calendar.png" CausesValidation="False" />
Still, I insist, you will need to assign the Tag-Prefix for the Took-Kit correctly and you will need to reference the assembly correctly as SanjeevRai said
You have to add reference of 'Ajaxtoolkit' dll into your project. It seems like it is not getting the proper reference of 'AjaxToolkit' DLL.
You can check references of your project by right clicking on website and select 'Property Pages' option. then it will show you all the references. from here you can check whether 'Ajaxtoolkit' reference exit in your project or not.
If Ajaxtoolkit reference does not exist in your project then you will have to add this reference first!
------------ Update 2 -------------------
After looking at your code I got the issue.
Actually you are using calenderextender and its TargetControlID textbox inside a gridview, so it is not getting the id of textbox.It will never identify the child control id directly on aspx page.
you need to attach 'TargetControlID' and 'PopupButtonID' at run time inside RowDataBound event of gridview.
Here is a sample of code that you can use in you aspx.cs file:
void myGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TextBox txt = (TextBox)e.Row.FindControl("TxtPrevisao");
CalendarExtender Calendar1 = (CalendarExtender)e.Row.FindControl("CalendarExtender1");
Calendar1.TargetControlID=txt.ID;
Calendar1.PopupButtonID=txt.ID;
}
}
And in .aspx page attach the rowdatabound event to grid and remove 'TargetControlID' and 'PopupButtonID' attributes from calenderextender i.e.
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="TxtPrevisao" runat="server" Width="115px"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format=" dd ,MMMM ,yyyy" CssClass="MyCalendar">
</asp:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
i created a web application wherein i used the onrowcommand and created the handler in code behind, now i have a button inside the emptytemplate, whenever i click the button, my onRowCommand is not executed. Below is my code.
<asp:GridView ID="grdExternalLinkSection1" runat="server" Width="100%" AutoGenerateColumns="false" CellPadding="5" OnRowCommand="grdExternalLinkSection_RowCommand">
<EmptyDataTemplate>
External Link Title
<asp:TextBox ID="txtExternalLinkTitleEmptySection1" runat="server"></asp:TextBox>
External Link Url
<asp:TextBox ID="txtExternalLinkUrlEmptySection1" runat="server"></asp:TextBox>
<asp:Button ID="btnExternalLinkEmptySection1" runat="server" Text="Add" CommandArgument="1" CommandName="headernew" style="padding:3px; width:56px;" />
</EmptyDataTemplate>
</asp:GridView>
there are more fields but this is what i am talking about. and here is my code behind handler for the RowCommand Event.
protected void grdExternalLinkSection_RowCommand(object sender, GridViewCommandEventArgs e)
{
Response.Write("welcome");
}
it never excutes the handler, and below is my page directive:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="NewsletterASPVersion.ascx.cs" Inherits="RWO_Controls_NewsletterASPVersion" %>
this worked once, and after thereafter never working. does anyone have any idea what could be causing this.
There are two possible traps that you might have fallen into:
You are rebinding the GridView to it's DataSource on every postback.
So always check:
if(!IsPostBack)BindGrid();
You are not calling grdExternalLinkSection1.DataBind() when the DataSource is empty
But then you would not see the EmptyDataTemplate at all. So i guess that you've fallen into the first trap.
I've recently started using ASP.Net and Telerik's RadGrid but have ran into a problem:
My RadGrid object is within a UserControl object within a Custom Control object within a Page object (which has a script manager).
I have several UserControls within said Custom Control, each containing the markup for a RadGrid object as below:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="AreaListRadGrid.ascx.cs" Inherits="WebControls.AreaListRadGrid" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %>
<telerik:RadAjaxPanel runat="server" ID="radAjaxPanel"
EnableAJAX="true" LoadingPanelID="radAjaxLoadingPanel">
<telerik:RadGrid AllowPaging="true" AutoGenerateColumns="false" DataSourceID="gridData" EnableViewState="true" GridLines="None" ID="radGrid" runat="server">
<PagerStyle Mode="NumericPages" />
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="ColA" HeaderText="A" />
<telerik:GridBoundColumn DataField="ColB" HeaderText="B" />
<telerik:GridBoundColumn DataField="ColC" HeaderText="C" />
<telerik:GridBoundColumn DataField="ColD" HeaderText="D" />
<telerik:GridBoundColumn DataField="ColE" HeaderText="E" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<asp:ObjectDataSource ID="gridData" runat="server"
SelectMethod="GetData"
SelectCountMethod="GetDataCount"
OnObjectCreating="dataObjectCreating"
TypeName="AreaListRadGrid">
</asp:ObjectDataSource>
<telerik:RadAjaxLoadingPanel runat="server" ID="radAjaxLoadingPanel">
Loading please wait....
</telerik:RadAjaxLoadingPanel>
I've changed the names of columns and namespaces to something non-project specific, but the grid loads.
As it's in a Custom Control, it is instantiated as follows:
var view = (AreaListRadGrid)this.TemplateControl.LoadControl(".\\WebControls\\AreaListRadGrid.ascx");
view.DataSource = dataSet;
areaCenterMiddle.Controls.Add(view);
view.RadGrid.Rebind();
the dataSet variable is of type System.Data.DataSet.
So, when I run this website, the Rad Grid appears. I've got a grid with 4 rows, 3 of which are on page 1 and the final row is on page 2.
When I click page 2, everything happens as expected. The styling for for page buttons change, and the rows from page 1 are removed, with the row from page 2 added to the grid. Great! What happens next is what I don't understand:
When page 1 is clicked again, the styling for the page 2 button dosn't change (so it's still as if it's clicked) and rows 2 and 3 appear on the grid, but the first row is the row which was on page 2.
it seems as if page 2 is not clearing when page 1 is loaded, I'm not sure why or how this is, though. Anyone got any ideas to what I'm doing incorrectly?
Would really appreciate your help.
Cheers,
Rob
I'm sure you've got this figured out by now, but I'm wondering if this is a side effect of not setting the NeedDataSource property with the grid datasource?
add this to RadGrid control on the front end.
OnNeedDataSource="radGrid_NeedDataSource"
and handle it in code behind.
protected void radGrid_NeedDataSource(object sender,
GridNeedDataSourceEventArgs e) {
view.RadGrid.DataSource = gridData; }
You do not need to provide the dataset to the grid when loaded. The dataset is retrieved using the DataSourceID you have set in design, when required.
Remove "view.DataSource = dataSet;" and the rebind function and everything should work as expected.
I have a repeater with a RadioButtonList inside the ItemTemplate, but when the RadioButtonList.OnSelectedIndexChanged event fires it generates a full postback. What have I done wrong in my code below? How can I get the OnSelectedIndexChanged to generate an Async Postback?
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="sqlOptions">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="pnlA">
<ContentTemplate>
<strong>
<%# Eval("Name") %></strong><br />
<asp:RadioButtonList ID="RadioButtonList1"
DataSourceID="sqlOptionValues" runat="server"
DataTextField="id" DataValueField="Id" AutoPostBack="true"
OnSelectedIndexChanged="LoadPrice"
ValidationGroup="options" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ForeColor="Red" runat="server"
ControlToValidate="RadioButtonList1"
ErrorMessage="Required Field"
ValidationGroup="options" />
<asp:SqlDataSource ID="sqlOptionValues" runat="server"
ConnectionString="<%$ ConnectionStrings:
ConnectionString6 %>"
SelectCommand='<%# "SELECT DISTINCT OptionValue.Name,
OptionValue.Id FROM CombinationDetail
INNER JOIN OptionValue
ON CombinationDetail.OptionValueId = OptionValue.Id
WHERE (OptionValue.OptionId =" +
Eval("Id") + ")" %>'>
</asp:SqlDataSource>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Many thanks for any help :)
This is a real-world use case. I have a page with Repeaters, Ajax Accordions inside of other Accordions, Update Panels inside other Update panels, you name it. The page works great, except when I want to update one of the Accordion panels with my RadioButtonList (RBL). Even with the RBL inside an update panel, it causes a postback of the entire page. I tried everything. I finally realized it wasn't me when I noticed my buttons would work just fine. I figure it must be a bug in either the framework or the Ajax Control Toolkit. I did find people reference this link all over the web (http://blog.smarx.com/posts/the-case-of-the-radiobuttonlist-half-trigger.aspx), but this link from 2007 is dead now and probably no longer applicable, so that's no help.
What I ended up doing was going with what works - that submit button. All I did was add an onclick attribute to the RBL to call a hidden button. Now you don't want to set the button to Visible=false because then the button won't appear in the generated markup. Instead, set the button's style to display:none; so that no one will see this hack, because yes, that's what this workaround is - it's a hack, but simple and just as effective as what you'd expect. Don't forget to remove the Autopostback="True" from your RBL.
CAVEAT: Because I'm using a hacked button for the onclick event, it's possible for the user to click in the area of the RBL, but not actually select an item. When this happens, our onclick triggers an AsyncPostBack and the codebehind logic will be processed, so please keep that in mind. To give you an idea of what I mean: all the Page_Load() events will be called, but rbl_Questions_SelectedIndexChanged() won't be if they happen to click in the area of the RBL without actually selecting an item. For my purposes this causes no issues in my logic and has no effect on the user.
Here's the Code:
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Button ID="btn_rbl_Questions" runat="server" style="display:none;"/>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
In the Page_Load() event:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
//Instead of using the AutoPostback of the RBL, use this instead.
rbl_Questions.Attributes.Add("onclick",
"document.getElementById('"
+ btn_rbl_Questions.ClientID
+ "').click();");
//Bind your RBL to a DataSource, add items programmatically,
// or add them in the aspx markup.
}
}
In the rbl_Questions_SelectedIndexChanged() event:
protected void rbl_Questions_SelectedIndexChanged(object sender, EventArgs e)
{
//Your code here.
//My code unhid the lbl_Result control and set its text value.
}
Update 05/24/2011
The above "hack" is no longer necessary (I am leaving it above since this was marked as the answer by the author). I have found the best way to do this, thanks to this SO Answer:
Updatepanel gives full postback instead of asyncpostback
The code is much simpler now, just remove what I put in the Page_Load() method and remove the Button I used in the Aspx page and add ClientIDMode="AutoID" and AutoPostBack="True" to the control you want the UpdatePanel to capture.
Somewhere In the .Aspx Page:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rbl_Questions" runat="server"
ClientIDMode="AutoID" AutoPostBack="true"
OnSelectedIndexChanged="rbl_Questions_SelectedIndexChanged">
</asp:RadioButtonList>
<asp:Label ID="lbl_Result" runat="server" Text="" Visible="false">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
MS changed how ClientID's are generated in .net 4.0 from "AutoID" to "Predictable" and I guess the ScriptManager or UpdatePanel's weren't updated correctly to use it. I can't find documentation on why that is anywhere or if it was left that way by design.
I seriously don't miss winforms.
Try this:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="pnlA">
You'll also need to setup
<Triggers>
//radio buttons
</Triggers>
Not sure how you'll do that since it's a dynamically built list.
Hi I found code similiar to the following online. It's seems really great for getting a button buried in a repeater control to trigger a full cycle back to the server.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="HiddenButton" />
</Triggers>
</asp:UpdatePanel>
<!--Make a hidden button to treat as the postback trigger-->
<asp:Button ID="HiddenButton" runat="server" Style="display: none" Text="HiddenButton" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<!--when cick the button1, it will fire the hiddenButton-->
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('HiddenButton').click();return false;"
runat="server" />
</ItemTemplate>
</asp:Repeater>
It uses a hiddenButton to achieve this by hooking the click event of the original button to this one. However my addition to this was the setting of the CommandArgument for the button. I would also need it to be set for the HiddenButton.
Does anyone know a way of going about this?
First I will like to explain the Disadvantage of using the Update Panel using the very same example posted by you.
Below is the Original Code
Output
To display the 22 character string you can check how much data is being received and sent to server. Just imagine following
If you would consider send each request to Database using Update Panel and your GridView is in Update Panel!!!!!!
Suppose you would use ViewState data for each request and with GridView Inside the Update Panel.
Both the above techniques are worst as per my understanding.
Now I will describe you Page Methods
Page Method over Update panel
Page Methods allow ASP.NET AJAX pages to directly execute a Page’s Static Methods, using JSON (JavaScript Object Notation). Instead of posting back and then receiving HTML markup to completely replace our UpdatePanel’s contents, we can use a Web Method to request only the information that we’re interested.
Sample Code
Output
Hope this clearly explains the difference of usage.
Answer to the original Query
You have to register the ItemDataBound event of the below Repeater and use below code for it.
Code Behind
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Button btn = (Button)e.Item.FindControl("Button1");
btn.OnClientClick = string.Format("SubmitButton('{0}');return false;"
, HiddenButton.ClientID);
}
}
JavaScript
<script type="text/javascript">
function SubmitButton(btn)
{
$("#" + btn).click();
}
</script>
//Alternative
<script type="text/javascript">
function SubmitButton(btn)
{
document.getElementById(btn).click();
}
</script>
Reference & Here
Your HiddenButton control is a server control but you are trying to access it in JQuery using it's ASP.Net ID,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('**HiddenButton**').click();return false;"
runat="server" />
A quick way to fix it is to make a separate function,
<script type="text/javascript">
function SubmitButton(btn)
{
$get("#" . btn).click();
}
</script>
and change your button code to ,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>'
runat="server" />
In code behind, in repeater's ItemDataBound event, find the button and HiddenControl and set Button1's OnClientClick property,
Button1.OnClientClick= string.Format("SubmitButton('{0}');return false;",HiddenButton.ClientID);