Implement Move Lists with >> > << <
-
I've been trying to figure out if it's possible to implement the model illustrated below:
LIST1 LIST2
|-----| |-----|
|AAA | >> |CCC |
|BBB | > | |
| | < | |
| | << | |
|-----| |-----|(apparently the PRE tag isn't working) We've all seen UIs like this that allow you to move selected or all from one state to the other then save or cancel those changes. I tried using ListBoxes fed by DataViews that filtered the rows so they'd appear in the correct listbox. The catch is that ListBoxes don't provide a means of getting BACK to the underlying data which is a huge requirement for me. I can't believe that I'm unique in this need. Can anyone point me to sample code or examples that do something like this? --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
-
I've been trying to figure out if it's possible to implement the model illustrated below:
LIST1 LIST2
|-----| |-----|
|AAA | >> |CCC |
|BBB | > | |
| | < | |
| | << | |
|-----| |-----|(apparently the PRE tag isn't working) We've all seen UIs like this that allow you to move selected or all from one state to the other then save or cancel those changes. I tried using ListBoxes fed by DataViews that filtered the rows so they'd appear in the correct listbox. The catch is that ListBoxes don't provide a means of getting BACK to the underlying data which is a huge requirement for me. I can't believe that I'm unique in this need. Can anyone point me to sample code or examples that do something like this? --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
I can't imagine anyone not being annoyed if you choose to do this server side. The web is full of client side examples to do this. Christian I have drunk the cool-aid and found it wan and bitter. - Chris Maunder
-
I can't imagine anyone not being annoyed if you choose to do this server side. The web is full of client side examples to do this. Christian I have drunk the cool-aid and found it wan and bitter. - Chris Maunder
I'm sure you didn't mean for you reply to be all commentary and no content. I've found plenty of examples of client-side code that allows me to move s from one to another. When I want to save those changes, I use a server side button to walk through each ListBox. The code-behind code doesn't know anything about the changes made to the listboxes on the client. Why the disconnect and what can I do about it? --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
-
I've been trying to figure out if it's possible to implement the model illustrated below:
LIST1 LIST2
|-----| |-----|
|AAA | >> |CCC |
|BBB | > | |
| | < | |
| | << | |
|-----| |-----|(apparently the PRE tag isn't working) We've all seen UIs like this that allow you to move selected or all from one state to the other then save or cancel those changes. I tried using ListBoxes fed by DataViews that filtered the rows so they'd appear in the correct listbox. The catch is that ListBoxes don't provide a means of getting BACK to the underlying data which is a huge requirement for me. I can't believe that I'm unique in this need. Can anyone point me to sample code or examples that do something like this? --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
You're not unique in this respect, and there are essentially two ways: using ASP.NET server controls and changing your collections on the server by posting back on each control click (which Christian doesn't like) or using client-side javascript (of which, as he mentioned, there are many). However, if you want the results of the changes to a dynamically generated listbox to show up on the server after postback, then you're in trouble right? The reason behind this is that ASP.NET controls contain two things when they "arrive" at the server: the original values that were stored in ViewState and the selected value or values. If you changed the collection of a listbox using JavaScript, you changed the values as they appear on the client, but you did nothing to the collection stored in ViewState; you also may have ended up with an item selected, but then it isn't the value you wanted, is it? So, the solution is that if you change the values of the lists dynamically, you have to store the new values in another place -- most likely a hidden field -- that you can collect when the values post back to the server. And perhaps CG should be a bit less caustic towards people. What a piece of work is man, how noble in reason, how infinite in faculties, in form and moving how express and admirable . . . and yet to me, what is this quintessence of dust? -- Hamlet, Act II, Scene ii.
-
You're not unique in this respect, and there are essentially two ways: using ASP.NET server controls and changing your collections on the server by posting back on each control click (which Christian doesn't like) or using client-side javascript (of which, as he mentioned, there are many). However, if you want the results of the changes to a dynamically generated listbox to show up on the server after postback, then you're in trouble right? The reason behind this is that ASP.NET controls contain two things when they "arrive" at the server: the original values that were stored in ViewState and the selected value or values. If you changed the collection of a listbox using JavaScript, you changed the values as they appear on the client, but you did nothing to the collection stored in ViewState; you also may have ended up with an item selected, but then it isn't the value you wanted, is it? So, the solution is that if you change the values of the lists dynamically, you have to store the new values in another place -- most likely a hidden field -- that you can collect when the values post back to the server. And perhaps CG should be a bit less caustic towards people. What a piece of work is man, how noble in reason, how infinite in faculties, in form and moving how express and admirable . . . and yet to me, what is this quintessence of dust? -- Hamlet, Act II, Scene ii.
John, Thank you. This is exactly what I've discovered from searching and testing on my own. I understand the need to store them in a hidden field but since I'm new to ASP.NET, I have no idea how to implement this. I'd appreciate any pointers or links that would help. As for CG, he does tend to talk down to people who know less than him. It's too bad because he could be quite helpful. --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
-
John, Thank you. This is exactly what I've discovered from searching and testing on my own. I understand the need to store them in a hidden field but since I'm new to ASP.NET, I have no idea how to implement this. I'd appreciate any pointers or links that would help. As for CG, he does tend to talk down to people who know less than him. It's too bad because he could be quite helpful. --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
It may be a bit of a dirty hack, but in you could use client script to force selection of all elements in both listboxes before posting back, then parse them from the post data. The following javascript snipit will perform the selection of all elements in the listboxes. Client Script Function:
function SelectForPostback(ctlFirstList, ctlSecondList) { ctlFirstList = document.forms[0].elements[ctlFirstList]; ctlSecondList = document.forms[0].elements[ctlSecondList]; for (idx = 0; idx < ctlFirstList.options.length; idx++) { ctlFirstList.options[idx].selected = true; } for (idx = 0; idx < ctlSecondList.options.length; idx++) { ctlSecondList.options[idx].selected = true; } }When scraping the post data, the value bound to the ListBox's DataValueField will be returned for all selected items in a comma delimited list. Since we used client script to select all items, we can split the list to grab the bound value into arrays. By checking the value held in each array, you can determine which list box each item was moved to. Code Behind:
protected ListBox lstFirst; protected ListBox lstSecond; protected Button btnSave; private void Page_Load(object sender, System.EventArgs ea) { // Add client side event handler. btn.Attributes.Add("onclick", "SelectForPostback('" + lstFirst.UniqueID + "','" + lstSecond.UniqueID + "');"); // ........................... \\ } private void btnSave_Click(object sender, System.EventArgs ea) { string[] firstIds = null; string[] secondIds = null; // Scrape all items from the first listbox. if (Request.Params[lstFirst.UniqueID] != null) { firstIds = Request.Params[lstFirst.UniqueID].Split(','); } // Scrape all items from the second listbox. if (Request.Params[lstSecond.UniqueID] != null) { firstIds = Request.Params[lstSecond.UniqueID].Split(','); } // The arrays now contain the bound values for each item in // the corresponding listbox. Use these to perform any updates // needed to the database. }Hope that was helpful. :) --Jesse
-
It may be a bit of a dirty hack, but in you could use client script to force selection of all elements in both listboxes before posting back, then parse them from the post data. The following javascript snipit will perform the selection of all elements in the listboxes. Client Script Function:
function SelectForPostback(ctlFirstList, ctlSecondList) { ctlFirstList = document.forms[0].elements[ctlFirstList]; ctlSecondList = document.forms[0].elements[ctlSecondList]; for (idx = 0; idx < ctlFirstList.options.length; idx++) { ctlFirstList.options[idx].selected = true; } for (idx = 0; idx < ctlSecondList.options.length; idx++) { ctlSecondList.options[idx].selected = true; } }When scraping the post data, the value bound to the ListBox's DataValueField will be returned for all selected items in a comma delimited list. Since we used client script to select all items, we can split the list to grab the bound value into arrays. By checking the value held in each array, you can determine which list box each item was moved to. Code Behind:
protected ListBox lstFirst; protected ListBox lstSecond; protected Button btnSave; private void Page_Load(object sender, System.EventArgs ea) { // Add client side event handler. btn.Attributes.Add("onclick", "SelectForPostback('" + lstFirst.UniqueID + "','" + lstSecond.UniqueID + "');"); // ........................... \\ } private void btnSave_Click(object sender, System.EventArgs ea) { string[] firstIds = null; string[] secondIds = null; // Scrape all items from the first listbox. if (Request.Params[lstFirst.UniqueID] != null) { firstIds = Request.Params[lstFirst.UniqueID].Split(','); } // Scrape all items from the second listbox. if (Request.Params[lstSecond.UniqueID] != null) { firstIds = Request.Params[lstSecond.UniqueID].Split(','); } // The arrays now contain the bound values for each item in // the corresponding listbox. Use these to perform any updates // needed to the database. }Hope that was helpful. :) --Jesse
-
Jesse, That's beautiful. I'll definitely have to check this out. I really appreciate this Jesse. -John --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
My pleasure, John. Best of luck to you. --Jesse
-
John, Thank you. This is exactly what I've discovered from searching and testing on my own. I understand the need to store them in a hidden field but since I'm new to ASP.NET, I have no idea how to implement this. I'd appreciate any pointers or links that would help. As for CG, he does tend to talk down to people who know less than him. It's too bad because he could be quite helpful. --- "This isn't right. This isn't even wrong." -Wolfgang Pauli (1900 - 1958), on a paper submitted by a physicist colleague
I'd try Jesse's solution -- that sounds quite likely to work. Let me know how that turns out. What a piece of work is man, how noble in reason, how infinite in faculties, in form and moving how express and admirable . . . and yet to me, what is this quintessence of dust? -- Hamlet, Act II, Scene ii.