Member Avatar for cumadhu

Hi All,
I have specific requirement in asp.net project.
I have datagrid, in that in have one dotnet list control which stores the items.And it is multiselect. Onclicking >> button i want to move selected items from dotnetListControl to HTML Select(listbox) control.
In DataGrid:
DotnetListBOX Control(i multiselect few items then)---> >>(Click on the button) ----> add to new listbox(Html Select)

I tried with ItemDataBound but still i could not able to get it.
(Problem: When Datagrid is rendered, i am not able to get unique id for HTML select control).

Kindly let me know if any other good idea ...

Thanks and with regards,

Madhusudhan

  • 2 Contributors
  • 4 Replies
  • 184 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by akadez

Dani AI

Generated

Short summary: wants to move selected items from a ListBox inside a DataGrid row to a sibling HTML select without a full-page refresh. 's server-side loop will work but forces postbacks; the client-side direction is the right choice. Rather than trying to regex against generated IDs, use the control's rendered ClientID (emitted from server code) or locate the two selects relative to the clicked button in the DOM — both are far more robust.

If both list controls are server controls (add runat="server"), set the button's client onclick in ItemDataBound so the script gets exact client IDs. Example (VB in ItemDataBound):

Protected Sub DataGrid1_ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
    If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim lbFrom As ListBox = CType(e.Item.FindControl("ListBox1"), ListBox)
        Dim lbTo As ListBox = CType(e.Item.FindControl("ListBox2"), ListBox)
        Dim btnMove As ImageButton = CType(e.Item.FindControl("btnMove"), ImageButton)
        If lbFrom IsNot Nothing AndAlso lbTo IsNot Nothing AndAlso btnMove IsNot Nothing Then
            btnMove.Attributes("onclick") = String.Format("return moveOptions('{0}','{1}');", lbFrom.ClientID, lbTo.ClientID)
        End If
    End If
End Sub

Client-side mover (use a reverse loop when removing options to avoid index shifts):

function moveOptions(fromId, toId) {
  var src = document.getElementById(fromId), dst = document.getElementById(toId);
  for (var i = src.options.length - 1; i >= 0; i--) {
    if (src.options[i].selected) {
      dst.add(new Option(src.options[i].text, src.options[i].value));
      src.remove(i);
    }
  }
  return false;
}

If the HTML select is not a server control, avoid relying on naming conventions: attach an onclick that passes this and have a small helper find the nearest row and its selects (DOM traversal). Use browser dev tools to inspect rendered IDs, escape quotes when emitting inline script, and persist final state only when the user saves (hidden field or AJAX) to avoid unnecessary postbacks.

Member Avatar for akadez

Not sure if this is what you are attempting to do.

Scenerio

Datagrid has a 2 listbox controls. When clicking >> button, click event should move selected items from listbox1 to listbox2

Solution

'Code within >> button click event
For Each gridItem As DataGridItem In DataGrid1.Items
     Dim list1 As ListBox = CType(gridItem.FindControl("List1"), ListBox)
     Dim list2 As ListBox = CType(gridItem.FindControl("List2"), ListBox)

     For Each item As ListItem In list1.Items
          If item.Selected Then
               list2.Items.Add(item)
          End If
     Next
Next
Member Avatar for cumadhu

Even >> button is in the same grid.
If there are 5 rows in a grid, then
listbox1 >> buttons Listbox2
listbox1 >> buttons Listbox2
listbox1 >> buttons Listbox2
listbox1 >> buttons Listbox2
listbox1 >> buttons Listbox2
will appear.The IDs for all these control after rendering is different like dgGrid_ctl2:listbox1
dgGrid_ctl3:listbox1 etc ...
Similarly for >> button and listbox 2.

Still i could not able to fix this error.
Kindly provide some more details.

Thanks and with regards,
Madhusudhan

Member Avatar for cumadhu

I mean to say:
I dont want to refresh page everytime i click the image button.
I need to add this from server.
Like writeing javascript in class file.

Thanks

Member Avatar for akadez 
<!-- Code in ASPX DataGrid -->
<ItemTemplate>				
    <input type="button" value="Move" onclick="javascript:SwapList('<%# (Container.ItemIndex + 1) %>');">
</ItemTemplate>
//Javascript Code: 
//function should take an input of the current index
function SwapLists(idx) {

    var inpt = document.frmProdDetail.getElementsByTagName("input");
    var list1, list2;
	
    for (var i = 0; i < inpt.length; i++)
    {
	
        if (inpt[i].id.match('ctl' + idx + '_MyAspxListBox1') != null) {
            list1 = inpt[i];                 
        } else if (inpt[i].id.match('ctl' + idx + '_MyAspxListBox2') != null) {
            list2 = inpt[i];
        }
    }

    //Write your javascript to transfer selected items from list1 to list2
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.