textBox Lose focus on nested Gridview - c#

I have two nested Gridviews, the parent is for Posts and child is for Comments. I want to update Post and Comments with a Time Interval so Im using an asp.net Timer. My problem is that a TextBox that is in the first Gridview loses focus when timer Ticks. I searched the web a lot, one possible solution was to take the textbox out of the UpdatePanel but in this situation I can't take out the textBox. Please help me, here is my code.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer ID="Timer1" Interval="10000" OnTick="Timer1_Tick" runat="server">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<%--post GridView--%>
<asp:GridView ID="posts" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%--Comments Gridview--%>
<asp:GridView ID="comments" runat="server"></asp:GridView>
<%--a Textbox and bUtton For sending new Comment--%>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
protected void Timer1_Tick(object sender, EventArgs e)
{
posts.DataSource = GetData();
posts.DataBind();
}

I was going to type a similar answer to this, but it appears it has already been explained here - https://stackoverflow.com/a/22014420/2248290
The key point being: "An update panel takes focus away as it posts back"

Related

Formview in UpdatePanel is not updating

I have an UpdatePanel with a Repeater inside a Panel. By clicking in one of the cells of the repeater, 2 detailed Views (Gridview, Formview - each one in a UpdatePanel) are displayed based on the repeater's argument passed in a LinkButton.
While the Gridview is displaying fine, the FormView is not when Updating their UpdatePanels. All the DataBindings should be working correctly as I had been running the app for a year - but without the UpdatePanels! I am using them for the first time and must be missing something.
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Always">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="600px">
<asp:Repeater runat="server" id="RepeaterKalendar">
<ItemTemplate>
...
<asp:LinkButton ID="ButtonSelect" runat="server" CommandArgument = '<%# Eval("date") %>' Text='<%# Bind("TAG") %>' OnClick="GetDetails"/>
...
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel_Grid" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
<asp:GridView runat="server" ID="Grid_Details" OnSelectedIndexChanged="IndexChanged">
...
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="UpdatePanel_Form" UpdateMode="Conditional">
<ContentTemplate>
<asp:FormView runat="server" ID="Form_Details" DefaultMode="Edit"">
<EditItemTemplate>
...
</EditItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:UpdatePanel>
Code behind for LinkButton Click
protected void GetDetails(object sender, EventArgs e)
{
LinkButton LinkButton1 = (sender as LinkButton);
string commandArgument = LinkButton1.CommandArgument;
BuildDetailsViewReport(Convert.ToDateTime(commandArgument));
BuildDetailsViewList(Convert.ToDateTime(commandArgument));
UpdatePanel_Grid.Update();
UpdatePanel_Form.Update();
}
UpdatePanel_Form.Update() does not update the FormView and causes even that the GridView is not updated. If I remove that command from the code, the GridView is uploaded correctly.
Any help is appreciated.
Martin

How can I add UpdatePanels to my gridview in asp.net

I have a gridview with some textboxes and buttons inside the gridview. I want to use updatepanels when the buttons are clicked so that only one textbox is refreshed instead of the whole page. I tried to add my ScriptManager and UpdatePanel inside my gridview but I get errors saying the tags aren't recognized.
I've looked elsewhere on SO for solutions and others have said to place the whole gridview in an UpdatePanel. However, I don't want the whole grid to be updated (it's pretty lengthy). Is it possible to have individual UpdatePanels in my gridview?
EDIT:
Here is some code to go along with my question:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PCalendar" EventName="SelectedChange" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField HeaderText="QS">
<ItemTemplate>
<asp:TextBox ID="TextBox" runat="server" Text=' <%#Bind("PDate") %>' OnTextChanged="SetTextBox" AutoPostBack="True"></asp:TextBox>
<asp:ImageButton ID="PButton" runat="server" OnClick="ShowCalendar" ImageUrl="../images/calendarIcon.jpg" />
<asp:Calendar ID="PCalendar" runat="server" Visible="false" OnSelectionChanged="SetDate" ></asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Here is what it's going to sorta look like. Once you post your code, it will be easier to see how close you are and how to help you properly. But this is the general idea.
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="buttonOneID" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="buttonTwoID" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
<Columns>
//columns code here
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

Refresh gridview inside update panels

i have a page which is inside update panel.it contains two gridview which are also inside update panels.i m binding them in page load inside !ispostback as well as other parts of code.when i bind only first grid it works fine but when i bind the second grid it refreshes the first one and it shows no data.is this the problem of improper usage of update panel usage or any other issue.. how can i use the triggers here.
my code is as follows..
<asp:UpdatePanel ID="updgrd1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width="85%"ShowHeaderWhenEmpty="true"EmptyDataText="No Records Found" AutoGenerateColumns="false"OnRowCancelingEdit="GridView1_RowCancelingEdit"OnRowEditing="G dView1_RowEditing">
<Columns>
//my code here
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="updgrd2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" Width="85%" ShowHeaderWhenEmpty="true" AutoGenerateColumns="false" EmptyDataText="No Records Found">
<Columns>
//my code here
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
if(!ispostback)
{
LoadGrid1();
LoadGrid2();
}
}
Here I'm doing exactly what you are. Here I have a textbox and a gridview, when clicking add whatever is in the textbox gets added to the gridview.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LnkAddTrack" eventname="Click" />
</Triggers>
<ContentTemplate>
<div id="EventTrack" >
<asp:Label ID="lblEventTracks" runat="server" Text="Event Tracks"></asp:Label>
<asp:TextBox ID="txtEventTracks" CssClass="EventTextbox" runat="server"></asp:TextBox>
<asp:LinkButton ID="LnkAddTrack" ClientIDMode="Static" runat="server" OnClick="LnkAddTrack_Click">Add Track</asp:LinkButton>
</div>
<asp:GridView ID="dgTracks" runat="server" >
<Columns>
<asp:TemplateField HeaderText="TrackName">
<ItemTemplate>
<asp:Label ID="Control" runat="server" Text='<%# Eval("TrackName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Then make sure you on your button event to add new data you are adding the data correctly
and remember to rebind the gridview.
protected void LnkAddTrack_Click(object sender, EventArgs e)
{
InsertTrack();
DgPopTracks();
}
Ask any questions you may have, if you want to see my Insert Track and DgPopTracks events
i can post them as well for you

Refresh an updatepanel on buttonclick from code-behind

I'm using a Gridview that is using datasource & databinding. When i reload the page the gridview is updated but I want it to be on the buttonclick, but it's not working for me.
The gridview inside the updatepanel:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
<asp:GridView ID="gvWallPosts" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5">
<Columns>
<asp:TemplateField HeaderText="Avsändare">
<ItemTemplate>
<%# GetSender((int)Eval("WallSender"))%>
<br />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Inlägg">
<ItemTemplate>
<%# Eval("Post")%>
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="txtWall" runat="server" Height="105px" TextMode="MultiLine" Width="227px"></asp:TextBox>
<br />
<asp:Button ID="btnWall" runat="server" Text="Posta" onclick="btnWall_Click" />
Code-behind:
protected void btnWall_Click(object sender, EventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text); //This method is sending the post
upWall.Update();
}
So, I want the updatepanel to be updated on the ButtonClick, I don't want to reload the whole page to see the result
Since i don't see the button btnWall, i assume that it's outside of the UpdatePanel.
But you need to define an explicit trigger if you want to allow a control outside of an UpdatePanel to trigger a postback.
Therefore you can use an AsyncPostBackTrigger:
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
....
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnWall" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
By default, partial-page updates are enabled in an update panel because the default value of the EnablePartialRendering property of the ScriptManager control is true.Putting the button in the update panel is suffice to give you what you need since the button acts as an asynchronus postback control inside the panel.Then just add this line( gvWallospts.Databind()) after your update.Let me know how it goes.
protected void btnWall_Click(object sender, EventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text); //This method is sending the post
//upWall.Update();
gvWallPosts.DataBind();
}
Try setting up you markup like this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
<asp:GridView ID="gvWallPosts" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5">
<Columns>
<asp:Templatefield>
<asp:Button ID="btnWall" runat="server" Text="Posta" command="Edit" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Avsändare">
<ItemTemplate>
<%# GetSender((int)Eval("WallSender"))%>
<br />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Text='<%# Bind("WallSender")%>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Inlägg">
<ItemTemplate>
<%# Eval("Post")%>
<br />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Text='<%# Bind("Post")%>'/>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
In your grid Row updating event
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
con.SendWallPost(con.GetId(Membership.GetUser().UserName), Convert.ToInt32(Request.QueryString["ID"]), txtWall.Text);
gvWallPosts.DataBind();
}
Make sure that also you Binding code in page load is sandwiched by this
If(!IsPostBack)
{
}
You should either put the button inside the update panel or define an explicit trigger to update the update panel on button click event as suggested by Tim Schmelter.

Page stalls when a asynchronous request is processing in UpdatePanel

I have two UpdatePanel in a single asp.net page.One has a submit button and a progress bar , on click on this button there is a process which fetch the data from a XML file and stores in Database.
Second update panel is used to display the content from a log about the progress of the data insertion from XML and it is updated using a timer control.
Now the problem is that when a request is submitted from first panel , second panel stop updating the content.
Should I try any other library or some sort of jq metohods to update page.
thanx in advance
here is my code,...
<asp:scriptmanager runat="server" ID="scrpManager"> </asp:scriptmanager>
<asp:UpdatePanel ID="updLeft" runat ="server">
<ContentTemplate>
<asp:Button ID="Submit" runat="server" onclick="Submit_Click"
Text="Process" />
</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID ="Button3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="updLeft"
ID="UpdateProgress21">
<ProgressTemplate>
<div class="loadingbox">
<img src="spinner.gif" align="absmiddle" />
<asp:Label ID="lblProgress21" runat="server">Please wait while processing...</asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="updPnlRight" runat ="server" >
<ContentTemplate >
<asp:Timer Interval="1000" ID="timer1" runat="server" ontick="timer1_Tick" ></asp:Timer>
<asp:GridView ID="GridView1" ShowHeader ="false" AutoGenerateColumns ="false" runat="server">
<Columns >
<asp:BoundField DataField ="status_MSG" HeaderText ="" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers >
<ajax:AsyncPostBackTrigger ControlID ="timer1" EventName="Tick" />
</Triggers>
</ajax:UpdatePanel>
protected void Submit_Click(object sender, EventArgs e)
{
//Do insertion process , takes 30 minutes,
}
I've had nothing but misery with update panels. I urge you to use an alternative such as client side templates. Knockout.js and Angular.js are probably good places to start.
If you paste your code, or a (non) working example of your issue, I'll try offer a fix.

Categories