Vinz' Blog

using System;

using System.Collections.Generic;

using System.Text;

using System.Web.UI.Design;

using System.Globalization;

using System.Web.UI;

namespace GridBox

{

    public class GridBoxDesigner : ControlDesigner

    {

        private const string StandardDesignTimeHtml =

        @"<table style=""border:1px solid #CCCCCC;"" cellspacing=""0"" cellpadding=""0"">

        <tr>

        <td nowrap

        style=""font:messagebox;background-color:#ffffff;color:#444444;background-position:bottom;background-repeat:repeat-x;padding:4px;"">

        <strong>{0}</strong> - {1}</td>

        </tr>

        </table>";

        public override string GetDesignTimeHtml()

        {

            return

                 String.Format(

                    CultureInfo.InvariantCulture,

                    StandardDesignTimeHtml,

                    Component.GetType().Name,

                    ((Control)Component).ID);

        }

    }

}

using System;

using System.Collections.Generic;

using System.Text;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.ComponentModel.Design;

using System.Web;

using System.Security.Permissions;

namespace GridBox

{

    [

        AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal),

        AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal),

        Designer("GridBox.SimpleDesigner, GridBox"),

        ToolboxData("<{0}:GridBoxExtender runat=server></{0}:GridBoxExtender>"),

        TargetControlType(typeof(GridView))

    ]

    public class GridBoxExtender : ExtenderControl

    {

        #region Overrides

        protected override void OnLoad(EventArgs e) {

            base.OnLoad(e);

        }

        protected override IEnumerable<ScriptDescriptor> GetScriptDescriptors(Control targetControl) {

            if (TargetControl == null || !TargetControl.Visible || TargetControl.Rows.Count == 0) {

                TargetControl.Height = Unit.Empty;

                yield break;

            }

            ScriptBehaviorDescriptor descriptor = new ScriptBehaviorDescriptor("GridBox.GridBoxExtender", targetControl.ClientID);

            descriptor.AddProperty("scrollField", HiddenFieldID);

            yield return descriptor;

        }

        protected override IEnumerable<ScriptReference> GetScriptReferences() {

            if (TargetControl == null || !TargetControl.Visible || TargetControl.Rows.Count == 0) {

                TargetControl.Height = Unit.Empty;

                yield break;

            }

            yield return new ScriptReference("GridBox.GridBoxExtender.js", this.GetType().Assembly.FullName);

        }

        protected override void Render(HtmlTextWriter writer) {

            ScriptManager.RegisterHiddenField(

                this,

                HiddenFieldID,

                LastScroll.ToString()

                );

            base.Render(writer);

        }

        private GridView TargetControl {

            get {

                GridView result = this.NamingContainer.FindControl(TargetControlID) as GridView;

                return result;

            }

        }

        private int LastScroll {

            get {

                int result = 0;

                if (Page.Request[HiddenFieldID] != null) {

                    int.TryParse(Page.Request[HiddenFieldID], out result);

                }

                return result;

            }

        }

        private string HiddenFieldID {

            get {

                return String.Format("{0}_GVFHE_Scroll", ClientID);

            }

        }

        #endregion

    }

}

/// <reference name="MicrosoftAjax.debug.js" />

/// <reference name="MicrosoftAjaxTimer.debug.js" />

/// <reference name="MicrosoftAjaxWebForms.debug.js" />

Type.registerNamespace("GridBox");

    GridBox.GridBoxExtender = function(element) {

    GridBox.GridBoxExtender.initializeBase(this, [element]);

    this._documentResizeDelegate = null;

    this._lock = false;

    this._mainTableID = null;

    this._innerTableID = null;

    this._divChild = null;

    this._scrollField = 0;

}

GridBox.GridBoxExtender.prototype = {

    // Overrides

    //#region

    initialize: function() {

        GridBox.GridBoxExtender.callBaseMethod(this, 'initialize');

        this.initGrid();

    },

    dispose: function() {

        //Add custom dispose actions here

        $removeHandler(window, "resize", this._documentResizeDelegate);

        if (this._divChild) {

            $clearHandlers(this._divChild);

        }

        GridBox.GridBoxExtender.callBaseMethod(this, 'dispose');

    },

    //#endregion

    // Properties

    //#region

    get_scrollField: function() {

        return this._scrollField;

    },

    set_scrollField: function(value) {

        if (this._scrollField !== value) {

            this._scrollField = value;

            this.raisePropertyChanged('scrollField');

        }

    },

    //#endregion

    // Methods

    //#region

    getLastScroll: function() {

        var result = 0;

        var hf = $get(this._scrollField);

        if (hf) {

            result = parseInt(hf.value);

            if (!result) result = 0;

        }

        return result;

    },

    setLastScroll: function(value) {

        var hf = $get(this._scrollField);

        if (hf) {

            hf.value = value;

        }

    },

    initGrid: function() {

        // create deep clone of target grid

        var target = this.get_element();

        var clone = target.cloneNode(true);

        // get desired height of inner scrollable area

        var height = target.style.height;

        var width = target.style.width;

        var mainTable = target.cloneNode(false);

        mainTable.id = String.format("outer_{0}", target.id);

        target.parentNode.insertBefore(mainTable, target);

        var mainHead = document.createElement("thead");

        mainTable.appendChild(mainHead);

        var mainBody = document.createElement("tbody");

        mainTable.appendChild(mainBody);

        //**** ADDED FOOTER

        var mainFoot = document.createElement("tfoot");

        mainTable.appendChild(mainFoot);

        // Clone original header

        var header = target.rows[0].cloneNode(true);

        mainHead.appendChild(header);

        //**** ADDED FOOTER clone footer

        var footer = target.rows[target.rows.length - 1].cloneNode(true);

        mainFoot.appendChild(footer);

        // add scrollable area mainTable

        var secondRow = document.createElement("tr");

        mainBody.appendChild(secondRow);

        var mainTd = document.createElement("td");

        secondRow.appendChild(mainTd)

        this.setAttribute(mainTd, "colspan", target.rows[0].cells.length);

        this.setAttribute(mainTd, "align", "left");

        this.setAttribute(mainTd, "valign", "top");

        var divChild = document.createElement("div");

        mainTd.appendChild(divChild);

        divChild.style.width = width;

        divChild.style.height = height;

        $addHandler(divChild, "scroll", Function.createDelegate(this, this.syncScroll));

        divChild.style.overflow = "auto";

        divChild.style.overflowX = "hidden";

        divChild.style.overflowY = "scroll";

        this._divChild = divChild;

        //        Sys.UI.DomElement.addCssClass(divChild, "divScrollVertical");

        // now remove old grid from document and insert new clone into the place

        target.parentNode.removeChild(target);

        divChild.appendChild(clone);

        // assign extender related data to clone

        clone._behaviors = target._behaviors;

        clone.GridBoxExtender = target.GridBoxExtender;

        // correct styles

        var attributes = [];

        for (var i = 0; i < clone.attributes.length; i++) {

            var attr = clone.attributes.item(i);

            var value = attr.value.trim().toLowerCase();

            if (value != "cellpadding" && value != "cellspacing") {

                Array.add(attributes, attr);

            }

        }

        Array.forEach(attributes, this.deleteAttribute, clone);

        clone.deleteRow(0); //remove header row

        clone.deleteRow(clone.rows.length - 1); //remove 5footer

        clone.border = "0";

        clone.style.borderWidth = "0px";

        clone.style.width = "100%";

        clone.style.height = "";

        mainTable.style.height = "";

        target.style.height = "";

        // correct widths of header columns and subscribe to document resize event:

        this._mainTableID = mainTable.id;

        this._innerTableID = clone.id;

        this._documentResizeDelegate = Function.createDelegate(

            this,

            this.syncWidths

        );

        this._documentResizeDelegate.call();

        // Attach to window's resize event to resize header cells when inner cells change their size

        $addHandler(window, "resize", this._documentResizeDelegate);

        // Restore scroll position from last time 

        divChild.scrollTop = this.getLastScroll();

    },

    setAttribute: function(element, attribute, value) {

        var namedItem = document.createAttribute(attribute);

        namedItem.value = value;

        element.attributes.setNamedItem(namedItem);

    },

    deleteAttribute: function(attribute, index, attributes) {

        this.removeAttribute(attribute);

    },

    syncScroll: function(args) {

        if (this._divChild) {

            this.setLastScroll(this._divChild.scrollTop);

        }

    },

    syncWidths: function(args) {

        if (!this._lock) {

            this._lock = true;

            var mainTable = $get(this._mainTableID);

            var innerCellPadding = mainTable.cellPadding;

            var header = mainTable.rows[0];

            var innerTable = $get(this._innerTableID);

            var originalRow = innerTable.rows[0];

            var headerWidth = Sys.UI.DomElement.getBounds(header).width;

            var originalRowWidth = Sys.UI.DomElement.getBounds(originalRow).width;

            var diff = headerWidth - originalRowWidth - innerCellPadding * 2;

            if (originalRow && header) {

                for (var i = 0; i < originalRow.cells.length; i++) {

                    var bounds = Sys.UI.DomElement.getBounds(originalRow.cells[i]);

                    var x = bounds.width;

                    if (i == originalRow.cells.length - 1) {

                        x = x + diff - innerCellPadding * 2;

                    } else {

                        x = x - innerCellPadding;

                    }

                    header.cells[i].style.width = x + "px";

                }

            }

            this._lock = false;

        }

    }

    //#endregion

}

GridBox.GridBoxExtender.registerClass('GridBox.GridBoxExtender', Sys.UI.Behavior);

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestGridBox.aspx.cs" Inherits="TestGridBox" %>

<%@ Register Assembly="GridBox" Namespace="GridBox" TagPrefix="cc1" %>

<!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>GridBox Demo</title>

    <link href="CSS/GridBoxSample.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"/>

    <div style="width:500px">

        <asp:GridView ID="GridView1" runat="server" Width="100%" GridLines="None" ShowFooter="true"  AutoGenerateColumns="false" CssClass="gridbox" Height="150px">

        <RowStyle CssClass="data-row" />

        <FooterStyle CssClass="footer-style"/>

        <Columns>

            <asp:TemplateField ItemStyle-Width="5%">

            <HeaderTemplate>

                <asp:CheckBox ID="CheckBoxAll" runat="server" Text="All" />

            </HeaderTemplate>

            <ItemTemplate>

                <asp:CheckBox ID="CheckBoxSelect" runat="server" />

            </ItemTemplate>

            <FooterTemplate>

            </FooterTemplate>

            </asp:TemplateField>

            <asp:BoundField DataField="TerminalNumber" HeaderText="Terminal #" ItemStyle-Width="10%"  />

            <asp:BoundField DataField="TransactionNumber" HeaderText="Transaction #" ItemStyle-Width="10%"/>

            <asp:BoundField DataField="OperatorNumber" HeaderText="Operator #" ItemStyle-Width="10%"/>

            <asp:BoundField DataField="OperatorName" HeaderText="Operator Name" ItemStyle-Width="10%"/>

        </Columns>

        </asp:GridView>

       <cc1:GridBoxExtender ID="GridBoxExtender1" runat="server" TargetControlID="GridView1" />

      </div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

    </form>

</body>

</html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>        

         <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="109px" SelectionMode="Multiple" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" Width="141px">

        <asp:ListItem >A</asp:ListItem>

        <asp:ListItem >B</asp:ListItem>

        <asp:ListItem >C</asp:ListItem>

        <asp:ListItem >D</asp:ListItem>

        <asp:ListItem >E</asp:ListItem>

        <asp:ListItem >F</asp:ListItem>

        </asp:ListBox>

    </div>

    </form>

</body>

</html>

protected void Page_Load(object sender, EventArgs e) {

        if (!Page.IsPostBack)

        {

            ListBox1.ClearSelection();

        }

    }

    protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)

    {

        int count = 0;

        int limit = 0;

        int lastSelectedIndex = 0;

        if(ViewState["lastSelectedIndex"] != null){

            lastSelectedIndex = int.Parse(ViewState["lastSelectedIndex"].ToString());

            ViewState["lastSelectedIndex"] = lastSelectedIndex;

        }

        else{

            lastSelectedIndex = ListBox1.SelectedIndex;

        }

            for (int i = 0; i < ListBox1.Items.Count; i++) {

            if (ListBox1.Items[i].Selected) {

                if (ViewState["CountLimit"] != null) {

                    count++;

                    ViewState["CountLimit"] = count;

                    limit = (int)ViewState["CountLimit"];

                }

                else {

                    count++;

                    ViewState["CountLimit"] = count;

                }

                if (limit > 3) // Selected Item Limit is up to 3

                {

                    Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowBox", "alert('You are only allowed to Select 3 items!');", true);

                    ListBox1.Items[lastSelectedIndex].Selected = false;

                }

            }

        }

    }

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

      <script type="text/javascript" language="javascript">

        function HideDiv()

        {

             document.getElementById("ContainerDiv").style.display = 'none';

             return false;

        }

        function ShowDiv(e)

        {

            document.getElementById("ContainerDiv").style.display = 'block';

            if(!e)

            e=window.event;

            e.cancelBubble=true;

            return false;

        }

    </script>

</head>

<body onclick="return HideDiv();">

    <form id="form1" runat="server">

    <asp:Button ID="Button1" runat="server" Text="Show Div" OnClientClick="return ShowDiv(event);" />

      <div id="ContainerDiv"

       style="width:521px;

              height:200px;

              background-color:Gray;

              left:150px;

              position:absolute;

              top: 201px;

              display:block"

              align="center"

              onclick ="return ShowDiv(event);">

       HELLO ASP.NET

       <br />

       <asp:TextBox ID="TextBox1" runat="server" onclick = "return ShowDiv(event);"></asp:TextBox>

      </div>

    </form>

</body>

</html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    </div>

    <table>

        <tr>

            <td valign="top">

                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

                <Columns>

                    <asp:TemplateField>

                        <ItemTemplate>

                            <asp:CheckBox ID="CheckBox1" runat="server" />

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:BoundField DataField="EmployeeID" HeaderText="ID" />

                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />

                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />

                </Columns>

                </asp:GridView>

            </td>

            <td>

                <asp:Button ID="Button1" runat="server" Text=">>>" onclick="Button1_Click" />

                <br />

                <asp:Button ID="Button2" runat="server" Text="<<<" onclick="Button2_Click" />

            </td>

            <td valign="top">

               <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false">

                <Columns>

                    <asp:TemplateField>

                        <ItemTemplate>

                            <asp:CheckBox ID="CheckBox1" runat="server" />

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:BoundField DataField="EmployeeID" HeaderText="ID" />

                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />

                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />

                </Columns>

              </asp:GridView>

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

public partial class AddMultipleRowsGridView : System.Web.UI.Page

{

    private DataTable _clonedTable;

    private string GetConnectionString()

    {

        return @"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Northwind.mdf;Integrated Security=True;User Instance=True";

    }

    private DataTable QueryData()

    {

        DataTable dt = new DataTable();

        SqlConnection connection = new SqlConnection(GetConnectionString());

        try

        {

            connection.Open();

            string sqlStatement = "SELECT TOP(10)EmployeeID, LastName, FirstName FROM Employees";

            SqlCommand sqlCmd = new SqlCommand(sqlStatement, connection);

            SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

            sqlDa.Fill(dt);

        }

        catch (System.Data.SqlClient.SqlException ex)

        {

            string msg = "Fetch Error:";

            msg += ex.Message;

            throw new Exception(msg);

        }

        finally

        {

            connection.Close();

        }

        return dt;

    }

    private void BindGrid(DataTable dt, GridView gv)

    {

        if (dt.Rows.Count > 0)

        {

            dt = TrimEmptyRow(dt);

            gv.DataSource = SortData(dt);

            gv.DataBind();

        }

        else

        {

            ShowNoResultFound(dt, gv);

        }

        if (gv.ID == "GridView1")

            ViewState["OrigData"] = dt;

        else

        {

            ViewState["MovedData"] = dt;

        }

    }

    private DataTable SortData(DataTable dt)

    {

        DataView dv = dt.DefaultView;

        dv.Sort = "EmployeeID ASC";

        dt = dv.ToTable();

        return dt;

    }

    private void MoveRows(DataTable dt, GridView gv)

    {

            for (int i = gv.Rows.Count - 1; i >= 0; i--)

            {

                CheckBox cb = (CheckBox)gv.Rows[i].Cells[0].FindControl("CheckBox1");

                if (cb != null)

                {

                    if (cb.Checked)

                    {

                        AddRow(dt.Rows[i], gv);

                        dt.Rows.Remove(dt.Rows[i]);

                    }

                }

            }

            BindGrid(dt, gv);

    }

    private void AddRow(DataRow row,GridView gv)

    {

        DataTable dt = null;

        if (ViewState["MovedData"] == null)

        {

            dt = (DataTable)ViewState["ClonedTable"];

            dt.ImportRow(row);

            dt.Rows.Remove(dt.Rows[0]);

            ViewState["MovedData"] = dt;

            BindGrid(dt, GridView2);

        }

        else

        {

            if (gv.ID == "GridView1")

            {

                dt = (DataTable)ViewState["MovedData"];

                dt.ImportRow(row);

                ViewState["MovedData"] = dt;

                BindGrid(dt, GridView2);

            }

            else

            {

                dt = (DataTable)ViewState["OrigData"];

                dt.ImportRow(row);

                ViewState["OrigData"] = dt;

                BindGrid(dt, GridView1);

            }

        }

    }

    private DataTable TrimEmptyRow(DataTable dt)

    {

        if (dt.Rows[0][0].ToString() == string.Empty)

        {

            dt.Rows.Remove(dt.Rows[0]);

        }

        return dt;

    }

    private void ShowNoResultFound(DataTable source, GridView gv)

    {

        source.Rows.Add(source.NewRow()); // create a new blank row to the DataTable

        // Bind the DataTable which contain a blank row to the GridView

        gv.DataSource = source;

        gv.DataBind();

        // Get the total number of columns in the GridView to know what the Column Span should be

        int columnsCount = gv.Columns.Count;

        gv.Rows[0].Cells.Clear();// clear all the cells in the row

        gv.Rows[0].Cells.Add(new TableCell()); //add a new blank cell

        gv.Rows[0].Cells[0].ColumnSpan = columnsCount; //set the column span to the new added cell

        //You can set the styles here

        gv.Rows[0].Cells[0].HorizontalAlign = HorizontalAlign.Center;

        gv.Rows[0].Cells[0].ForeColor = System.Drawing.Color.Red;

        gv.Rows[0].Cells[0].Font.Bold = true;

        //set No Results found to the new added cell

        gv.Rows[0].Cells[0].Text = "NO ITEMS FOUND!";

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindGrid(QueryData(), GridView1);

            _clonedTable = QueryData().Clone();

            ViewState["ClonedTable"] = _clonedTable;

            ShowNoResultFound(_clonedTable, GridView2);

        }

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        DataTable dtOrigData = (DataTable)ViewState["OrigData"];

        MoveRows(SortData(dtOrigData), GridView1);

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

        DataTable dtMovedData = (DataTable)ViewState["MovedData"];

        MoveRows(SortData(dtMovedData), GridView2);

    }

}