Moving,Sorting and Searching Items between two Generic Listbox controls

 

I will explain you how to create user control using two listbox control and moving,filtering and searching items between them.First of all you should add two listbox and add the buttons like given below.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucListBox.ascx.cs" Inherits="ucListBox" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<script type="text/javascript" language="javascript">
    var ddlText, ddlValue, ddl, lblMesg;
    function CacheItems() {

        ddlText = new Array();
        ddlValue = new Array();
        ddl = document.getElementById("<%=lstAvailable.ClientID %>");

        for (var i = 0; i < ddl.options.length; i++) {
            ddlText[ddlText.length] = ddl.options[i].text;
            ddlValue[ddlValue.length] = ddl.options[i].value;
        }
    }
   
    window.onload = CacheItems;

    function FilterItems(value) {
    
        ddl.options.length = 0;
        for (var i = 0; i < ddlText.length; i++) {
            if (ddlText[i].toLowerCase().indexOf(value) != -1) {
                AddItem(ddlText[i], ddlValue[i]);
            }
        }

        if (ddl.options.length == 0) {
            AddItem("", "");
        }
    }

    function AddItem(text, value) {

        var opt = document.createElement("option");
        opt.text = text;
        opt.value = value;
        ddl = document.getElementById("<%=lstAvailable.ClientID %>");
        ddl.options.add(opt);
    }
 
</script>

<table width="100%" border="0">
    <tr>
        <td style="width: 19%; height: 24px;" runat="server" id="tdd">
            <span style="font-size: 8pt"><strong>
                <asp:Label runat="server" Text="Search" ID="lblSearch" meta:resourcekey="lblSearchResource1"></asp:Label>
            </strong></span>
        </td>
        <td>
            <asp:TextBox ID="txtSearch" runat="server" onkeyup="FilterItems(this.value)" meta:resourcekey="txtSearchResource1"></asp:TextBox><br />
        </td>
    </tr>
</table>
<table width="60%">
    <tr>
        <td>
        </td>
    </tr>
    <tr align="center">
        <td align="center">
            <!-- Start  list box-->
            <table width="100%">
                <tr>
                    <td valign="top">
                        <table border="0" width="100%">
                            <tr>
                                <td>
                                    <span style="font-size: 8pt"><strong>
                                        <asp:Label runat="server" ID="lblAvailable" Text="Available" meta:resourcekey="lblAvailableResource2"></asp:Label>
                                    </strong></span>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 200px">
                                    <asp:ListBox ID="lstAvailable" runat="server" Font-Size="8pt" Height="100%" SelectionMode="Multiple"
                                        Width="300px" meta:resourcekey="lstAvailableResource1"></asp:ListBox>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td align="center" valign="top">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnAddAll" runat="server" ImageUrl="~/Images/Last.png" CausesValidation="False" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnAdd" runat="server" ImageUrl="~/Images/Next.png" CausesValidation="False" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnRemove" runat="server" CausesValidation="False" ImageUrl="~/Images/Previous.png" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnRemoveAll" runat="server" CausesValidation="False" ImageUrl="~/Images/First.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <table width="100%">
                            <tr>
                                <td>
                                    <span style="font-size: 8pt"><strong>
                                        <asp:Label runat="server" ID="lblAdded" Text="Added" meta:resourcekey="lblAddedResource2"></asp:Label>
                                    </strong></span>
                                </td>
                            </tr>
                            <tr>
                                <td style="height: 200px">
                                    <asp:ListBox ID="lstAdded" runat="server" Font-Size="8pt" Height="100%" SelectionMode="Multiple"
                                        Width="300px" meta:resourcekey="lstAddedResource1"></asp:ListBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table width="100%">
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnMoveUp" runat="server" CausesValidation="False" ImageUrl="~/Images/MoveUp.png" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ImageButton ID="btnMoveDown" runat="server" CausesValidation="False" ImageUrl="~/Images/Movedown.png" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <!-- end  list box-->
        </td>
    </tr>
</table>

Now let’s, create a method for Moving the items between two ListBox. Here’s the code block below:

using System;
using System.Collections.Generic;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;

public partial class ucListBox : System.Web.UI.UserControl
{

    #region Property
    private IList _DataSourceAvailable = null;
    private IList _DataSourceAdded = null;
    private string _dataTextFieldAvailable = string.Empty;
    private string _dataValueFieldAvailable = string.Empty;
    private string _dataTextFieldAdded = string.Empty;
    private string _dataValueFieldAdded = string.Empty;
    private string _availableItemText = "Available Items";
    private string _addedItemText =  "Added Items";
    protected ArrayList arlList = new ArrayList();

    /// <summary>
    /// Gets or sets the available item text.
    /// </summary>
    /// <value>The available item text.</value>
    /// 
   
    public string AvailableItemText {
        get { return _availableItemText; }
        set { _availableItemText = value; }
    }

    /// <summary>
    /// Gets or sets the added items text.
    /// </summary>
    /// <value>The added items text.</value>
    public string AddedItemsText
    {
        get { return _addedItemText; }
        set { _addedItemText = value; }
    }

    /// <summary>
    /// Gets the available items.
    /// </summary>
    /// <value>The available items.</value>
    public ListItemCollection AvailableItems
    {
        get { return lstAvailable.Items; }
    }

    /// <summary>
    /// Gets the added items.
    /// </summary>
    /// <value>The added items.</value>
    public ListItemCollection AddedItems
    {
        get { return lstAdded.Items; }
    }

    /// <summary>
    /// Gets or sets the data source for the available items listbox.
    /// </summary>
    /// <value>The data source for available items.</value>
    public IList DataSourceAvailable
    {
        get { return _DataSourceAvailable; }
        set { _DataSourceAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data source for the added items listbox.
    /// </summary>
    /// <value>The data source for added items.</value>
    public IList DataSourceAdded
    {
        get { return _DataSourceAdded; }
        set { _DataSourceAdded = value; }
    }

    /// <summary>
    /// Gets or sets the data text field available.
    /// </summary>
    /// <value>The data text field available.</value>
    public string DataTextFieldAvailable
    {
        get { return _dataTextFieldAvailable; }
        set { _dataTextFieldAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data value field available.
    /// </summary>
    /// <value>The data value field available.</value>
    public string DataValueFieldAvailable
    {
        get { return _dataValueFieldAvailable; }
        set { _dataValueFieldAvailable = value; }
    }

    /// <summary>
    /// Gets or sets the data text field added.
    /// </summary>
    /// <value>The data text field added.</value>
    public string DataTextFieldAdded
    {
        get { return _dataTextFieldAdded; }
        set { _dataTextFieldAdded = value; }
    }

    /// <summary>
    /// Gets or sets the data value field added.
    /// </summary>
    /// <value>The data value field added.</value>
    public string DataValueFieldAdded
    {
        get { return _dataValueFieldAdded; }
        set { _dataValueFieldAdded = value; }
    }
    #endregion

    #region Method
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        Initializer();

    }
    public void Initializer()
    {
        btnAdd.Click += new ImageClickEventHandler(btnAdd_Click);
        btnAddAll.Click += new ImageClickEventHandler(btnAddAll_Click);
        btnRemove.Click += new ImageClickEventHandler(btnRemove_Click);
        btnRemoveAll.Click += new ImageClickEventHandler(btnRemoveAll_Click);
        btnMoveUp.Click += new ImageClickEventHandler(btnMoveUp_Click);
        btnMoveDown.Click += new ImageClickEventHandler(btnMoveDown_Click);
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;
    }



    public void BindAvailableList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Added List Control
        lstAvailable.DataSource = this.DataSourceAvailable;
        lstAvailable.DataTextField = this.DataTextFieldAvailable;
        lstAvailable.DataValueField = this.DataValueFieldAvailable;
        lstAvailable.DataBind();
    }
    public void BindAddedList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Available List Control
        lstAdded.DataSource = this.DataSourceAdded;
        lstAdded.DataTextField = this.DataTextFieldAdded;
        lstAdded.DataValueField = this.DataValueFieldAdded;
        lstAdded.DataBind();
    }

    public void BindList()
    {
        //Set the Header Text of the Available and Added Items
        lblAdded.Text = this.AddedItemsText;
        lblAvailable.Text = this.AvailableItemText;

        //Bind the Available and Added List Controls
        lstAdded.DataSource = this.DataSourceAdded;
        lstAdded.DataTextField = this.DataTextFieldAdded;
        lstAdded.DataValueField = this.DataValueFieldAdded;
        lstAdded.DataBind();

        lstAvailable.DataSource = this.DataSourceAvailable;
        lstAvailable.DataTextField = this.DataTextFieldAvailable;
        lstAvailable.DataValueField = this.DataValueFieldAvailable;
        lstAvailable.DataBind();


        #region Remove intersection Record
        ArrayList ary = new ArrayList();

        for (int i = 0; i < lstAvailable.Items.Count; i++)
        {
            for (int j = 0; j < lstAdded.Items.Count; j++)
            {

                if (lstAvailable.Items[i].Value == lstAdded.Items[j].Value)
                {
                    // lstAvailable.RemoveAt(i);
                    if (!ary.Contains(lstAvailable.Items[i]))
                    {
                        ary.Add(lstAvailable.Items[i]);
                        j = -1;
                    }
                    break;
                }

            }

        }
        for (int i = 0; i < ary.Count; i++)
        {
            lstAvailable.Items.Remove(((ListItem)ary[i]));

        }

        #endregion

        ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", "CacheItems();", true);
        //ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", "UploadFileToParent();", true);
    }

    #endregion

    #region Navigation

    /// <summary>
    /// Add all the selected items from the Available Items to the Added Items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnAdd_Click(object sender, EventArgs e)
    {
        if (lstAvailable.SelectedIndex >= 0)
        {
            for (int i = 0; i < lstAvailable.Items.Count; i++)
            {
                if (lstAvailable.Items[i].Selected)
                {
                    if (!arlList.Contains(lstAvailable.Items[i]))
                        arlList.Add(lstAvailable.Items[i]);
                }
            }
            for (int i = 0; i < arlList.Count; i++)
            {
                if (!lstAdded.Items.Contains((ListItem)arlList[i]))
                    lstAdded.Items.Add((ListItem)arlList[i]);
                lstAvailable.Items.Remove((ListItem)arlList[i]);
            }
        }
    }

    /// <summary>
    /// Add all the items from the Available items to the Added Items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnAddAll_Click(object sender, EventArgs e)
    {
        foreach (ListItem list in lstAvailable.Items)
        {
            lstAdded.Items.Add(list);
        }
        lstAvailable.Items.Clear();
    }

    /// <summary>
    /// Moves the Selected items from the Added items to the Available items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnRemove_Click(object sender, EventArgs e)
    {
        if (lstAdded.SelectedIndex >= 0)
        {
            for (int i = 0; i < lstAdded.Items.Count; i++)
            {
                if (lstAdded.Items[i].Selected)
                {
                    if (!arlList.Contains(lstAdded.Items[i]))
                        arlList.Add(lstAdded.Items[i]);
                }
            }
            for (int i = 0; i < arlList.Count; i++)
            {
                if (!lstAvailable.Items.Contains((ListItem)arlList[i]))
                    lstAvailable.Items.Add((ListItem)arlList[i]);
                lstAdded.Items.Remove((ListItem)arlList[i]);
            }
        }
    }

    /// <summary>
    /// Moves all the items from the Added items to the Available items
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
    protected void btnRemoveAll_Click(object sender, EventArgs e)
    {
        foreach (ListItem list in lstAdded.Items)
        {
            lstAvailable.Items.Add(list);
        }
        lstAdded.Items.Clear();
    }

    /// <summary>
    /// Move item to upwards
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void btnMoveDown_Click(object sender, ImageClickEventArgs e)
    {
        try
        {
            int startindex = lstAdded.Items.Count - 1;
            for (int i = startindex; i > -1; i--)
            {
                if (lstAdded.Items[i].Selected)//identify the selected item
                {
                    //swap with the lower item(move down)
                    if (i < startindex && !lstAdded.Items[i + 1].Selected)
                    {
                        ListItem bottom = lstAdded.Items[i];
                        lstAdded.Items.Remove(bottom);
                        lstAdded.Items.Insert(i + 1, bottom);
                        lstAdded.Items[i + 1].Selected = true;
                    }

                }
            }
        }
        catch (Exception ex)
        {

        }
    }

    /// <summary>
    /// Move Item To down Words
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void btnMoveUp_Click(object sender, ImageClickEventArgs e)
    {
        try
        {
            for (int i = 0; i < lstAdded.Items.Count; i++)
            {
                if (lstAdded.Items[i].Selected)//identify the selected item
                {
                    //swap with the top item(move up)
                    if (i > 0 && !lstAdded.Items[i - 1].Selected)
                    {
                        ListItem bottom = lstAdded.Items[i];
                        lstAdded.Items.Remove(bottom);
                        lstAdded.Items.Insert(i - 1, bottom);
                        lstAdded.Items[i - 1].Selected = true;
                    }
                }
            }

        }
        catch (Exception ex)
        {

        }
    }

    #endregion
}

Block or Disable Cut, Copy and Paste operation in ASP.Net

 

Technorati Tags: Block,Disable Cut,Copy,Paste operation in ASP.Net

Block or Disable Cut, Copy and Paste operation in ASP.Net TextBox Using jQuery

It is required to block the cut, copy and paste operations on some of the textbox in an ASP.Net. For example, it will be better if we do not allow users to copy paste the data entered in Email and Confirm Email field in order to make the user to type themselves.

The below jQuery code will help us to do the same using preventDefault() method.

<script src="_scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   
    <script type="text/javascript">
        $(function() {
        $("#<% =txtEmail.ClientID %>,#<% =txtConfirmEmail.ClientID%>").bind("cut copy paste", function(event) {
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <b>Email </b><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
        <b>Confirm Email </b><asp:TextBox ID="txtConfirmEmail" runat="server"></asp:TextBox>

 

Block Right Click in asp.net  

If you want to block right click copy code in master page.

<SCRIPT language=JavaScript>
<!--  -->
    var message = "function disabled";
    function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){     alert(message); return false; }
    if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {     alert(message);     return false; } }
    document.onmousedown = rtclickcheck;
</SCRIPT>

Filtering or Searching in Listbox Item Using JavaScript

Flickr Tags: Filtering or Searching in Listbox Item Using JavaScript,Filtering,Searching,Listbox Item,Using JavaScript

Normally you have a requirement that user want to search or filtering record in a list box according to what he write in textbox.So in my pervious posted Search ListBox items using JavaScript.I explained how to search in listbox but there is one restriction when user want to search, it will select only one record and user can not see the other records related to searching criteria.So in this post I explain how to implement this thing if you have that kind or requirement.

First you write JavaScript code on html page.

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

var ddlText, ddlValue, ddl, lblMesg;

function CacheItems() {

ddlText = new Array();
ddlValue = new Array();
ddl = document.getElementById("<%=ListBox1.ClientID %>");
lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
for (var i = 0; i < ddl.options.length; i++) {
ddlText[ddlText.length] = ddl.options[i].text;
ddlValue[ddlValue.length] = ddl.options[i].value;
}
}
window.onload = CacheItems;

function FilterItems(value) {
        ddl.options.length = 0;

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

            if (ddlText[i].toLowerCase().indexOf(value) != -1) {

                AddItem(ddlText[i], ddlValue[i]);

            }

        }

        lblMesg.innerHTML = ddl.options.length + " items found.";

        if (ddl.options.length == 0) {

            AddItem("No items found.", "");

        }

    }

    

    function AddItem(text, value) {

        var opt = document.createElement("option");

        opt.text = text;

        opt.value = value;

        ddl.options.add(opt);

    }
</script>

 

The above three JavaScript methods take care of the Filtering and Searching process. The significance of the these methods is described below

1. CacheItems

This method is called on the window onload event. The job of this method is to populate text and value arrays that will be used to cache the List box items.

2. FilterItems

This method is called when keyup event fires in the Search TextBox. This method searches for the string segment and filters the Listbox items.

3. AddItem

This method as the name suggests adds a new item to the Listbox

<body> 

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

<asp:TextBox ID="TextBox1" runat="server" onkeyup="FilterItems(this.value)"><br /> 

<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px"> 

<asp:ListItem>Vincent</asp:ListItem> 

<asp:ListItem>Jennifer</asp:ListItem> 

<asp:ListItem>Shynne</asp:ListItem> 

<asp:ListItem>Christian</asp:ListItem> 

<asp:ListItem>Helen</asp:ListItem> 

<asp:ListItem>Vladi</asp:ListItem> 

<asp:ListItem>Bee</asp:ListItem> 

<asp:ListItem>Jerome</asp:ListItem> 

<asp:ListItem>Vinz</asp:ListItem> 

<asp:ListItem>Churchill</asp:ListItem> 

<asp:ListItem>Rod</asp:ListItem> 

<asp:ListItem>Mark</asp:ListItem> 

</asp:ListBox> 
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</form> 

</body> 

</html> 

The JavaScript function basically searches the ListBox items and find the items based from the value of the TextBox that was entered. If a keyword exist from the list then it will 

automatically select the ListItems in the ListBox, but if the keyword does not exist then it will clear the ListBox selection.While the label will display the status message to the user

Search ListBox items using JavaScript

Technorati Tags: Search,ListBox,item,using,javascript

This example shows how to select ListItems in the ListBox based from the TextBox values using JavaScript.
Its only select the first letter in list box control .If you want to filtering check this Filtering Listbox control using Javascript.

Here’s the code block below.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Demo</title>
</head>
<script type="text/javascript" language="javascript">
function SearchList()
{
var l = document.getElementById('<%= ListBox1.ClientID %>');
var tb = document.getElementById('<%= TextBox1.ClientID %>');
if(tb.value == "")
{
ClearSelection(l);
}
else{
for (var i=0; i < l.options.length; i++)
{
if (l.options[i].text.toLowerCase().match(tb.value.toLowerCase()))
{
l.options[i].selected = true;
return false;
}
else
{
ClearSelection(l);
}
}
}
}
function ClearSelection(lb)
{
lb.selectedIndex = -1;
}
</script>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />
<asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">
<asp:ListItem>Vincent</asp:ListItem>
<asp:ListItem>Jennifer</asp:ListItem>
<asp:ListItem>Shynne</asp:ListItem>
<asp:ListItem>Christian</asp:ListItem>
<asp:ListItem>Helen</asp:ListItem>
<asp:ListItem>Vladi</asp:ListItem>
<asp:ListItem>Bee</asp:ListItem>
<asp:ListItem>Jerome</asp:ListItem>
<asp:ListItem>Vinz</asp:ListItem>
<asp:ListItem>Churchill</asp:ListItem>
<asp:ListItem>Rod</asp:ListItem>
<asp:ListItem>Mark</asp:ListItem>
</asp:ListBox>
</form>
</body>
</html>
The JavaScript function basically searches the ListBox items and find the items based from the value of the TextBox that was entered. If a keyword exist from the list then it will automatically select the ListItems in the ListBox, but if the keyword does not exist then it will clear the ListBox selection.
See the output below when you run it on the page