Internet solutions team

Move selected item to the left hand side list box, move all items to the left hand side list box, move selected item to the right hand side list box, and move all items to the right hand list box.  Let’s   implement above features using JQuery.

ASP.NET Code

<div style=”float: left;”>

<asp:ListBox ID=”ListBox1″ runat=”server”

Height=”550px” SelectionMode=”Multiple”>

<asp:ListItem>One</asp:ListItem>

<asp:ListItem>Two</asp:ListItem>

<asp:ListItem>Three</asp:ListItem>

<asp:ListItem>Four</asp:ListItem>

<asp:ListItem>Five</asp:ListItem>

<asp:ListItem>Six</asp:ListItem>

<asp:ListItem>Seven</asp:ListItem>

<asp:ListItem>Eight</asp:ListItem>

<asp:ListItem>Nine</asp:ListItem>

<asp:ListItem>Ten</asp:ListItem>

</asp:ListBox>

</div>

<!– buttons –>

<div style=”float: left; width: 100px; height: 550px; text-align: center; vertical-align: text-bottom;”>

<br />

<br />

<a id=”btnRightAll”>Move all ></a>

<br />

<br />

<a id=”btnRight”>Right >></a>

<br />

<br />

<a id=”btnLeft”><< Leftt</a>

<br />

<br />

<a id=”btnLeftAll”>< Move all</a>

<br />

<br />

<asp:Button ID=”btnDone” runat=”server” Text=”Done” />

</div>

<div style=”float: left;”>

<asp:ListBox ID=”ListBox2″ runat=”server”

Height=”550px” SelectionMode=”Multiple”></asp:ListBox>

</div>

JQUERY Code

<script type=”text/javascript”>

$(document).ready(function() {
//move selected item to the right
$(“#btnRight”).click(function() {
$(“#<%=ListBox1.ClientID%> > :0ption[selected]“).appendTo($(“#<%=ListBox2.ClientID%>”));
});

//move all items to the right
$(“#btnRightAll”).click(function() {
$(“#<%=ListBox1.ClientID%> > :0ption”).appendTo($(“#<%=ListBox2.ClientID%>”));
});

// move selected item to the left
$(“#btnLeft”).click(function() {
$(“#<%=ListBox2.ClientID%> > :0ption[selected]“).appendTo($(“#<%=ListBox1.ClientID%>”));
});

// move all items to left list
$(“#btnLeftAll”).click(function() {
$(“#<%=ListBox2.ClientID%> > :0ption”).appendTo($(“#<%=ListBox1.ClientID%>”));
});
});

</script>

Note:

In javascript replace first letter of “:0ption”
with English letter “o” I am using 0 (zero) as it was putting smiley while i was using English letter o.

Highlight asp.net text box when it gets focus. When your cursor will focus on text box it will be surrounded by a red rectangle when cursor leaves text it becomes normal. If coursor goes to  button or dropdown list they dont get any style the behave as normal. This code is ony tested in IE7. Do not forget to reference Jquery script in your document. you can get jquery script file from jquery.com

CSS Style

<style type=”text/css”>

        .required

        {

            border: solid 1px #ff0000;

            padding: 1px 1px 1px 1px;

        }

</style>

ASP.net Controls

    <div>

      <asp:Label ID=”Label1″ runat=”server”>First Name</asp:Label>

            <asp:TextBox ID=”txtFirstName” unat=”server”></asp:TextBox>

            <asp:Label ID=”Label2″ runat=”server”>Last Name</asp:Label>

            <asp:TextBox ID=”txtLastName” runat=”server”></asp:TextBox>

        </div>

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

        <asp:DropDownList ID=”DropDownList1″ runat=”server”>

        <asp:ListItem >1</asp:ListItem>

        <asp:ListItem >1</asp:ListItem>

        <asp:ListItem >1</asp:ListItem>

        </asp:DropDownList>

Jquery Code

$(document).ready(function () {

        $(“:text”).focus(function (){

                $(this).addClass(“required”);

            });

               $(“:text”).blur(function () {

                $(this).removeClass(“required”);

               });

            });

OR

$(document).ready(function () {

        $(“input[type=text]“).focus(function (){

                $(this).addClass(“required”);

            });

            $(“input[type=text]“).blur(function () {

                $(this).removeClass(“required”);

               });

  });

Following Code give error in IE 7 I haven’t tested in any other browser.  Can any one tell me please why following code is giving error though this code is available on Internet:  $(“input[@type=text]“).

$(document).ready(function () {

        $(“input[@type=text]“).focus(function (){

                $(this).addClass(“required”);

            });

            $(“input[@type=text]“).blur(function () {

                $(this).removeClass(“required”);

               });       

 });