Filtering Radlistbox items with radio buttons

9 posts, 0 answers
  1. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2012 Link to this post

    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
  2. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 15 Nov 2012 Link to this post

    Is this not possible? 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 16 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 21 Nov 2012 Link to this post

    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?
  6. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 26 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 26 Nov 2012 Link to this post

    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
  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 29 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 30 Nov 2012 Link to this post

    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. 
  10. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 05 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017