ListBox in GridView : Need help in javascript

Question

4.00/5 (1 vote)

See more:

, +

I have a gridview which has a column of asp:ListBox for 'Current Items' and another column with asp:ListBox for 'available items'. I need to move items from 'available items' to 'current items' through javascript. Please help me on how can I do that.
Here is my attempt to do it. I am not getting the correct id of respective listboxes. So it's not working.

HTML

<asp:GridView ID="GridView1" EnableViewState="true" runat="server">
    <columns>
        <asp:TemplateField HeaderText="Current Items">
            <itemtemplate>
                <asp:ListBox ID="ListBox_CurItems" DataTextField="curemp" DataValueField="curemp"
                    runat="server" SelectionMode="Multiple">
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Remove Items">
            <itemtemplate>
                <input  önclick="Javascript:MoveItem('need id of ListBox_CurItems. how to get it?', 'need id of ListBox_Available_Items');"
                    type="button" value="->" />
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Add Items">
            <itemtemplate>
                <input  önclick="Javascript:MoveItem( 'need id of ListBox_Available_Items how to get it?' , 'need id of ListBox_CurItems' )" type="button" value="<-" />
            </itemtemplate>
        
        <asp:TemplateField HeaderText="Employee To Add">
            <itemtemplate>
                <asp:ListBox ID="ListBox_Available_Items" DataTextField="emp" DataValueField="emp"
                    DataSource='<%# PopulateControls() %>' runat="server">
            </itemtemplate>
        
    </columns>

JavaScript

<script type="text/javascript">
        function MoveItem(ctrlSource, ctrlTarget) {
          
            var Source = document.childNodes.item.getElementById(ctrlSource);
         
            var Target = document.getElementById(ctrlTarget);
          
            if ((Source != null) && (Target != null)) {
                alert('inside if loop');
                while (Source.options.selectedIndex >= 0) {
                    var newOption = new Option(); // Create a new instance of ListItem
                    newOption.text = Source.options[Source.options.selectedIndex].text;
                    newOption.value = Source.options[Source.options.selectedIndex].value;
                    alert(newOption.value);
                    Target.options[Target.length] = newOption; //Append the item in Target
                    Source.remove(Source.options.selectedIndex);  //Remove the item from Source
                }
            }
        }
</script>

Thanks a lot in advance

Posted 31-Mar-11 16:39pm

Jais Joy

Updated 31-Mar-11 16:53pm

Venkatesh Mookkan

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jais Joy · Answer 1 · 2011-04-01T20:55:00

Thanks a lot.

I tried and I got id when I clicked on listbox.

Sorry for my poor knowledge. I need to ask again.

Actually I need to get id of listbox in the same row when clicked on input button which is another column. Basically I need to get it onclick of below item ( refer the code I mentioned earlier ).

<asp:TemplateField HeaderText="Add Items">            
  <itemtemplate>                
    <input  onclick="Javascript:MoveItem( 'need id of ListBox_Available_Items how to get it?' , 'need id of ListBox_CurItems' )" type="button" value="<-" />            
 </itemtemplate>

Basically get the id of a list box ( which exist in specific column of the row ) on click of a button ( which exist in another column of same row ).

Hope I am clear enough

Tamer Abdelaziz · Answer 2 · 2011-04-05T05:34:00

If what you mean is to get the client side id of a listbox in a gridview row by clicking a button in the same gridview row , here is the solution :

I think your problem can be solved in 2 ways :

Using jQuery , looking at the sample grid view below :

<code>
    <asp:gridview id="gvSample" enableviewstate="true" runat="server" xmlns:asp="#unknown">
    <columns>
    <asp:templatefield headertext="Current Items">
    <itemtemplate>
    <asp:listbox id="ListBox_CurItems" datatextfield="curemp" datavaluefield="curemp" runat="server" selectionmode="Multiple">
    </asp:listbox>
    </itemtemplate>
    </asp:templatefield>
    <asp:templatefield>
    <itemtemplate>
    <asp:button runat="server" id="btnGetListId" text="Get List Id">
OnClientClick="return getListId(this.id);"/>
    </asp:button></itemtemplate>
    </asp:templatefield>
    </columns>
    </asp:gridview>
</code>

we have a grid view gvSample , with 2 template fields, one contains a ListBox ListBox_CurItems control and the other contains a Button control btnGetListId ,, at the OnClientClick event of btnGetListId a javascript method getListId(senderId) is invoked to get the id of the ListBox in the same row as the sender button is. Here is the code of getListId(senderId) method,After referring to the jqeury.js file:

<code>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function getListId(senderId) {
var curListBox=jQuery('#' + senderId).parent().parent().find('select[id $= ListBox_CurItems]').attr('id');
alert(curListBox);
            return false;
        }
    </script>
</code>

How It Works : when invoking the javascript method getListId(senderId), by clicking any of the buttons in the gridview gvSample the button passes its id to method, and using this id you can utilize jQuery to get the current ListBox id, by getting btnGetListId and ListBox_CurItems shared parent which is the gridview row, which is the direct parent of the table cell containing btnGetListId so we used this jQuery syntax to get the shared parent :

<code>
jQuery('#' + senderId).parent().parent()....
</code>

after getting the shared parent, i used the jQuery .find(selector) method to get the ListBox by its Id :

<code>
jQuery('#' + senderId).parent().parent().find('select[id $= ListBox_CurItems]')....
</code>

now we got the ListBox of the same row as the sender button, you can call the jQuery .attr(attribute) method to get the ListBox Id:

<code>
jQuery('#' + senderId).parent().parent().find('select[id $= ListBox_CurItems]').attr('id');
</code>

and now we are done ;) ,,, here is the full example code :

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        function getListId(senderId) {
            alert(jQuery('#' + senderId).parent().parent().find('select[id $= ListBox_CurItems]').attr('id'));
            return false;
        }
    </script>

<body>
    <form id="form1" runat="server">
    <div>
    <asp:gridview id="gvSample" enableviewstate="true" runat="server" autogeneratecolumns="false" xmlns:asp="#unknown">
    <columns>
        <asp:templatefield headertext="Current Items">
            <itemtemplate>
                <asp:listbox id="ListBox_CurItems" datatextfield="curemp" datavaluefield="curemp" runat="server" selectionmode="Multiple">
                </asp:listbox>
            </itemtemplate>
        </asp:templatefield>
<asp:templatefield>
<itemtemplate>
<asp:button runat="server" id="btnGetListId" text="Get List Id" onclientclick="return getListId(this.id);" />
</itemtemplate>
</asp:templatefield>
    </columns>
    </asp:gridview>
</div></form></body>

By using server side C# code with the help of client side javascript code, considering the sample grid view below :

    <asp:gridview id="gvSample" enableviewstate="true" runat="server" xmlns:asp="#unknown">
            AutoGenerateColumns="false" onrowdatabound="gvSample_RowDataBound">
    <columns>
        <asp:templatefield headertext="Current Items">
            <itemtemplate>
                <asp:listbox id="ListBox_CurItems" datatextfield="curemp" datavaluefield="curemp" runat="server" selectionmode="Multiple">
                </asp:listbox>
            </itemtemplate>
        </asp:templatefield>
<asp:templatefield>
<itemtemplate>
<asp:button runat="server" id="btnGetListId" text="Get List Id" onclientclick="return getListId(this.attributes.getNamedItem('currentListBoxId').value);" />
</itemtemplate>
</asp:templatefield>
    </columns>
    </asp:gridview>

it is the same as the grid view in the first example but with modifying the argument passed to the javascript method getListId(senderId) to be getListId(currentListBoxId), that is we will path the current ListBox id instead of passing the current Button Id, Then follow the next steps to implement that trick:

Within the RowDataBound event of the gridview in the code behind, the .cs file, add this code :

if (e.Row.RowType == DataControlRowType.DataRow)
{
    ListBox currentListBox = (ListBox)e.Row.FindControl("ListBox_CurItems");
    Button currentButton = (Button)e.Row.FindControl("btnGetListId");
    string currentListBoxId = currentListBox.ClientID;
    currentButton.Attributes.Add("currentListBoxId", currentListBoxId);
}

Modify the javascript method getListId(currentListBoxId) to be like that:

function getListId(currentListBoxId) {
    alert(currentListBoxId);
}

How It Works: In the RowDataBound event of the grid view, i simply created references to each ListBox ,ListBox_CurItems, and Button ,btnGetListId, in each data row,,

ListBox currentListBox = (ListBox)e.Row.FindControl("ListBox_CurItems");
Button currentButton = (Button)e.Row.FindControl("btnGetListId");

then i got the ClientID of each ListBox ,ListBox_CurItems and added its value as an attribute of its corresponding Button ,btnGetListId,,

string currentListBoxId = currentListBox.ClientID;
currentButton.Attributes.Add("currentListBoxId", currentListBoxId);

then each Button ,btnGetListId, has an attribute [currentListBoxId] equal to the value of the CLientID of its corresponding ListBox,, and then ,very simply, using javascript you can pass the newly added attribut of the Button ,btnGetListId, to the javascript method getListId(currentListBoxId) :

getListId(this.attributes.getNamedItem('currentListBoxId').value);

and now we are done ;), here is the full example code :

//C#

protected void gvSample_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ListBox currentListBox = (ListBox)e.Row.FindControl("ListBox_CurItems");
        Button currentButton = (Button)e.Row.FindControl("btnGetListId");
        string currentListBoxId = currentListBox.ClientID;
        currentButton.Attributes.Add("currentListBoxId", currentListBoxId);
    }
}

//Javascript

    <script type="text/javascript">
        function getListId(currentListBoxId) {
            alert(currentListBoxId);
        }
    </script>

    <asp:gridview id="gvSample" enableviewstate="true" runat="server" xmlns:asp="#unknown">
            AutoGenerateColumns="false" onrowdatabound="gvSample_RowDataBound">
    <columns>
        <asp:templatefield headertext="Current Items">
            <itemtemplate>
                <asp:listbox id="ListBox_CurItems" datatextfield="curemp" datavaluefield="curemp" runat="server" selectionmode="Multiple">
                </asp:listbox>
            </itemtemplate>
        </asp:templatefield>
<asp:templatefield>
<itemtemplate>
<asp:button runat="server" id="btnGetListId" text="Get List Id" onclientclick="return getListId(this.attributes.getNamedItem('currentListBoxId').value);" />
</itemtemplate>
</asp:templatefield>
    </columns>
    </asp:gridview>

I hope it can help you :)

deepak_rai · Answer 3 · 2011-03-31T19:10:00

Here is the way to get the client ID of server control:

XML

<asp:GridView ID="GridView1" EnableViewState="true" runat="server">
    <columns>
        <asp:TemplateField HeaderText="Current Items">
            <itemtemplate>
                <asp:ListBox ID="ListBox_CurItems" onclick="alert(this.id);" DataTextField="curemp" DataValueField="curemp"
                    runat="server" SelectionMode="Multiple">
            </itemtemplate>

If you see the above code I have added

onclick="alert(this.id);"

If you click on the control this will return the ID of current control.
Now you can use this ID in your function.
:)

ListBox in GridView : Need help in javascript

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0