How to Work With a GridView Row in JavaScript

by JBrooks 14. July 2009 16:40

The question came up asking how to change something in a GridView row based on something else in that row without doing a postback. So I created a simple example where if you check a CheckBox then another column in that row would have it's background color changed. I did this in a generic way by sending the checkbox to the function by using the keywork "this" and then getting a reference to the row. Here is what it looks like:

So when you check the CheckBox for a given row, it's "Name" column's background changes color to Aqua.

Here is the code behind to bind the table:

using System;
using System.Data;

namespace BlogTests
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
               DataTable dt = new DataTable();

                dt.Columns.Add("Include", typeof(Boolean));
                dt.Columns.Add("Name", typeof(String));
                dt.Rows.Add(new Object[] { 0, "Jim" });
                dt.Rows.Add(new Object[] { 0, "Jen" });
                dt.Rows.Add(new Object[] { 0, "Kylie" });
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

}
}

and then the .aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BlogTests._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Row Test</title>
    <style type="text/css">
        .selected
        {
            background-color: Aqua;
            font-weight: bold;
        }
    </style>
</head>
<body>

            if (sender.checked)
                row.cells[1].className = "selected";
            else
                row.cells[1].className = '';

}

        function GetParentElementByTagName(element, tagName) {
            var element = element;
            while (element.tagName != tagName)
                element = element.parentNode;
            return element;
        }
    </script>

    <form id="form1" runat="server">
    <div>
    </div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="Include" SortExpression="Include">
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("Include") %>' onclick="toggleSelected(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name">
                <ItemStyle HorizontalAlign="Left" />
            </asp:BoundField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

3a37fc8e-7e39-4388-8ed1-22d4a1582d83|0|.0

Tags: asp.net gridview javascript

ASP.Net | Development | GridView

Attaching upload files to a record.

by JBrooks 2. July 2009 11:31

One of our applications has a page for our users to report bugs. We wanted to allow them to “attach” one or more files to the bug record. The files could be screen shots, spreadsheets, etc. So the bug entry page would have the normal data entry part and have the following box at the bottom of the page:

If you click the FileName it will download the file if IIS is setup to send that extention. All this should be made into a user control or a server control, but for now I have the code in the page. Here are the key parts:

// the page has a property that returns the bug's record id.

private int id

{ get { return Convert.ToInt32(Request.QueryString["id"]); } }

private string uploadDir

{ get { return System.AppDomain.CurrentDomain.BaseDirectory+ "\\Uploads\\"; } }

protected void btnUpload_Click(object sender, EventArgs e)

{

if (this.FileUpload1.HasFile)

{ //we rename the file to start with the id and an underscore.

string fileName = uploadDir + id.ToString() + "_" + FileUpload1.FileName;

FileUpload1.SaveAs(fileName);

bindFiles();

} else { setErrorMessage("You have not specified a file."); }

}

protected void bindFiles()

{

// make a table to hold the file's information.

DataTable dt = new DataTable();

dt.Columns.Add("FileName", typeof(String));

dt.Columns.Add("Created", typeof(DateTime));

dt.Columns.Add("Size", typeof(Int32));

dt.Columns.Add("id", typeof(Int32));

// get a list of files that start with our id.

string[] files = Directory.GetFiles(uploadDir,id.ToString()+"_*.*");

//populate the table.

foreach (string fileName in files)

{

DataRow dr = dt.NewRow();

FileInfo fi = new FileInfo(fileName);

// at this point we need to strip off the id.

dr["FileName"] = fileName.Substring(fileName.LastIndexOf("\\") + 2 + id.ToString().Length);

dr["Created"] = fi.CreationTime;

dr["Size"] = fi.Length;

dr["id"] = this.id;

dt.Rows.Add(dr);

}

// now bind the table to our gridview

this.gvFiles.DataSource = dt;

this.gvFiles.DataBind();

}

protected void lbDelete_Click(object sender, EventArgs e)

{

//Don't like how fragile this is, but good enough for now.

string fileName = uploadDir + id.ToString() + "_" + ((HyperLink)((GridViewRow)((LinkButton)sender).Parent.Parent).Cells[1].Controls[0]).Text;

File.Delete(fileName);

bindFiles();

}

Here is the related mark-up from the aspx page:

<span id="Span1" style="font-size:X-Large;font-weight:bold;">FILES</span>

<br />

<asp:FileUpload ID="FileUpload1" runat="server" />   

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br />

<br />

<asp:GridView ID="gvFiles" runat="server" AutoGenerateColumns="False" Caption="<strong>FILES</strong>"

CaptionAlign="Top" CellPadding="4" ForeColor="#333333" GridLines="None">

<asp:TemplateField InsertVisible="False" ShowHeader="False">

<asp:LinkButton ID="lbDelete" runat="server" CausesValidation="False" CommandName="Delete"

Text="Delete" OnClientClick="confirm('Are you sure you want to delete this file?');" OnClick="lbDelete_Click"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

<asp:HyperLinkField DataTextField="FileName" SortExpression="FileName" Text="FileName"

HeaderText="FileName" DataNavigateUrlFormatString="~/Uploads/{0}_{1}"

DataNavigateUrlFields="id,FileName" >

</asp:HyperLinkField>

<asp:BoundField DataField="Created" DataFormatString="{0:M/d/yy H:mm}" HeaderText="Created"

SortExpression="Created" />

<asp:BoundField DataField="Size" HeaderText="Size" SortExpression="Size" DataFormatString="{0:#,###,###}" >

</asp:BoundField>

</Columns>

</asp:GridView>

</div>

<br />

99a9e096-e562-4bb0-9711-5cfdcb428a65|0|.0

Tags: c# file upload

ASP.Net | GridView | Development

GridView Sort Column Arrow Performance

by JBrooks 23. February 2009 16:11

I see code like the following a lot:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
     if (e.Row.RowType == DataControlRowType.Header)
            if (String.Empty != this.GridView1.SortExpression)
                     AddSortImage(e.Row);

}

The problem with this is that it fires for each row in the GridView slowing performance. A better way is the following which only fires once per GridView binding:

protected void GridView1_DataBound(object sender, EventArgs e)
{
if (String.Empty != this.GridView1.SortExpression)
AddSortImage(GridView1.HeaderRow);
}

The supporting methods are:

void AddSortImage(GridViewRow headerRow)
{
     int iCol = GetSortColumnIndex();
     if (-1 == iCol)
           return;

     // Create the sorting image based on the sort direction.

Image sortImage = new Image();
if (SortDirection.Ascending == this.GridView1.SortDirection)

{             sortImage.ImageUrl = @"~\Images\BlackDownArrow.gif";
               sortImage.AlternateText = "Ascending Order";
}     else
{
             sortImage.ImageUrl = @"~\Images\BlackUpArrow.gif";
             sortImage.AlternateText = "Descending Order";

}
      // Add the image to the appropriate header cell.
        headerRow.Cells[iCol].Controls.Add(new LiteralControl(" "));
        headerRow.Cells[iCol].Controls.Add(sortImage);
}

public int GetSortColumnIndex()
{
      // Iterate through the Columns collection to determine the index
      // of the column being sorted.
      foreach (DataControlField field in GridView1.Columns)
       {
             if (field.SortExpression == this.GridView1.SortExpression)
               {
                  return this.GridView1.Columns.IndexOf(field);
                }
         }
      return -1;
}

153e083c-a26e-49f3-b72f-94c36f0165a1|1|5.0

Tags: gridview asp.net

ASP.Net | GridView

Checking All CheckBoxes in a GridView Using Client-Side Script

by JBrooks 11. February 2009 11:48

Given a GridView like the one below, I want to add the ability to check the check box in the header and have that event check all of the checkboxes in each row.

I did this by adding 12 lines of JavaScript code and adding 1 attribute to my header template. Below is the markup followed by the code-behind. The parts I added to this simple page are in bold.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test check all CheckBoxes</title>
       <script type="text/javascript" language="javascript">
        function changeAllCheckBoxes(sender) {
            var gridViewRows = GetParentElementByTagName(sender, "TABLE").rows;
            for (var i = 1; i < gridViewRows.length; ++i) {
                gridViewRows[i].cells[0].childNodes[0].checked = sender.checked;
            }
        }

        function GetParentElementByTagName(element, tagName) {
            var element = element;
            while (element.tagName != tagName)
                element = element.parentNode;
            return element;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        Caption="Pick Some Technologies" BackColor="White" BorderColor="#CC9966"
        BorderStyle="None" BorderWidth="1px" CellPadding="4">
    <Columns>
            <asp:TemplateField HeaderText="Include" SortExpression="Include">
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" onclick="changeAllCheckBoxes(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Center" />
            </asp:TemplateField>
            <asp:BoundField DataField="Name" HeaderText="Technology" />
        </Columns>
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
    </asp:GridView>
    </form>
</body>
</html>

using System;
using System.Data;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();

            dt.Columns.Add("Include", typeof(Boolean));
            dt.Columns.Add("Name", typeof(String));
            dt.Rows.Add(new Object[] { false, "C#" });
            dt.Rows.Add(new Object[] { false, "ASP.Net" });
            dt.Rows.Add(new Object[] { false, "SQL Server" });
            dt.Rows.Add(new Object[] { false, "VB.Net" });

            GridView1.DataSource = dt;
            GridView1.DataBind();

        }
    }
}

24e07981-e7f5-4aae-bc69-321e735d0627|2|3.0

Tags: asp.net c# gridview checkbox

ASP.Net | Development | GridView

How to Work With a GridView Row in JavaScript

Attaching upload files to a record.

GridView Sort Column Arrow Performance

Checking All CheckBoxes in a GridView Using Client-Side Script

RecentPosts

Book List

How to Work With a GridView Row in JavaScript

Attaching upload files to a record.

GridView Sort Column Arrow Performance

Checking All CheckBoxes in a GridView Using Client-Side Script

Tag cloud

RecentPosts

Book List