We Keep Coding

ASP.NET Formview with paging in nested updatePanels - formview disappears when moving to next page

I have a page where the user selects a center from a drop-down which will then show center details in an updatePanel. Each center can have one or more schedules defined, so now I want to add a Formview control with paging that will allow the user to flip through the schedules. The schedule will be rendered in a customized table, so controls like gridview, repeater, etc. aren't an option. The Formview code I'm showing below is based on an example I found and is just to get the basics working (it's not the desired end result).
Everything works great on selecting a center; the center details are shown, along with the schedule Formview and the page selectors. The problem is when I click a paging selector to move to another schedule the schedule Formview disappears. If I select another center from the drop-down, the new center details are shown along with the schedule Formview, which is now displaying the record I selected before it disappeared (I should note that right now I'm just using some dummy data for the schedules which is the same for all centers; ultimately the schedule data will be specific to the selected center).
<div class="form-group row">
<label for="drpCenters" class="col-sm-2 col-form-label font-weight-bold">Select Center:</label>
<div class="col-sm-10">
<asp:DropDownList ID="drpCenters" CssClass="form-control input-sm" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCenters_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<asp:UpdatePanel ID="pnlCenter" runat="server" updatemode="Conditional">
<ContentTemplate>
<div id="divCenter" style="display:none;">
<table class="table table-bordered table-sm" style="width:auto;">
<tr>
<th style="text-align:right;">Center Name: </th>
<td><asp:Label ID="lblCtrName" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<th style="text-align:right;">Center Phone: </th>
<td><asp:Label ID="lblCtrPhone" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<th style="text-align:right;">Center Email: </th>
<td><asp:Label ID="lblCtrEmail" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<th style="text-align:right;">Center Director: </th>
<td><asp:Label ID="lblDirector" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
<asp:UpdatePanel ID="pnlSchedules" runat="server" updatemode="Conditional">
<ContentTemplate>
*** this disappears when a record is selected from the paging selector
<asp:FormView ID="fvSchedules" runat="server" AllowPaging="true" datakeynames="ctrID" OnPageIndexChanging="fvSchedules_PageIndexChanging">
<HeaderTemplate>
Schedule
</HeaderTemplate>
<HeaderStyle
BackColor="DarkBlue"
ForeColor="AliceBlue"
BorderColor="DarkOrange"
BorderStyle="None"
BorderWidth="2"
Font-Size="Medium"
Font-Italic="false"
Font-Bold="true"
Height="35"
HorizontalAlign="Center"
/>
<ItemTemplate>
<b>ID:</b> <i><%# Eval("ctrID") %></i>
<br />
<b>Center:</b> <i><%# Eval("ctrName") %></i>
</ItemTemplate>
<RowStyle
BackColor="DodgerBlue"
ForeColor="AliceBlue"
/>
<PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last" />
<PagerStyle BackColor="DarkBlue" ForeColor="AliceBlue" />
</asp:FormView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="fvSchedules" EventName="PageIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drpCenters" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Code behind for Formview paging:
protected void fvSchedules_PageIndexChanging(object sender, FormViewPageEventArgs e)
{
fvSchedules.PageIndex = e.NewPageIndex;
fvSchedules.DataBind();
}
Any ideas on how to resolve this?

The issue seemed to be there was no data getting bound when advancing to the next record which caused the control to disappear. I found
protected void fvSchedules_PageIndexChanging(object sender, FormViewPageEventArgs e)
{
Debug.WriteLine("e.NewPageIndex: " + e.NewPageIndex);
fvSchedules.PageIndex = e.NewPageIndex;
// fvSchedules.DataBind();
}
would show me the index being returned and commenting out the databind left the control in place (but of course didn't really do anything). So googling for "Formview paging doesn't advance" brought me to here: Fields not changing in Formview when moving Pagination which got me on the right track. Now my code behind looks like this:
protected void fvSchedules_PageIndexChanging(object sender, FormViewPageEventArgs e)
{
fvSchedules.PageIndex = e.NewPageIndex;
GetSchedules(CtrID);
}
Where GetSchedules fetches the data and binds to the Formview control. Seems to be working properly so far.

Telerik RadGrid Custom Header (Not a Group Header)

I am developing a telerik radgrid on aspx. I simply want to add a row above the column headers, to show how columns are logically related. For example, 4 columns display data for 2014, and 4 columns for 2015.
I have the column headers, and the data, of course. I just need this additional info. Thanks.

Once you begin customizing the header, you lose the ability to automatically build the table. You will have to customize main header, the subheaders, and the columns.
The following page on Telerik's website has an example of how to create a header template with a double row header. Below is the code example from that page.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="false">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn HeaderText="ContactName" DataField="ContactName" UniqueName="ContactName">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="TemplateColumn">
<HeaderTemplate>
<table id="Table1" cellspacing="1" cellpadding="1" width="300" border="1">
<tr>
<td colspan="2" align="center">
<b>Address</b>
</td>
</tr>
<tr>
<td width="50%">
<b>City</b>
</td>
<td width="50%">
<b>Postal code</b>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table id="Table2" cellspacing="1" cellpadding="1" width="300" border="1">
<tr>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem"City") %>
</td>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem"PostalCode") %>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

HTML object element overlapping div's

I am referencing a class in another project inside this div using the <object> element but the object dosen't seem to react to CSS and it overlaps outside of the div it's in when I scroll up and down, has anyone had this issue?
<asp:Panel ID="ObjectPanel" runat="server">
<div id="ObjectContainer">
<table cellspacing="1" cellpadding="1" width="100%" bgcolor="#ffffff" border="0">
<tr>
<td>
<asp:Label ID="Label0" runat="server"></asp:Label></td>
<td>
<asp:Label ID="Label1" runat="server"></asp:Label></td>
</tr>
</table>
<object id="ObjectId" classid="CLSID:50678BBE-06F5-4867-9D07-96DCEE2A0479" width="110" height="60">
<param name="BorderStyle" value="5"/>
</object>
</div>
</asp:Panel>

Twitter Bootstrap and ASP.NET GridView

I am having aproblem using Twitter Bootstrap from my ASP.NET application. When I use the table table-striped css class to my asp:GridView control, it treats the Header of the table as a Row.
My GridView
ASP.NET MarkUp
<asp:GridView ID="dgvUsers" runat="server"
CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
</Columns>
<RowStyle CssClass="cursor-pointer" />
</asp:GridView>
Result
<table id="cphMainContent_dgvUsers" class="table table-hover table-striped"
cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Username</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
<tr class="cursor-pointer">
<td>user1</td>
<td>Test</td>
<td>User 1</td>
</tr>
<tr class="cursor-pointer">
<td>user2</td>
<td>Test</td>
<td>User 2</td>
</tr>
<tr class="cursor-pointer">
<td>user3</td>
<td>Test</td>
<td>User 3</td>
</tr>
</tbody>
</table>
It should be like this
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
How can I make the header of my asp:GridView be treated as a Header by Twitter Bootstrap?
My code is in C#, framework 4, build in VS2010 Pro.

You need to set useaccessibleheader attribute of the gridview to true and also then also specify a TableSection to be a header after calling the DataBind() method on you GridView object. So if your grid view is mygv
mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader
This should result in a proper formatted grid with thead and tbody tags

There are 2 steps to resolve this:
Add UseAccessibleHeader="true" to Gridview tag:
<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">
Add the following Code to the PreRender event:
Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender
Try
MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
Catch ex As Exception
End Try
End Sub
Note setting Header Row in DataBound() works only when the object is databound, any other postback that doesn't databind the gridview will result in the gridview header row style reverting to a standard row again. PreRender works everytime, just make sure you have an error catch for when the gridview is empty.

Just for the record, I got borders in the table and to get rid of it I needed to set following properties in the GridView:
GridLines="None"
CellSpacing="-1"

Add property of show header in gridview
<asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None"
AutoGenerateColumns="False">
and in columns add header template
<HeaderTemplate>
//header column names
</HeaderTemplate>

Issues with IE6 panels in asp.net application?

I ran into the alignment issues with IE6.Code works just fine with IE8.I have no other option but to support IE6.
Description:
My web page contains two pages.
Issue with page1(IE6):
I have two panels in the page1 which carry a grid view each.I want to place the panels with some grouping text in the page .As the grid view data keeps growing i want to keep the both panels aligned horizontally one at left side of the page and one at right side of the page.So it works exactly in IE8 but when i switch to IE6 the panels are aligning themselves vertically on above the other.
Here is the code
<div>
<div style="float: left">
<table width="100%">
<tr>
<td>
<asp:Panel ID="pnlUsers" runat="server" GroupingText="UserDetails "Wrap="true">
</asp:Panel>
</td>
</tr>
</table>
</div>
<div style="float: right">
<table align="center" width="100%">
<tr>
<td>
<asp:Panel ID="pnlLocation" runat="server" GroupingText="Location Details" Wrap="true">
</asp:Panel>
</td>
</tr>
</table>
</div>
</div>
Issue with Page2(IE6)
So in this page the max height of the panel is not taken and its extends vertically irrespective of the max height set to the panel!!!
<asp:Panel ID="pnlAge" runat="server" ScrollBars="Vertical" Width="100%"
HorizontalAlign="Center" CssClass="pnlAlignmentClass">
<asp:GridView runat="server" ID="gvages" AutoGenerateColumns="False" CellPadding="4" Width="100%">
</asp:GridView>
</asp:Panel>
CSS:
.pnlAlignmentClass
{
max-height: 310px;
overflow: auto;
}
I would appreciate if some one can suggest the right path .

IE6 does not support max-height. You can use regular height, but in IE6 it actually behaves like min-height.
To do max-height in ie6, follow this link: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/
* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
}
div#division {
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}