[C#/ASP.net]Toevoegen van CSS aan een RadioButtonList

[TeeDee]

Stel je onderstaande functie voor. (Her en der versimpeld, maar dit is de basis)

C#:

private void CreateRadioBars(RadioButtonList control)
{
    for(int i=0; i <5;i++)
    {
        ListItem RadButton = new ListItem("", i.ToString());
        if(i==0)
        {
            RadButton.Text = "FOUT";
        }
        if(i==4)
        {
            RadButton.Text = "GOED";
        }
        control.Items.Add(RadButton);
    }
}

In de uiteindelijke output moet FOUT links uitgelijnd moet worden, en GOED rechts.
Dit probeer ik in dezelfde functie(in bovenstaand voorbeeld eruit gehaald) te doen middels:

C#:

RadButton.Attributes.CssStyle.Add("text-align","left");

en verschillende varianten. Waaronder gewoon .Attributes.Add() e.d. Geen van allen werken.
De MSDN geeft bij mij het volgende aan.

code:

[C#]
public CssStyleCollection CssStyle {get;}

en bij Attributes.Add

code:

[C#]
public void Add(
   string key,
   string value
);

Weet iemand hoe ik een css-class aan het uiteindelijke label kan hangen? Ogenschijnlijk geeft alle documentatie een simpel oplossing in de vorm van Attribute.Add() alleen dit geeft zoals gezegd geen resultaat.

[Verwijderd]

Wat wil je precies alignen in je control.Links of recht van de radiobutton of iets anders.

0 GOED
0 FOUT

of

FOUT 0
0 GOED

Als je nl deze twee opties gebruikt (GOED FOUT) dan is in beide gevallen de tekst even breedt en zal je het verschil tussen links en recht aligned niet opmerken. Misschien moet je je radiobutten in een div plaatsen en die dan een vaste breedte geven ??

[TlighT]

In .NET Framework 1.x gaat dat niet gemakkelijk. Dit is namelijk de RenderItem() van de RadioButtonList in .NET Framework 1.1:

C#:

void IRepeatInfoUser.RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
{
      RadioButton button = new RadioButton();
      button._page = this.Page;
      button.GroupName = this.UniqueID;
      button.ID = this.ClientID + "_" + repeatIndex.ToString(NumberFormatInfo.InvariantInfo);
      button.Text = this.Items[repeatIndex].Text;
      button.Attributes["value"] = this.Items[repeatIndex].Value;
      button.Checked = this.Items[repeatIndex].Selected;
      button.TextAlign = this.TextAlign;
      button.AutoPostBack = this.AutoPostBack;
      button.TabIndex = this.radioButtonTabIndex;
      button.Enabled = this.Enabled;
      button.RenderControl(writer);
}

Een ListItem heeft wel een Attributes collectie, maar deze wordt niet meegenomen bij het renderen van de RadioButtonList - zoals je zelf al had opgemerkt. Deze onvolkomenheid is opgelost in .NET Framework 2. Zie ook dit knowledgebase artikel: http://support.microsoft....spx?scid=kb;en-us;Q309338.
Edit: of de workaround gebruiken die in het kb-artikel staat (To work around this problem in the RadioButtonList control, use a group of HtmlInputRadioButton controls).

Je kunt de RenderItem() van de RadioButtonList niet overriden, dus je kunt ook geen afgeleidde RadioButtonList maken waarin de Attributes wel worden gerenderd. Ook dit is, als ik het goed zie, opgelost in .NET Framework 2.

Er is dus geen gemakkelijke oplossing (voor zover ik weet). Je zou ipv een RadioButtonList een Repeater oid kunnen gebruiken, maar ik geloof dat er bij RadioButtons in een Repeater een bug was dat de radiobuttons niet goed gegroepeerd worden. Zie dit knowledgebase artikel: http://support.microsoft....spx?scid=kb;en-us;Q316495

Ik zou anders eens zoeken of er 3rd party controls zijn die deze problemen niet hebben.

[ Voor 9% gewijzigd door TlighT op 13-01-2006 14:20 ]

[Not Pingu]

Je kunt gewoon de TextAlign property van de Radiobutton setten of Left of Right, alnaargelang aan welke kant het label moet staan.

[TeeDee]

Verwijderd schreef op vrijdag 13 januari 2006 @ 14:11:
FOUT 0 0 0 0 GOED

Dit is de bedoeling.

TlighT schreef op vrijdag 13 januari 2006 @ 14:13:
...opgelost in .NET Framework 2.

Voor zover na kon gaan is dat inderdaad zo.
Ik gebruik 1.1. Uiteraard kan het wel in 2.0, alleen heb ik nog geen VS2005

Ik zou eens zoeken of er 3rd party controls zijn die deze problemen niet hebben.

Het is gelukkig geen levensbedreigend iets, dat ik daarvoor 3rd party controls nodig heb.

Gunp01nt schreef op vrijdag 13 januari 2006 @ 14:18:
Je kunt gewoon de TextAlign property van de Radiobutton setten of Left of Right, alnaargelang aan welke kant het label moet staan.

Een Radiobutton wel ja. Die kan je alleen niet in een RadioButtonList stoppen.

[mulder]

Gewoon losse Label-tjes gebruiken?

[TeeDee]

Don Facundo schreef op vrijdag 13 januari 2006 @ 14:38:
Gewoon losse Label-tjes gebruiken?

Ook een optie, maar dat is de easy way out Ik kwam het gewoon tegen, en heb geprobeerd dit op te lossen. Zonder resultaat, anders was ik hier niet

Het gaat trouwens ook om een stuk of 30 van dit soort dingen in 2 talen.

[ Voor 12% gewijzigd door TeeDee op 13-01-2006 14:45 ]

[Not Pingu]

TeeDee schreef op vrijdag 13 januari 2006 @ 14:44:
[...]

Ook een optie, maar dat is de easy way out Ik kwam het gewoon tegen, en heb geprobeerd dit op te lossen. Zonder resultaat, anders was ik hier niet

Het nadeel van jouw aanpak is dat de Goed en Fout opties een groter klikoppervlak hebben dan de tussenliggende opties. Dit kan ze in de ogen van de gebruiker meer gewicht geven. Als je losse labels gebruikt en Goed en Fout ernaast zet als schaalverdeling (want zo zijn ze bedoeld als ik het goed begrijp) hebben alle radiobuttons zelf hetzelfde 'gewicht'.

TeeDee schreef op vrijdag 13 januari 2006 @ 14:22:

Een Radiobutton wel ja. Die kan je alleen niet in een RadioButtonList stoppen.

Sorry, te snel gelezen.

[ Voor 17% gewijzigd door Not Pingu op 13-01-2006 14:54 ]

[TeeDee]

Gunp01nt schreef op vrijdag 13 januari 2006 @ 14:53:
[...]
Het nadeel van jouw aanpak is dat de Goed en Fout opties een groter klikoppervlak hebben dan de tussenliggende opties. Dit kan ze in de ogen van de gebruiker meer gewicht geven. Als je losse labels gebruikt en Goed en Fout ernaast zet als schaalverdeling (want zo zijn ze bedoeld als ik het goed begrijp) hebben alle radiobuttons zelf hetzelfde 'gewicht'.

Agreed, maar dat is meer een usability/interaction/design vraagstuk. Het is inderdaad een 'schaalverdeling'.

Sorry, te snel gelezen.

no problem, 't is vrijdag hè

Okay, goed. Ik ga het toch maar anders aanpakken. Het worden toch maar gewoon losse labeltjes. Ik wilde me er meer van verzekeren of het niet alsnog mogelijk was.

Zo, toch maar even 'een' oplossing plaatsen.

C#:

<%=GoodFormString() %>
<asp:radiobuttonlist
    id="rblButtonList"
    runat="server"
    repeatdirection="Horizontal"
    cssclass="radListing"
    repeatlayout=Flow>
</asp:radiobuttonlist>
<%=BadFormString()%>

En dit dan n keer. 'T is niet anders.

[ Voor 33% gewijzigd door TeeDee op 13-01-2006 15:27 ]