GridView Quick Steps
Step 1…
If Not Page.IsPostBack Then
Dim objConn As New SqlConnection(Session("ConString"))
Dim objCommand As New SqlCommand
Dim objDa As New SqlDataAdapter
Dim objDs As New DataSet
Dim sSQL As String = ""
sSQL = sSQL & " SELECT * from Users order by Name_last”
objCommand.CommandText = sSQL
objCommand.Connection = objConn
objDa.SelectCommand = objCommand
objDa.Fill(objDs, "Users")
objConn.Close()
gvRatingDetail.DataSource = objDs.Tables("Users")
gvRatingDetail.DataBind()
End If
Step 2…
<asp:GridView ID="gvCanList" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name_First" HeaderText="First" />
<asp:BoundField DataField="Name_Last" HeaderText="Last" />
<asp:BoundField DataField="Exam_Name" HeaderText="Exam" />
<asp:BoundField DataField="Exam_Completed_Date" HeaderText="Exam Date" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelect" Text="Select" runat="server" CommandArgument='<%# Eval("id_user") %>' OnClick="CanDetail" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Step 3…
Protected Sub CanDetail(sender As Object, e As EventArgs)
Dim lb As LinkButton = sender
Session("id_user_id_score_file") = lb.CommandArgument
End Sub
Bonus Features…
Color a Row based
on a cell..
Private Sub gvCanList_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles gvCanList.RowDataBound
If e.Row.RowType
= DataControlRowType.DataRow Then
Dim sFinished
As String = e.Row.Cells(7).Text
If IsDate(sFinished)
Then
e.Row.BackColor = Drawing.Color.Pink
End If
End If
End Sub
Confirm Delete…
<asp:LinkButton ID="LinkButton1" Text="Deactivate
Rater" runat="server" CommandArgument='<%# Eval("id_Raters_Rating") %>' OnClientClick="return
confirm('Are you sure you want to delete this event?');" OnClick="InActivateRating" />
EVAL to Javascript Function Onclientclick…
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkPlay" Text="Ques" runat="server"
OnClientClick='<%# "PlayIt(" & Chr(34)
& Eval("FileName")
& Chr(34) & ");return
false;" %>' />
</ItemTemplate>
</asp:TemplateField>
Freeze the Gridview
Header…
<!-- ***********************************************************************
Freeze GridView
Header
***************************************************************************
-->
<div style="width:1300px;">
<div id="GHead"></div>
<%-- This GHead is added for Store Gridview
Header --%>
<div style="height:400px; overflow:auto">
<!--******************************************************************************
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Don't Forget
to add the 2 Closing Divs at the bottom of the gridview.
ALSO,
don’t forget to add the jquery
references in the page HEAD section
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
******************************************************************************
****************************************************************************** -->
<script>
$(document).ready(function () {
// ********************* Freeze GridView
Header **********************************************************
This MAY NOT BE NEEDED. BUT JUST IN
CASE…
// *******************************************************************************************************
// Public
Overrides Sub
VerifyRenderingInServerForm(ByVal
control As Control)
// '**********************************************************
// '**********************************************************
//
'Mandatory to have
this empty sub to avoid runtime error
// '**********************************************************
// '**********************************************************
// End
Sub
var gridHeader = $('#<%=gvRaterListing.ClientID%>').clone(true); // Here
Clone Copy of Gridview with style
$(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first
row (header row)
$('#<%=gvRaterListing.ClientID%> tr th').each(function (i) {
// Here Set
Width of each th from gridview
to new table(clone table) th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
$("#GHead").append(gridHeader);
$('#GHead').css('position', 'absolute');
$('#GHead').css('top', $('#<%=gvRaterListing.ClientID%>').offset().top);
// *******************************************************************************************************
//
*******************************************************************************************************
}); //document.ready
</script>
Hide a Column..
<style type="text/css">
.hiddencol
{
display:none;
}
</style>
Private Sub gvRaterDetail_RowCreated(sender As Object, e As GridViewRowEventArgs)
Handles gvRaterDetail.RowCreated
e.Row.Cells(13).CssClass = "hiddencol"
e.Row.Cells(14).CssClass = "hiddencol"
End Sub