remembering scroll position - asp.net

Hy,
I am implementing a asp.net web application, and I have two webform files, for example first.aspx and second.aspx.
On first.aspx i have a gridview displaying about 400 entries (400 rows). I've enabled the gridview selection option, and when I click select link on certain gridview row, I am redirected to second.aspx. On that second.aspx page I have some input forms and Update button and I am updating Gridview selected row entries with this.
When I enter updated values in that forms and click Update button, I want to redirect it again on first.aspx and the gridview is displaying again all 400 entries, but previously selected/updated row is now changed.
Because this Gridview does not fit on screen (height is to big because od many Gridviews entries) I want to retain scroll position as it was before entering second.aspx (I want to focus updated row). I know I can order GridView entries by modified_on value, but I have to retain everything as it was, and I don't want to have GridView paging enabled... How to retain scroll position as it was when I've clicked Select link on first.aspx?
Thank you for you help in advance!

I think you want this:
http://weblogs.asp.net/hosamkamel/archive/2007/09/07/maintain-scroll-position-after-postbacks-in-asp-net-2-0.aspx
unfortunately, I don't think this is cross-browser aware but this is based on jQuery and such work with redirects and not only postbacks:
http://elijahmanor.com/webdevdotnet/post/maintain-scroll-position-on-page-refresh-using-aspnet-or-jquery.aspx

You could use the rows id, pass it to the second.aspx and then append it to the url, when directing back to first.aspx:
first.aspx (generated code, simplified):
<table>
<tr id="row1">
<td>some content</td>
...
<td>some content</td>
</tr>
<tr id="row2">
<td>some content</td>
...
<td>some content</td>
</tr>
...
</table>
Navigating to "first.aspx#row1" will now load first.aspx and then jump to the row with the id "row1". It's probably not exactly the same position as before, but you're jumping directly to the edited row.

Related

Blazor component virtualization - preserve state

I have a list of employees (around 500). In a component I want to display this list. I display the list as a table. Each individual row is defined in a component. The user can edit a data row inline on demand. For that purpose I insert an input field when the user wants to edit the data. The following exemplifies my current solution:
<!--Parent Component-->
<table>
<thead>[...]</thead>
<tbody>
<Virtualize Items="employeeData">
<TableRow rowModel="context" />
</Virtualize>
</tbody>
</table>
<!--Child Component-->
#if(IsInEditMode)
{
<tr>
<td><input #bind="#employee.name" /></td>
<td>...</td>
<td><button #onclick="SaveData">Save</button>
</tr>
}
else
{
<tr>
<td>#employee.name</td>
<td>...</td>
<td><button #onclick="EnableEditing">Edit</button>
</tr>
}
I introduced virtualization as I noticed a big delay while typing in the input fields. Using virtualization the typing is working perfectly fine again.
As a result I noticed the following issue though:
When I scroll out of sight, the rows get reset - the inserted data gets lost and the editing mode is turned off. My guess is that is happening because the row gets rerendered and by default
editing is turned off.
How do I keep the state of specific components while using the virtualization feature?
The issue seemed to be that virtualisation had problems rendering the child components. Integrating the child component into the parent component resolved the problems.
I'll try to investigate further whether this was a problem with my component or a problem of blazor's virtualisation.

How do I set html table caption from code behind? ASP.NET

I have a table in my aspx page:
<table id="tbl" runat="server">
</table>
I need to set to set the table caption in the code behind, so that it renders as follows:
<table id="tbl" runat="server">
<caption>Monthly savings</caption>
</table>
Any help will be greatly appreciated.
The previous response from Brad M is almost correct, you must add a runat="server" attribute, an ID attribute and set it to some value you see fit, and then on the server side code:
One big caveat thought, you need to place the caption before the table element, inside is not possible
idYouGave.InnerText = "Monthly savings";
Since you can't use the directly inside the , do something like this to achieve what you want:
<tr>
<th colspan="numOfCols"><caption>...</caption></th>
</tr>
Just add the runat="server" attribute to your caption element, as well as give it an ID. Then just refer to it in code behind as caption.InnerText = "Monthly savings";
It is not possible. Control HtmlTable can contain <tr> and only them, everything else will be removed. Here is the full note from MSDN:
A complex table model is not supported. You cannot have an HtmlTable
control with nested <caption>, <col>, <colgroup>, <tbody>, <thead>, or
<tfoot> elements. These elements are removed without warning and do
not appear in the output HTML. An exception will be thrown if you
attempt to programmatically add these table model elements to the
Control.Controls collection of the HtmlTable control.
Your options are either to switch to asp:Table control, or switch back to plain markup.

How to add rows to a table dynamically with asp.net

I want to generate a table in following fashion :
<table>
<tbody>
<tr class="folder" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>home</span></div></td>
<td class="bytes">Folder</td>
</tr>
<tr class="folder hover" style="-moz-user-select: none;">
<td><div><img src="folder.png"><span>share</span></div></td>
<td class="bytes">Folder</td>
</tr>
</tbody>
</table>​
I want to add the rows from the CS code depending on the number of entries.
Instead of "adding elements to html table" you should consider using Repeater for data display, which would give you clean html (exactly as you want).
Then on each click you would do what you need to do (code behind) and rebind the repeater.
Hope that helps.
I would agree with Sebastian why not use a repeater or datalist to bind the data. What source are you using to get your data from? If your pulling the data from a SQL table here is a pretty good article on how to get you started.
http://msdn.microsoft.com/en-us/library/aa719636(v=vs.71).aspx

Adding Controls dynamically. Asp.Net and VB

I'm trying to add a "panel" with controls dynamicaly. Something like the code below, Clicking "Add" button, displays a "Panel" with the controls(which are within a table), the number of "Education" someone can enter is unlimited. I know how to capture the data, but i can't figure out how to implement/code this,Can anyone please give me some pointers for the same?
Should i be reading about AJAX? I don't know anything about AJAX..
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td><asp:TextBox ID="CollUniv_Name" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="CollUniv_Location" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="StartDateText" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="EndDateText" runat="server"></asp:TextBox></td>
</tr>
</table>
Seems like this would more naturally handled by a repeating control. Something along the lines of a ListView control.
There's a fairly full example in the MSDN page I linked to so I won't repeat it here. The two parts you'll want to take a look at a bit more closely are the ItemTemplate which lets you define what normal items look like and the InsertItemTemplate which lets you specify what your insert row will look like. You can also specify if the InsertTemplate appears at the top or bottom. In the code-behind you'll subscribe to the ItemInserting even and handle user input from there.

ListView LayoutTemplate does not show when empty asp.net

I have an <asp:ListView> but for some reason the LayoutTemplate section does not show when the list is empty, although the <EmptyDataTemplate> section shows. The LayoutTemplate contains the headers for the table, and I want to show an empty table when there are no items in the datasource, not just the content of EmptyDataTemplate.
If there is no choice I will copy the LayoutTemplate into EmptyDataTemplate but it seems stupid to have to do this. Ideas?
From the MSDN:
The empty template is displayed in a
ListView control when the data source
that is bound to the control does not
contain any records and the
InsertItemPosition property is set to
InsertItemPosition.None. The template
is rendered instead of the
LayoutTemplate template. If the
InsertItemPosition property is set to
a value other than
InsertItemPosition.None, the
EmptyDataTemplate template is not
rendered.
the key words here are "...the template is rendered instead of the LayoutTemplate template..."
So I think, you have to copy the LayoutTemplate into the EmptyDataTemplate template.
In a very simple way you can get both your headers and a message saying that there were no data.
You make your LayoutTemplate like the following idea:
<LayoutTemplate>
<table>
<tr>
<td>a header</td>
<td>another header</td>
<td>third header</td>
</tr>
<tr runat="server" id="itemPlaceholder">
<td colspan="3"
There is no data!
</td>
</tr>
</table>
</LayoutTemplate>
Notice that the tr that is the placeholder (marked by id="itemPlaceholder") actually contains something. It contains what should be shown when there is no data. Then, in code behind, you set the <EmptyTemplate> to be equal to the <LayoutTemplate> (so that you have only one such template to maintain). I do it like this:
Private Sub lvwThings_Init(sender As Object, e As EventArgs) Handles lvwThings.Init
lvwThings.EmptyDataTemplate = lvwThings.LayoutTemplate
End Sub
The logic then is as follows:
When there is data, i.e. when the actual <LayoutTemplate> is used, the whole <tr runat="server" id="itemPlaceholder">, with the td and text it contains, will be replaced by the <ItemTemplate>.
But, when there is no data, i.e. when the <EmptyTemplate> is used (instead of the <LayoutTemplate>), nothing inside the <EmptyTemplate>is replaced, so everything is shown as it is.
You can also put your into a User Control (.acsx). Then include it in the layout template and the empty template... and it will feel less stupid since you can still manage it in one spot. I know how you feel about copying the same code...seems like something a 5th grader would do. Using a control is a more grown up approach.
I just solved this problem when you have InsertItemTemplate with EmptyDataTemplate.
Arrcording to MS docs, that's you can't have both. So I decided to create new tag in InsertItemTemplate.
You can preview my example code here.
<InsertItemTemplate>
<% if (CheckEmptyTable())
{ %>
<tr>
<td colspan="6">No data founds。</td>
</tr>
<% } %>
// Your insert template input here
<tr style="">
</tr>
</InsertItemTemplate>
My result image:

Resources