Filtering Radlistbox items with radio buttons

[James]

Hi there I have a list box filled with a list of course names. If a course is assigned to you then it will have a green colour block before the name, if its not assigned to you it will appear with a red block before the name. I have three radio buttons one called "All", another called "Assigned", and the last one called "Not Assigned". Is it possible when selecting assigned that the green ones will just appear and when selecting not assigned only the red ones will appear? I've tried adding the radio button code into the page load but editing the lists like this removes the items forever for example when I click on assigned it removed the red items for the remainder of that session. What is the best way to do this?

Thanks, James

[James]

Is this not possible? 

[Nencho]

Hi James,

I have prepared a sample project for you, in order to demonstrate you one possible implementation of the desired functionality. To increase the speed, I used css selectors and alter them, when a certain conditions are met.
Please find the attached sample.


Kind regards,
Nencho
the Telerik team

[James]

Hi thanks for the reply. I add the images to the list box items via c# code like:
   foreach (string range in allRanges)
        {
            RadListBoxItem item = rangeList.FindItemByValue(range);
            item.ImageUrl = @"~/images/nonAssignedCatalog.png";
        }
I understand how the javascript is working taking in the radio button values, but I need an alternative way to using css to see what colour blocks each item has. Is it possible to do that?

[Nencho]

Hi James,

I have slightly modified the previously provided sample, in order to demonstrate you how to implement the functionality, base on the set ImageURL property. Please find the attached sample and let us know if it fits the requirements of your scenario.

All the best,
Nencho
the Telerik team

[James]

The green and red colours have been set already and will not be changed at all again after page load or on a post back. I have a table for courses a table for course groups which I am extracting data out of as well as four other tables which contain information on assigned courses and course groups to users and user groups. Also the radio buttons only need to go side by side not in a list. So I have a list with 5 assigned (green) and 5 unassigned (red) courses. When clicking assigned radio button I only want the 5 assigned (green) courses to appear. When selecting the unassigned radio button I only want the 5 unassigned (red) courses to appear and when selecting the both radio button the list will appear as normal again with 5 green and 5 red

[Nencho]

Hi James,

I am not quit sure, that I understood your further concerns about implementing the suggested approach. Could you elaborate a bit more on the matter? In addition, i can suggest you to use CheckBoxes instead of RadioButtons, since the main purpose of the usage of the RadioButtons is to achieve a single selection.

Hope this would help.

All the best,
Nencho
the Telerik team

[James]

A single selection is what I require so radio buttons need to be used, sorry if I have not made that clear in previous posts. I have a list filled with courses. All courses available in the database fill this list. They all appear with either a red colour block or a green colour block next to the name of course. Green is for courses assigned to the user and red is for courses not assigned to the user. I want three radio buttons called "All" (this will display both red and green items), "Assigned" (this will show the green items), and "Not Assigned" (this will show just red items). In the examples you have provided me with you have used CSS but I used the imageurl to choose the colour of the items in my c# page so using CSS in my situation will mean making a lot of changes which I don't have time to do. Even when setting postback to true for the radio buttons the radio buttons do not effect the radlistbox. I'm guessing that the radlistbox stuff is already loaded so the radio buttons will not affect the radlistbox. I've read around and have found out that I need to take in the results from the radio buttons in javascript and then with those values somehow call upon some code in my c# page to read in the values and change the radlistbox depending on the radio button clicked on. I'm still kinda new at this so if that I've said is not possible please let me know. 

[Nencho]

Hello James,

In the last provided sample, I have used the ImageUrl to access the items, regarding the selection of the RadioButtonList. Since you could not set the visibility of a certain item at server-side with the Visible property, I have demonstrated you how to achieve the same results with adding a "display:none" style at client-side. Please take a look at the last provided sample, where a JQuery is used to locate the RadListBoxItems with certain ImageUrl properties set.

Greetings,
Nencho
the Telerik team