I am currently in the process of setting up a new web page using ASP.net. I have implemented a gridview with paging, but unfortunately, the CSS class I intended to use is not being applied correctly. While the rest of the page's CSS is functioning properly, there seems to be an issue specifically with this gridview. Despite my efforts to find a solution through Google searches, I have come up empty-handed. Any assistance or guidance on this matter would be greatly appreciated!
I have attempted various troubleshooting steps such as changing 'CSS class' to simply 'class', modifying the CSS Class settings, removing the CSS link from the Site Master, and even eliminating the DIV container surrounding the Gridview. However, none of these strategies have yielded the desired outcome.
Gridview:
<%--Records of the graphed data --%>
<div class="Records">
<h4>Shutdown Records</h4>
<asp:GridView ID="datagrid" runat="server" DataSourceID="SqlDataSource6" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
PageSize="6" AllowPaging="True" OnPageIndexChanging="datagrid_PageIndexChanging" Width="100%">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource6" runat="server"
ConnectionString="<%$ ConnectionStrings:Automation %>"
ProviderName="System.Data.SqlClient" SelectCommand="select ShutdownDate, ShutdownNotes, StartupDate, StartupNotes, Cast
(
Round
(
(
Cast
(
SUM(TotalDownTime)as decimal(18, 2)
)/3600
)
, 2
) as decimal(18, 2)
) as 'Duration of Shutdowns (Hours)'
from ProductionShutdownRecord
where Reason like '%'+@Reason+'%'
and ShutdownNotes like '%'+@shutdownNotes+'%'
and StartupNotes like '%'+@startupNotes+'%'
and ShutdownDate >= @startDate
and ShutdownDate <= @endDate
and AMSTaskRelated like
CASE
when @AMS = 1 then '%1%'
else '%%'
END
group by ShutdownDate, ShutdownNotes, StartupDate, StartupNotes
order by shutdowndate asc
">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1" DefaultValue="Scheduled Release"
Name="Reason" PropertyName="SelectedValue" Type="String" />
<asp:ControlParameter ControlID="shutdownNotes" ConvertEmptyStringToNull="False"
Name="shutdownNotes" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="startupNotes" ConvertEmptyStringToNull="False"
Name="startupNotes" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="startDate" ConvertEmptyStringToNull="False"
Name="startDate" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="endDate" ConvertEmptyStringToNull="False"
Name="endDate" PropertyName="Text" Type="String" />
<asp:ControlParameter ControlID="AMSCheck"
Name="AMS" PropertyName="Checked"/>
</SelectParameters>
</asp:SqlDataSource>
</div>
CSS:
/* Gridview Style
-------------------------------------------------------------------------------------------------------------*/
.mGrid {
width: 100%;
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.mGrid .alt {
background: #fcfcfc url(grd_alt.png) repeat-x top;
}
.mGrid .pgr {
background: #424242 url(grd_pgr.png) repeat-x top;
}
.mGrid .pgr table {
margin: 5px 0;
}
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a {
color: #666;
text-decoration: none;
}
.mGrid .pgr a:hover {
color: #000;
text-decoration: none;
}
Expected Result: I am attempting to apply this CSS Template:
Actual Result: Despite my efforts, all I see is a plain white gridview.