Move items between listboxes

[amandab116]

I'm having a hard time figuring out how to move items between a left and right listbox server-side.

I have a populated listbox from the database on the left and I'm trying to add items to the box on the right and save those values to the database.

Can anyone help me? I've searched everywhere and haven't found any code that's helpful!

protected void Submit_Click(object sender, EventArgs e)
    {
        //foreach (ListItem item in SecondList.Items)
        // {
        //   string sql1 = "INSERT into sch_relations_ref VALUES (@relation_id, @resource_id)";
        //   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["BayNetConnectionString"].ConnectionString);
        //  SqlCommand command = new SqlCommand(sql1, con);
        //  SqlParameter relation_id = new SqlParameter("@relation_id", SqlDbType.Int);
        //  command.Parameters.Add(@relation_id);
        //  SqlParameter resource_id = new SqlParameter("@resource_id", item.Value);
        //  command.Parameters.Add(@resource_id);
        //  con.Open();
        //  command.ExecuteNonQuery();
        //  con.Close();
 
        //string value1 = hid_Items.Value;
        //Response.Write(value1);
        // }
    }

I've tried doing something like this, but when I hit the submit button, it never saves the list. I'm so lost.

Also, here's the javascript... I'm trying to see if there's a way to do it without JS maybe with Ajax, but I'm a beginner with Ajax.

// Begin -->
    function move(fbox, tbox)
    {
        var arrFbox = new Array();
        var arrTbox = new Array();
        var arrLookup = new Array();
        var i;
        for (i = 0; i < tbox.options.length; i++) 
        {
            arrLookup[tbox.options[i].text] = tbox.options[i].value;
            arrTbox[i] = tbox.options[i].text;
        }
        var fLength = 0;
        var tLength = arrTbox.length;
        for (i = 0; i < fbox.options.length; i++)
         {
             arrLookup[fbox.options[i].text] = fbox.options[i].value;
             if (fbox.options[i].selected && fbox.options[i].value != "")
              {
                  arrTbox[tLength] = fbox.options[i].text; tLength++;
              }
              else 
              {
                  arrFbox[fLength] = fbox.options[i].text; fLength++;
              }
          }
          arrFbox.sort();
          arrTbox.sort();
          fbox.length = 0;
          tbox.length = 0;
          var c;
          for (c = 0; c < arrFbox.length; c++)
           {
               var no = new Option();
               no.value = arrLookup[arrFbox[c]];
               no.text = arrFbox[c];
               fbox[c] = no;
           }
           for (c = 0; c < arrTbox.length; c++)
            {
                var no = new Option();
                no.value = arrLookup[arrTbox[c]];
                no.text = arrTbox[c];
                tbox[c] = no;
            }
        }
        function selectAll(box) 
        {
            for (var i = 0; i < box.length; i++)
             {
                 box[i].selected = true;
             }
         }
         // End -->

[cloud255]

Hi,

I suggest you look into using List rather than an array.
The list is a dynamic data structure which exposes the Add() and Remove() methods.

You can thus loop through your list and populate list 1 (left list)
when the user moves an item to list 2, you remove from your one list at the selected index of the item (or better use objects and pass a unique value to remove) and add that item to the other list.

Then re-bind the controls with the new lists.

[amandab116]

Is there any way you can provide an example? I was just thinking about this whole situation and I'm still stuck on the most logical way to deal with it. I've implemented hidden fields, but then I can't really save multiple values to the database.

Thanks!

[cloud255]

Hi

Create a class or struct to hold your data. Next create 2 lists of that data type:

 List<MyDataObject> collection1, collection2;

you can now bind the list as the data source for the listbox.

you can then call the add() function of the second collection to add a selected item:

collection2.Add(DataObject);

and the remove object to remove the selected item from the original list:

collection1.Remove(SelectedItem);

Now simply refresh the listboxes.

[amandab116]

Thank you very much!!

[cloud255]

@amandab116
Always a pleasure to help.