GridView

Grid within a GridView Cell

by JBrooks 8. November 2010 11:04

GridInGrid

I needed to display some parent data with it’s child data on the same row like shown in the image above. I happen to be combining a few tables together into a new table (called dtPlan) and then binding the GridView to that new table.  So this was my approach while moving the data into the dtPlan table.  dtRampRates is the child table to the data in dtResults.

 
DataView dvRampRates = new DataView(dtRampRates);
dvRampRates.Sort = "parentId, id";
StringBuilder sb = new StringBuilder();
 
for (int indexRow = 0; indexRow < dtResults.Rows.Count; indexRow++)
{
    DataRow drPlan = dtPlan.NewRow();
    drPlan["c0"] = planHour;
    drPlan["c1"] = dtResults.Rows[indexRow]["ResourceStatus"].ToString();
    drPlan["c2"] = dtResults.Rows[indexRow]["MinEconomicMW"].ToString();
    drPlan["c3"] = dtResults.Rows[indexRow]["MaxEconomicMW"].ToString();
 
    dvRampRates.RowFilter = "parentId=" + dtResults.Rows[indexRow]["id"].ToString();
    sb.Length = 0;
    sb.Append("<table cellspacing='0' class='RampRate'>");
 
    if (indexRow == 0)
        sb.Append("<tr><td>Limit</td><td>Up</td><td>Down</td></tr>");
 
 
    for (int i = 0; i < dvRampRates.Count; i++)
    {
        sb.Append("<tr><td>");
        sb.Append(dvRampRates[i]["breakpointLimit"].ToString());
        sb.Append("</td>");
 
        sb.Append("<td>");
        sb.Append(dvRampRates[i]["rampRateUp"].ToString());
        sb.Append("</td>");
 
 
        sb.Append("<td>");
        sb.Append(dvRampRates[i]["rampRateDown"].ToString());
        sb.Append("</td></tr>");
    }
    sb.Append("</table>");
 
    drPlan["c4"] = sb.ToString();
    dtPlan.Rows.Add(drPlan);
}
 
gvPlan.DataSource = dtPlan;
gvPlan.DataBind();

The child grid is made in the “for” loop.  Normally you would have this loop in the RowDataBound event for the GridView.  With that approach it is easy to see how most of the code would be the same.

Tags:

ASP.Net | GridView | Development

Displaying a Long Description Column in a GridView

by JBrooks 6. July 2010 20:05

A lot of times you have something like a description column and you want to display it in a GridView.  But since for some of the rows the description column can be very long, it doesn’t always work very well. One solution is where you set the TD’s attribute NOWRAP, then the column runs off to the right for as long as is needed.  The solution I sometimes employ is the following: 

First, here is my sample table:

CREATE TABLE Categories
(CategoryName varchar(20),
Description varchar(1000))
 
And here is the SQL that is going to bind to my GridView:
 
SELECT c.CategoryName,
CASE WHEN LEN(c.Description) > 30
THEN SUBSTRING(c.Description,1,27)+'...'
ELSE c.Description END AS LineDescription,
c.Description AS FullDescription
FROM dbo.Categories c
ORDER BY c.CategoryName

Notice that the Description column is in there twice. Once where it maxes out at 30 characters (the LineDescription column), and the second one that contains the full text (the FullDescription column.) This brings back a table that looks like the following:

CategoryName LineDescription FullDescription
Beverages Soft drinks, coffees, teas,... Soft drinks, coffees, teas, beers, and ales
Condiments Sweet and savory sauces, re... Sweet and savory sauces, relishes, spreads, and seasonings
Confections Desserts, candies, and swee... Desserts, candies, and sweet breads
Dairy Products Cheeses Cheeses
Grains/Cereals Breads, crackers, pasta, an... Breads, crackers, pasta, and cereal
Meat/Poultry Prepared meats Prepared meats
Produce Dried fruit and bean curd Dried fruit and bean curd
Seafood Seaweed and fish Seaweed and fish

 

So to bind this to the GridView we bind the first two columns only.  The first GridView column is bound to the CategoryName data column and the second one is bound to the LineDescription data column with the heading title of “Description”.  On the second GridView column we also click the “Convert this field into a TemplateField” as shown below.

GridViewColumns

 

We save this and then edit the templates for the GridView columns.  For the Description column we edit the ItemTemplate and we bind the ToolTip to the FullDescription data column.

ToolTipBinding

 

Now we have the GridView column that is titled “Description” bound to the LineDescription data column and the tooltip is bound to the FullDescription data column.  We can run this and  see how it works:

GridViewWithToolTip

So now we have a short description in our grid, but the user can easily see the full description in the ToolTip.

Tags:

ASP.Net | GridView | Development

Select One Row From a GridView

by JBrooks 5. August 2009 16:53

 

I have a page where the user can select which users are active (using CheckBoxes), and also select one (only one) to be the administrator.  I put together this sample to show how I did it.  The sample uses technologies instead of user.  The picture below gives you an idea.  I didn't want to use the GridView "selected row" functionality because I didn't want to do a PostBack and I have another project where the user has to select 1 row per day where a day can take up 3 to 10 rows and there were many days in the grid.

 
PickOne

 

 

using System;

using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class SelectOne : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ViewState["selectedBest"] = "ASP.Net";
 
            bind();
        }
    }
 
    protected void bind()
    {
        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();
 
    }
 
 
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType != DataControlRowType.DataRow)
            return;
 
        // See if this matches our saved selection.
        if (e.Row.Cells[1].Text.Equals(ViewState["selectedBest"].ToString()))
            e.Row.Cells[2].Text = e.Row.Cells[2].Text.Replace("value", "checked value");
 
        // Set the value to the RowIndex so it is unique.
        e.Row.Cells[2].Text = e.Row.Cells[2].Text.Replace("{0}", e.Row.RowIndex.ToString());
 
    }
 
    protected void btnSave_Click(object sender, EventArgs e)
    {
        int total = 0;
 
        //Count of the number that our checked.
        foreach (GridViewRow gvr in this.GridView1.Rows)
        {
            if (gvr.RowType != DataControlRowType.DataRow)
                continue;
 
            if (((CheckBox)gvr.Cells[0].FindControl("cbSelected")).Checked)
                total++;
 
        }
 
        //Save the selected Best.
        ViewState["selectedBest"] = 
            this.GridView1.Rows[Convert.ToInt32(Request.Form["RBBest"])].Cells[1].Text;
 
        //Normally you would be saving to the database here.
        this.lblMessage.Text = "You selected " + total.ToString() 
            + " with " + ViewState["selectedBest"].ToString() + " as the best.";
 
        bind();
 
    }
 
}
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectOne.aspx.cs" 
Inherits="SelectOne"%>
 
<!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>Test check all CheckBoxes</title>
 
    <script type="text/javascript" src="jquery-1[1].3.2.min.js"></script>
 
    <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;
                //gridViewRows[i].cells[0].childNodes[1].style.display = 'none';
            }
            return false;
        }
 
 
        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 id="divp" style="text-align: left">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        Caption="Pick Some Technologies"
            BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
            CellPadding="4" onrowdatabound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField HeaderText="Include" SortExpression="Include">
                    <HeaderTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" 
                        onclick="changeAllCheckBoxes(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="cbSelected" runat="server" />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:BoundField DataField="Name" HeaderText="Technology" />
                <asp:TemplateField HeaderText="Best">
                    <ItemTemplate>
                        <input id="RBBest" type="radio" name="RBBest" value="{0}" />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
            </Columns>
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>
    </div>
    <br />
    <div>
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
    </div>
    <br />
    <asp:Label ID="lblMessage" runat="server" Text="Make selections and then click Save">
    </asp:Label>
 
    </form>
</body>
</html>

Tags:

ASP.Net | GridView | Development

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>

    <script type="text/javascript">
        function toggleSelected(sender) {
            var row = GetParentElementByTagName(sender, "TR");

            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>

 

Tags:

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:

<div  id="divFiles" style="border: solid 1px black">

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

<br />

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

    <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">

        <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

        <Columns>

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

                <ItemTemplate>

                    <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" >

                <ItemStyle HorizontalAlign="Left" />

            </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:#,###,###}" >

                <ItemStyle HorizontalAlign="Right" />

            </asp:BoundField>

        </Columns>

        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

        <AlternatingRowStyle BackColor="White" />

    </asp:GridView>

</div>

<br />

 

 

Tags:

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("&nbsp;"));
        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;
}

Tags:

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();

        }
    }
}
 

 

 

Tags:

ASP.Net | Development | GridView