How to add CSS class to input tags?

JerryACSA · Post by **JerryACSA** » Tue Mar 08, 2022 7:31 am

(v2022)
I am trying to add a CSS class to some input tags so I can refer to them using JavaScript. The existing class is also used on other fields that I don't want to refer to and the existing IDs include numbers on Grid pages, which prevent referring to all the fields in a column using the ID. The documentation says under Field Setup, Edit Tag:

Custom attributes: Other custom attributes for the tag. For example, you can enter: (with quotes)
"onmouseover='my_js_function();'"
or Dictionary<string, string> or anonymous type (values must be strings), e.g.
new { onmouseover = "my_js_function();" }
....
Sometimes the generated code already uses some attributes (e.g. onchange event, class attribute, style attribute), if you add the same attribute/event using the string format, there will be more than one event/attributes of the same name and it will be ignored by browsers. But if you add the same attribute using the Dictionary format, the attributes will be concatenated together. Therefore, the dictionary or anonymous type format is recommended over the string format.

I tried the following in the Edit Tag, Radio, INPUT Tag:
Custom attributes: "class=NewOrExisting"
Custom attributes: "class=\"NewOrExisting\""
Both of the above add a duplicate class attribute to the input tag and it is ignored by the browser as the documentation says.

Custom attributes: new { class="NewOrExisting" }
This causes many C# compile errors because class is a reserved word in C#.

Custom attributes: new { "class"="NewOrExisting" }
This causes C# compile errors because the anonymous type member must have a valid C# name, not a string.
error CS0746: Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access.
error CS0131: The left-hand side of an assignment must be a variable, property or indexer

Custom attributes: new { Class="NewOrExisting" }
This compiles but it adds a duplicate class attribute just like the string format so it is ignored.

Custom attributes: CSSclass("NewOrExisting")
Server Events - Global Code:

public static Dictionary<string,string> CSSclass(string c) {
    Dictionary<string,string> d=new Dictionary<string,string>(1);
    d.Add("class",c);
    return d;
}

I didn't see an example of how to use the Dictionary<string, string> format. This compiles and it looks like it should work but it didn't seem to do anything. There were no attributes added to the HTML tag. Any idea how to do it?

MichaelG · Post by **MichaelG** » Wed Mar 09, 2022 7:46 am

You can use the Row_Rendered server event to add the class names. For example:

Field.CssClass = "my-class";

JerryACSA · Post by **JerryACSA** » Thu Mar 10, 2022 1:52 am

Thanks Michael, but that adds a duplicate class attribute to the HTML tag so it's ignored like some of the other things I tried:

public void Row_Rendered() {
    NewOrExisting.CssClass="NewOrExisting";
}

MichaelG · Post by **MichaelG** » Thu Mar 10, 2022 6:58 am

It seemed that the input class for radio are built in. You can only change it by Client Start up scripts. For example:

$('input:radio[data-field="x_NewOrExisting"]').addClass("my-class");

JerryACSA · Post by **JerryACSA** » Fri Mar 11, 2022 12:42 am

Thank you! That worked for me, and the selector using data-field works even if rows are added to the grid so I think I'll use that by itself.