Moving data between a pair of Repeaters using JQuery

The following example demonstrates how to move multiple records from one repeater to another, back-&-forth.It’s totally client-side, using JQuery.
Here’s the application in action, with few screen shots & the complete source code.

img4
img3

img2

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

<!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></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function (evt) {
    $('#src :input:checked').each(function (i, item) {
        var u1 = $(item).closest('ul')[0];
        $(item).attr("checked", false);
        $('#dest').append(u1);
        $('#dest #footer').hide();
        if ($('#Button2').is(':visible') == false) {
            $('#Button2').show();
        }
    });

    $('#src #footer').html('');
    if ($('#src :input[type=checkbox]').length == 0) {
        $('#src #footer').show();
        $('#src #footer').html('No item present');
        $("#Button1").hide();
    }
    evt.preventDefault();
});

$("#Button2").click(function (evt) {
    $('#dest :input:checked').each(function (i, item) {
        var u1 = $(item).closest('ul')[0];
        $(item).attr("checked", false);
        $('#src').append(u1);
        $('#src #footer').hide();
        if ($('#Button1').is(':visible') == false) {
            $('#Button1').show();
        }
    });

    $('#dest #footer').html('');
    if ($('#dest :input[type=checkbox]').length == 0) {
        $('#dest #footer').show();
        $('#dest #footer').html('No item present');
        $("#Button2").hide();
    }
    evt.preventDefault();
});
});

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<table><tr>
    <td id="src" valign="top">
    <asp:Repeater ID="Repeater1" runat="server" onitemdatabound="Repeater1_ItemDataBound" >
    <HeaderTemplate><ul>Repeater1</ul></HeaderTemplate>
    <ItemTemplate>
    <ul>
    <input type="checkbox" id="cb1"/><div> &nbsp; <%# Eval("id")%>&nbsp;<%# Eval("ItemDescription")%>&nbsp;<%# Eval("ItemPrice")%></div></ul>
    </ItemTemplate>
    <FooterTemplate>
        <ul id="footer" style="color:Orange; font-size:large; font-weight:bold;"><asp:Label ID="lblEmptyData" Text="" runat="server" Visible="false"></asp:Label></ul>
    </FooterTemplate>
    </asp:Repeater>
    </td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>
<asp:Button ID="Button1" ClientIDMode="Static" runat="server" OnClientClick="return false;" Text=" >> " />  &nbsp; <asp:Button ID="Button2" style="display:none;" ClientIDMode="Static" runat="server" Text=" << " />
</td>
<td>&nbsp;&nbsp;&nbsp;</td>
    <td id="dest" valign="top">
    <asp:Repeater ID="Repeater2" runat="server" onitemdatabound="Repeater2_ItemDataBound" >
    <HeaderTemplate><ul>Repeater2</ul></HeaderTemplate>
    <ItemTemplate>
    <ul>
    <asp:CheckBox ID="cb1" runat="server" /> &nbsp; <%# Eval("id")%>&nbsp;<%# Eval("ItemDescription")%>&nbsp;<%# Eval("ItemPrice")%></ul>
    </ItemTemplate>
    <FooterTemplate>
        <ul id="footer" style="color:Orange; font-size:large; font-weight:bold;"><asp:Label ID="lblEmptyData" Text="" runat="server" Visible="false"></asp:Label></ul>
    </FooterTemplate>
    </asp:Repeater>
    </td>
</tr></table>
<br />
        
</div>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class PairOfRepeaterMoveData : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        int y1 = 9;
        if (!IsPostBack)
        {
            Repeater1.DataSource = GetData();
            Repeater1.DataBind();

            Repeater2.DataSource = new DataTable();
            Repeater2.DataBind();
        }
    }

    private DataTable GetData()
    {
        DataTable t = new DataTable();
        t.Columns.Add(new DataColumn("id", typeof(int)));
        t.Columns.Add(new DataColumn("ItemDescription", typeof(string)));
        t.Columns.Add(new DataColumn("ItemPrice", typeof(decimal)));
        DataRow r = t.NewRow();
        r["id"] = 1;
        r["ItemDescription"] = "Item1";
        r["ItemPrice"] = 1.11;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 2;
        r["ItemDescription"] = "Item2";
        r["ItemPrice"] = 2.22;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 3;
        r["ItemDescription"] = "Item3";
        r["ItemPrice"] = 3.33;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 4;
        r["ItemDescription"] = "Item4";
        r["ItemPrice"] = 4.44;
        t.Rows.Add(r);
        r = t.NewRow();
        r["id"] = 5;
        r["ItemDescription"] = "Item5";
        r["ItemPrice"] = 5.55;
        t.Rows.Add(r);
        return t;
    }


    protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (Repeater1.Items.Count < 1)
        {
            if (e.Item.ItemType == ListItemType.Footer)
            {
                Label lblFooter = (Label)e.Item.FindControl("lblEmptyData");
                lblFooter.Text = "No item present";
                lblFooter.Visible = true;
            }
        }
    }

    protected void Repeater2_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (Repeater2.Items.Count < 1)
        {
            if (e.Item.ItemType == ListItemType.Footer)
            {
                Label lblFooter = (Label)e.Item.FindControl("lblEmptyData");
                lblFooter.Text = "No item present";
                lblFooter.Visible = true;
            }
        }
    }
}

Hope this helps. Thanks for reading.

Advertisements
This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s