Selection Grid

[Philip Senechal]

Not sure if this is even possible with RadGrid, but I thought I'd put it out there to see if this is something that it can do...

I'm trying to create a selection grid where each row would have a person's name in the first column, and then 5 columns representing categories. A person can be selected for more than one category, but a category can only have one person selected.

In trying to think this through, the first thought was that the entire grid would have to put into edit mode with in-place editing...that seems simple enough to figure out. The next thought was how to create a column where the selection in one row de-selects the other rows. Finally, I would need a button that would submit all the rows on the grid.

Do you think this is something that RadGrid can do or should I be looking for a different solution for this type of functionality?

Thanks =)

[Veli]

Hello Philip,

You can implement this scenario using template columns with related RadioButtons in each column. The radio buttons will be grouped by each column, so that each category can have a single person assigned, while a person can be assigned to one or more categories. The only problem with this scenario is the well known RadioButton in naming container problem. To overcome it, we need to use some javascript that will group the radio buttons manually.

To demonstrate this approach, I have attached a small test page. Note how I use 5 GridTemplateColumns with a RadioButton in each column's ItemTemplate. I have specified a separate GroupName for each RadioButton. That alone is supposed to group my radio buttons in each column in RadGrid. However, due to the ASP.NET control naming logic,  the name of the <input type="radio"> elements in one and the same group do not match. Thus, the radios are not grouped. To work around, I have attached some javascript to each radio button's onclick event that will group the radios based on their GroupName.


Veli
the Telerik team

[Philip Senechal]

Hi Veli,

Thank you for the wonderful solution...it works great!

I'm wondering if it would be possible to replace the Radio Buttons with the new RadButtons? Is this something that would be fairly easy to do. I would like to use images to represent my on/off state for the radio buttons. If you don't think this would work or if you think there is a better way to use images instead of radio buttons, can you let me know?

Much appreciated for the assistance!

[Veli]

Hello Philip,

Yes, you can easily swap RadioButton for a Radbutton control:

<telerik:RadButton ID="RadButton1" runat="server" ToggleType="Radio"
    ButtonType="ToggleButton" GroupName="Category1" AutoPostBack="false">
</telerik:RadButton>

The above code will render a RadButton control that is used just like an ordinary RadioButton control. But you can now style the button to your needs. Unfortunately, the issue with GroupName in different INamingContainer parents exists here too. To avoid, you need to use  RadButton's OnClientCheckedChanged event:

function radButtonCheckedChanged(sender, args)
{
    if (args.get_checked())
    {
        var group = sender.get_groupName();
        for (var i = 0, length = $telerik.radControls.length; i < length; i++)
        {
            var control = $telerik.radControls[i];
            if (control.constructor.getName() === "Telerik.Web.UI.RadButton")
            {
                if (control.get_groupName() === group && control !== sender)
                {
                    control.set_checked(false);
                }
            }
        }
    }
}

Attaching the same test page I send previously, this time modified to use RadButton in the first 2 columns.

Greetings,
Veli
the Telerik team

[Philip Senechal]

Have I mentioned how wonderful you guys are?

Your solution is ABSOLUTELY perfect! Can't thank you enough!