Hi,
I wanted to use custom style class for dhtmlxForm item, My use case is, we have a custom style for disabled / readonly items, which is available as different style class, I wanted to append this custom style class to those elements (textinput, select etc) which are disabled.
Please let me know how to add / append custom style class names to each form items.
Thanks
Gireesh
Hi
At first read this article about templates:
docs.dhtmlx.com/doku.php?id=dhtm … m_template
If you will need some more info - write here.
Hi,
I have seen this template type earlier, but this is a complete customization, My application uses a dynamic form generated based on some metadata from database, so if the user make a change in DB settings same will get reflected in the Form in UI, so it will be difficult for me to customize each item using a ‘template’ type and corresponding method. Also my requirement is ONLY to add a custom style class, I do not have any intention to change the complete item,
eg,
{type:“input”, name: ‘name’, label:‘Login’}
I just wanted to append a style class to this element when rendered in HTML. I tried ‘className’ attribute here, but it didn’t work.
Thanks
Gireesh
In general, input has such attribute, and it should work.
docs.dhtmlx.com/doku.php?id=dhtm … form_input
An example of a code and result look below:
.dhxform_obj_dhx_terrace .greenLab div.dhxform_label { color: #006400 !important }
function doOnLoad() {
dhtmlx.skin = "dhx_terrace";
formData = [{
type: "settings",
position: "label-left",
labelWidth: 130,
inputWidth: 120
}, {
type: "fieldset",
label: "Welcome",
inputWidth: "auto",
list: [{
type: "input",
readonly: "1",
label: "Login",
value: "p_rossi",
name: "readon"
}, {
type: "password",
label: "Password",
className: "greenLab",
value: "123"
}, {
type: "checkbox",
label: "Remember me",
checked: true
}]
}, {
type: "button",
value: "Proceed"
}];
myForm = new dhtmlXForm("myForm1", formData);
}
Hi,
Thank you very much it worked, is it possible to apply generic and dynamic style, eg, I wanted to make the element border in red color if the validation failed. It can be applied to any element like input, select, checkbox, textarea etc. and should get applied conditionally at run-time. Validation could be fired on “blur” or “form submit”, which should mark all invalid input elements in red thin border.
Is that possible ?
Thanks
Gireesh
Is it possible to get the “input” DOM element, some thing like ,form.getItem("") or form.getElement(""), some method like this which can give me the DOM element so that I can apply a different style after the validation.
Thanks
Gireesh
Hi
Here is a sample about your question:
dhtmlx.com/docs/products/dht … ation.html
It is available since version 3.5
Hi
here is a demo you may be insterested in:
dhtmlx.com/docs/products/dht … vents.html
different colors for validate
just fix css a bit:
.validate_magenta .dhxform_label,
.validate_magenta .dhxform_select {
color: magenta !important;
}
.validate_orange .dhxform_label,
.validate_orange .dhxform_select {
color: orange !important;
}