Unable to add multiple attribute into cssClass property
Hi expert,
I would like to know if I can add more than one attribute into cssClass like below.
Generally only 1 cssClass ==> cssClass={"e-small"} OR cssClass={"e-error"} works but I want to add both logic for displaying error (e-error or undefined AND e-small)
For below -- I use cssClass={e-small} but I need to include e-error. So that it will display red rectangle when submit because it requires a mandatory field.
Example like what I like: --> it works but I need to include e-small. Notice the difference height.
SIGN IN To post a reply.
12 Replies
Hi Deepa,
I come up with a brillant idea after observing your source codes because I am thinking of adding the classList (either e-error OR undefined) based on checking if this div class contains undefined when the value is empty, it will add "e-error" otherwise add undefined.
However I encounter a problem due to DatePickerComponent Property. I am not sure how to deal with this.
Sample Code I come up with an idea:
export const dateRequired = (dateContainer: DatePickerComponent, value: string, allValues:object) => {
if (!value) {
if (dateContainer.inputWrapper.container.classList.contains(undefined))
{
removeClass([dateContainer.inputWrapper.container], [undefined]);
}
// createValidationMessage(Severity.Error, "Dies ist ein Pflichtfeld!").message;
// addClass([dateContainer.inputWrapper.container], ["e-error"]);
dateContainer.inputWrapper.container.classList.add("e-error");
}
else {
if (dateContainer.inputWrapper.container.classList.contains("e-error"))
{
removeClass([dateContainer.inputWrapper.container], ["e-error"]);
}
dateContainer.inputWrapper.container.classList.add(undefined);
}
// dateContainer.inputWrapper.container.classList.add("e-error");
// return value ? undefined : createValidationMessage(Severity.Error, "Dies ist ein Pflichtfeld!").message;
}
Error: What am I missing?
Failed to compile.
(30,27): Property 'inputWrapper' is protected and only accessible within class 'DatePicker' and its subclasses.
My question is I am wondering how I can check if the div class contains undefined OR "e-error"
this class contains "undefined" but I am wondering how to check if it contains then true otherwise false --> is there a code? Something like
if (dateContainer.inputWrapper.container.classList.contains("undefined")) {
true
}
else { false }
As you see the blue highlighted row below, I am wondering how i can append to this div class like putting id so that I will use document.getElementByID("hello").classList.add(undefined); But I am not sure where I can add id into this div class because it belongs to DropdownList Component?
this class contains "e-error" but I am wondering how to check if it contains then true otherwise false --> is there a code? Something like
if (dateContainer.inputWrapper.container.classList.contains("e-error")) {
true
}
else { false }
As you see the blue highlighted row below, I am wondering how i can append to this div class like putting id so that I will use document.getElementByID("hello").classList.add("e-error"); But I am not sure where I can add id into this div class because it belongs to DropdownList Component?
Lastly, I am baffled how I can check if this class contains undefined or not. I am thinking like id=picker so that it can check but I am not sure how it works like contains etc.
<DatePickerComponent
id="datepicker"
Hi Deepa,
Thanks for your feedback, explaination and source codes.
Back to your questions below:
Query #1: multiple classes support in Checkbox and Dropdownlist
We would like let you know that CheckBox and Dropdownlist controls already has support for adding multiple cssClass attributes. Please find the code example for adding multiple classes in Checkbox and Dropdownlist. --> For my case: It does not work on my side. I am using Typescript. See the error code below:
Error:
Code:
Error:
It occurs when I tried to select "Individuell" but it does not occur when I select the rest of values except Individuell.
Query #2: Dropdownlist change event not working
We have checked with a sample to check the change event of Dropdownlist and we can confirm that it is working as expected. We have showcased the change event in above Stackblitz sample. --> For my case: It does not work although I use ref. I use TypeScript.
I am using CheckBoxField that will link to CheckBoxComponent but ref does not work.
Code:
CheckBoxField
CheckBoxComponent
Error:
I am still baffled with CheckBoxComponent especially ref.. I am using "@syncfusion/ej2-buttons": "^16.3.30" so I must update new version.
As for Dropdownlist --> Thanks for fixing this bug --> I see you use
"@syncfusion/ej2-buttons": "^16.3.30",
"@syncfusion/ej2-react-dropdowns": "16.3.32",
https://ej2.syncfusion.com/react/documentation/release-notes/ --> I do not see the latest version of React Syncfusion e.g. 16.3.32?? Is there a new version for React TypeScript?
Query #3: Disable state binding in checkbox is not working
We were able to reproduce the reported issue and we need to validate more on this. So, we will validate further and update you with further details on November 15th, 2018. Meanwhile we would suggest you the work around solution to add the disabled property for checkbox component by using the scope reference variable.
--> I tried to add the scope reference variable but it does not work. I hope you can get disabled property working like e.g. disabled={this.state.valueString === "Individual" ? false : true } ==> I would prefer it as it is a clean and simple code but do get back to me once you have the update with further details. :-)
SIGN IN To post a reply.
