Trigger to refresh DataView when user clicks a button inside an UpdatePanel - asp.net

We have the following code in an UpdatePanel.
<asp:UpdatePanel
ID="UpdatePanelSearch"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<p>Parent Search:
<asp:TextBox ID="TextBoxSearch" runat="server" Width="207px"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" Text="Search" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
The code in the VB file looks like this to handle clicking the Search button so a GridView will display data based on the value entered into the TextBox.
The GridView is also in a separate UpdatePanel:
Protected Sub ButtonSearch_Click(sender As Object, e As EventArgs) Handles ButtonSearch.Click
GridViewParentsSummary.DataSource = theTableAdapter.GetData(strSearchText)
End Sub
We would like to create a trigger to update the GridView if that is the correct thing to do here.
Here is the GridView:
<ContentTemplate>
<asp:GridView
ID="GridViewParentsSummary"
runat="server"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
DataKeyNames="ID"
PageSize="3"
>
<Columns>
<asp:BoundField
DataField="FatherName"
HeaderText="Father's Name"
SortExpression="FatherName" />
<asp:BoundField
DataField="MotherName"
HeaderText="Mother's Name"
SortExpression="MotherName" />
<asp:ButtonField
ButtonType="Button"
CommandName="Select"
Text="Select This Parent" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Can you show the needed code required to make the correct trigger that will refresh the GridView?

If the GridView is in another UpdatePanel it should also update when another UpdatePanel updates. By default, the UpdatePanel.UpdateMode property is set to Always and this will cause all UpdatePanel in page to refresh.
However, this is not always the desired behavior so many time you'll change it to Conditional which means that the UpdatePanel will be refreshed only if one of its triggers was fired. In that case, you need to add this line in the ButtonSearch_Click method:
gridUpdatePanel.Update() 'assuming gridUpdatePanel is the UpdatePanel with the grid
for more information about the UpdateMode property look here:
http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.updatemode.aspx

Related

Cancel out of FormView's Edit mode?

I have a FormView with View and Edit modes, in an UpdatePanel:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:FormView runat="Server" DefaultMode="ReadOnly" DataSourceID="_myDataSource" >
<ItemTemplate>
<!-- View controls omitted -->
<asp:Button runat="server" CommandName="Edit" Text="Edit" />
</ItemTemplate>
<EditItemTemplate>
<!-- Edit controls omitted -->
<asp:Button runat="server" CommandName="Update" Text="Save" />
<asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
</EditItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Data source (may attributes omitted) -->
<asp:ObjectDataSource ID="_myDataSource" runat="server" />
The Edit and Update buttons / commands work fine, but the Cancel button does nothing.
Any ideas?
The page may not seems to flicker but on clicking Cancel button 2 events are raised by FormView and post back indeed happens. You may refer MSDN. ( Table under Remarks section)
What a 'Cancel' button does is:
Cancels an edit or insert operation and returns the FormView control to the mode specified by the DefaultMode property. Raises the ModeChanged and ModeChanging events.
So you need to handle events for ModeChanged and ModeChanging as shown below:
<asp:formview id="EmployeeFormView"
datasourceid="EmployeeSource" allowpaging="true" datakeynames="EmployeeID"
onmodechanged="EmployeeFormView_ModeChanged"
onmodechanging="EmployeeFormView_ModeChanging"
runat="server">
So, any code that you want to run after ' cancel' button click should utilize these two events as per the requirements.
I had placed debugger in Page_Load, modeChanging() & modechanged(), all of the three events were fired in sequence on clicking 'Cancel' button.

UpdatePanel causing full postback. Trying to do a partial postback

I am working on a page that is using a gridview to display data. I have some dynamically created textboxes inside an ItemTemplate which contains several textboxes per row. Now I also have an update panel that is using ajax and should only render once my link button is clicked. The datalist is bound in my code behind after the I would like this to occur without causing a full postback. However, right now when I click the link button it causes a full post-back which eliminates my dynamically created controls.
I feel I am very close to a solution. I need one of these to happen (option 1 seems more useful):
Do not cause a postback when the linkbutton is clicked, but still render my full datalist in the update panel
or
my dynamically created controls are not removed during post back.
Here is my code:
<ItemTemplate>
[ <asp:LinkButton ID="SelectCommand" CommandName="Select" runat="server" Text="+" CssClass="sunocoBold"/> ]
<%-- start sub panel--%>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Vertical"
OnItemCommand="DataList_OnItemCommand">
<ItemTemplate>
<asp:LinkButton ID="Select" CommandName="SelectCommand" CommandArgument='<%#Eval("ship_to_num")%>' runat="server" Text='<%#Eval("ship_to_num")%>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<%-- end sub panel--%>
</ItemTemplate>
<asp:TemplateField HeaderText="Site Owner" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Top">
<ItemTemplate>
<asp:Panel ID="pnlNames" runat="server">
</asp:Panel>
<%-- <asp:Literal ID="NameList" runat="server" /> --%>
</ItemTemplate>
</asp:TemplateField>
UpdatePanel.Triggers is made for this!
Take a look at it here: Understanding UpdatePanel.Triggers

save current page of gridview when page dropdownlist selected index change

I am using a multi page gridview to display bunch of data. Here is the code of the gridview.
<asp:GridView ID="unverifiedlist" runat="server" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true" OnRowDataBound="unverifiedlist_RowDataBound" style="font-size:12px" >
<Columns><asp:BoundField HeaderText="Surname" DataField="Surname" ReadOnly="true"/></Columns>
<Columns><asp:BoundField HeaderText="Firstname" DataField="Givenname" ReadOnly="true"/></Columns>
......
<Columns><asp:TemplateField HeaderText="Options" >
<ItemTemplate>
<asp:DropDownList ID="options" runat="server" AutoPostBack="true" OnSelectedIndexChanged="options_SelectedIndexChanged">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="1">Verified</asp:ListItem>
<asp:ListItem Value="2">Rejected</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText ="Reason">
<ItemTemplate>
<asp:TextBox ID="reason" runat="server" OnTextChanged ="reason_TextChanged"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Visible="false"/>
</asp:GridView>
<asp:DropDownList ID="PageSelect" AutoPostBack="true" runat="server" OnSelectedIndexChanged="PageSelect_SelectedIndexChanged"></asp:DropDownList>
there is a column called "option" which contains a dropdownlist, and it will postback everytime when the selected index was changed to save the edited row. I am trying to avoid this frequent postback. So i think if I can save the whole page before user turn to the next page.
The problem is the "PageSelect" dropdownlist's postback will trigger the page reload first, then onselectedindexchanged event, at this point, the gridview already turned to the next page. So can anyone give me some advice?
You can set EnableSortingAndPagingCallBacks property of the grid view to true , but that wont work if you are using template fields in your gridview, for maintaining the state of the page, you will have to keep the value of current page in session and on page load you can check the session..
I used the gridview itself's paging navigation control instead of my dropdownlist at last. Then I am able to use the pageindexchanging event to save the current page into a session before it goes to the next page

Make update panel component change visibility of item outside of the update panel

I have a repeater and the items are editable through an edit button which opens a FormView in edit mode. The formView is initially invisible and the repeater visible. Once edit is pressed the repeater goes invisible then the formview becomes visible with the item to edit.
Once changes have been made the user presses update. This sets the formview invisible and the repeater visible.
The problem is the formview goes invisible but the repeater doesn't become visible. This I think is caused by the fact the formview is within an update panel and the repeater isn't? Only the items in the update panel are being altered on clicking update because it is only a partial page update.
I can't put the repeater within the update panel because there is a requirement that the public view doesn't use javascript.
Does anyone know how I could make the repeater reappear?
<asp:Repeater id="resultsRepeater" runat="server" DataSourceID="vehiclesDataSource" >
<ItemTemplate>
<asp:Label id="makeLabel" runat="server" Text='<%# Eval("Make") %>' />
<asp:Button id="editButton" runat="server" Text="Edit" CommandArgument='<%# Eval("Id") %>' OnClick="EditButton_Click" />
</ItemTemplate>
<asp:Repeater>
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Panel id="insertUpdatePanel" runat="server" Visible="false">
<asp:FormView id="editformview" runat="server" DataKeyNames="Id" Datasourceid="VehiclesEditDataSource" >
<EditItemTemplate>
<uc:VehiclesEdit ID="VehiclesEdit" runat="server" />
<asp:Button id="updateButton" runat="server" OnClick="Update_Click" />
</EditItemTemplate>
</asp:FormView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
protected void EditButton_Click(object sender, EventArgs e)
{
resultsRepeater.Visible = false;
insertUpdatePanel.Visible = true;
}
protected void Update_Click(object sender, EventArgs e)
{
resultsRepeater.Visible = true;
insertUpdatePanel.Visible = false;
}
This might help. I had a similar problem and this worked for me. I simply used ScriptManager to register the button (even iterated by row) as a postback control like this:
ScriptManager.GetCurrent(Page).RegisterPostBackControl(updateButton)
This caused a full postback and allowed me to set the visibility of a panel outside the update panel. I hope it works!
REVISED: Add a PostBackTrigger to your UpdatePanel to force a full post-back when your UpdateButton is clicked. This will hide your UpdatePanel and reveal your Repeater again. See final code below:
For more info refer to: https://stackoverflow.com/questions/2545508/how-do-i-force-full-post-back-from-a-button-within-an-updatepanel
<asp:UpdatePanel ID="updatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="updateButton" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Visible="false">
<asp:FormView ID="editformview" runat="server" DataKeyNames="Id" DataSourceID="VehiclesEditDataSource">
<EditItemTemplate>
<uc:vehiclesedit id="VehiclesEdit" runat="server" />
</EditItemTemplate>
</asp:FormView>
<asp:Button ID="updateButton" runat="server" OnClick="Update_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

PopUpExtender on ImageButton inside GridView problem

I have GridView on my asp.net page, one column in that grid is ImageButton (TemplateField with ID="imbReserve"). On click on that button I want to show PopUp, but when I put TargetControlId="imbReserve" I get error message " A control with ID 'imbReserve' could not be found". How to achieve this, on click on button inside Grid show PopUp ?
Have a look at these 2 articles, that just helped me out with this problem
Article 1: A More Traditional approach
The Following is paraphrased from the above article
The Page Code:
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"
Width="95%">
<Columns>
<asp:TemplateField >
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="customerid" HeaderText="ID" />
<asp:BoundField DataField="companyname" HeaderText="Company" />
<asp:BoundField DataField="contactname" HeaderText="Name" />
<asp:BoundField DataField="contacttitle" HeaderText="Title" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<ajaxToolKit:ModalPopupExtender
ID="mdlPopup" runat="server" TargetControlID="pnlPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" style="display:none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
[Your Content Here]
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button
ID="btnSave" runat="server" Text="Save" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
Note that the GridView is wrapped in an update panel also that the Target Control ID for the Modal Extender is the same as the Pop Up Control ID. This is because the ModalPopUp Extender needs a target control ID and I think this solution is a better plan than using a hidden button.
Now For the Code Behind:
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// Do Anything you need to the contents of the update panel
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
Article 2:Uses Clientside Javascript
The Following is paraphrased from the above article
The client side Javascript
<script type="text/javascript">
// keeps track of the delete button for the row
// that is going to be removed
var _source;
// keep track of the popup div
var _popup;
function showConfirm(source){
this._source = source;
this._popup = $find('mdlPopup');
// find the confirm ModalPopup and show it
this._popup.show();
}
function okClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// use the cached button as the postback source
__doPostBack(this._source.name, '');
}
function cancelClick(){
// find the confirm ModalPopup and hide it
this._popup.hide();
// clear the event source
this._source = null;
this._popup = null;
}
Page Code:
<asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Item" HeaderText="Description" />
<asp:BoundField DataField="IsCompleted" HeaderText="Complete?" />
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px" >
<ItemTemplate>
<asp:Button ID="btnDelete" runat="server"
OnClientClick="showConfirm(this); return false;"
OnClick="BtnDelete_Click" Text="Delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<ajaxToolKit:ModalPopupExtender BehaviorID="mdlPopup" runat="server"
TargetControlID="div" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();"
CancelControlID="btnNo" OnCancelScript="cancelClick();"
BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display:none">
<img align="absmiddle" src="Img/warning.jpg" />Are you sure you want to delete this item?
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
Again note that the Target Control ID for the Modal Pop Up Extender is the same as the Pop Up Control ID. Also note the OnClientClick attribute on the button in the template field, make sure your include "return false;".
All that is needed in the code behind it the onClick (or onCommand) event handler to do what you need to do.
I've tried both of these approaches successfully.
Hope one of these two works for you.
The problem is related to the fact that the real ID is getting changed when the page get rendered to the client.
Open your page source in the browser and look at the ID that is generated from asp.net. Then use that ID inside the TargetControlID property
This kind of problem is present with all the templated controls in ASP.NET
A cleaner way will be to bind the TargetControlID property of the ModalPopupExtendr on Page Load where you can use the ClientID property dinamically generated
modalPopupExtender.TargetControlID = myTemplateControl.ClientID;

Resources