Row Highlighter Demo

This demo illustrates the row-highlighter (and row-clicker) in action. Move your mouse over a row to see the row become highlighted. Click anywhere in the row to begin editing the row. (You can download the complete code for the PrettyDataGrid custom control at http://aspnet.4guysfromrolla.com/code/RowHighlighter.zip.)


 IDNameHourly Wage
Edit1Scott$25.50
Edit2Jisun$29.95
Edit3Sam$6.75
Edit4Chris$11.25
Edit5Dave$19.95


Source Code
HTML Portion
<form id="Form1" method="post" runat="server">
   <cc1:PrettyDataGrid id="PrettyDataGrid1" runat="server" RowHighlightColor="255, 255, 128" BorderColor="#999999"
      BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="6" GridLines="Vertical" AutoGenerateColumns="False"
      RowClickEventCommandName="edit" OnEditCommand="PrettyDataGrid1_EditCommand"
      OnCancelCommand="PrettyDataGrid1_CancelCommand" OnUpdateCommand="PrettyDataGrid1_UpdateCommand">
      <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#008A8C"></SelectedItemStyle>
      <AlternatingItemStyle BackColor="Gainsboro"></AlternatingItemStyle>
      <ItemStyle ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
      <HeaderStyle Font-Bold="True" ForeColor="White" BackColor="#000084"></HeaderStyle>
      <FooterStyle ForeColor="Black" BackColor="#CCCCCC"></FooterStyle>
      <Columns>
         <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel" EditText="Edit"></asp:EditCommandColumn>
         <asp:BoundColumn DataField="EmployeeID" HeaderText="ID"></asp:BoundColumn>
         <asp:BoundColumn DataField="Name" HeaderText="Name"></asp:BoundColumn>
         <asp:BoundColumn DataField="HourlyWage" HeaderText="Hourly Wage" DataFormatString="{0:c}">
            <ItemStyle HorizontalAlign="Right"></ItemStyle>
         </asp:BoundColumn>
      </Columns>
      <PagerStyle HorizontalAlign="Center" ForeColor="Black" BackColor="#999999" Mode="NumericPages"></PagerStyle>
   </cc1:PrettyDataGrid>
</form>
Code-Behind Portion
private void Page_Load(object sender, System.EventArgs e)
{
   if (!Page.IsPostBack)
   {
      BindData();
   }
}

private void BindData()
{
   // Create the DataTable schema
   DataTable t = new DataTable();
   DataColumn c0 = new DataColumn("EmployeeID", typeof(int));
   DataColumn c1 = new DataColumn("Name", typeof(string));
   DataColumn c2 = new DataColumn("HourlyWage", typeof(float));

   t.Columns.Add(c0);
   t.Columns.Add(c1);
   t.Columns.Add(c2);

   // add some rows
   DataRow dr;
         
   dr = t.NewRow();
   dr["EmployeeID"] = 1;
   dr["Name"] = "Scott";
   dr["HourlyWage"] = 25.50F;
   t.Rows.Add(dr);

   dr = t.NewRow();
   dr["EmployeeID"] = 2;
   dr["Name"] = "Jisun";
   dr["HourlyWage"] = 29.95F;
   t.Rows.Add(dr);

   dr = t.NewRow();
   dr["EmployeeID"] = 3;
   dr["Name"] = "Sam";
   dr["HourlyWage"] = 6.75F;
   t.Rows.Add(dr);

   dr = t.NewRow();
   dr["EmployeeID"] = 4;
   dr["Name"] = "Chris";
   dr["HourlyWage"] = 11.25F;
   t.Rows.Add(dr);

   dr = t.NewRow();
   dr["EmployeeID"] = 5;
   dr["Name"] = "Dave";
   dr["HourlyWage"] = 19.95F;
   t.Rows.Add(dr);

   PrettyDataGrid1.DataSource = t;
   PrettyDataGrid1.DataBind();
}

private void PrettyDataGrid1_EditCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
   PrettyDataGrid1.EditItemIndex = e.Item.ItemIndex;
   PrettyDataGrid1.RowSelectionEnabled = false;
   BindData();
}

private void PrettyDataGrid1_CancelCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
   PrettyDataGrid1.EditItemIndex = -1;
   PrettyDataGrid1.RowSelectionEnabled = true;
   BindData();
}

private void PrettyDataGrid1_UpdateCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
   PrettyDataGrid1.EditItemIndex = -1;
   PrettyDataGrid1.RowSelectionEnabled = true;
   BindData();

   Response.Write("<big>The row could have been updated at this point...</big><br />");
}

[Return to the article...]