Add css class dynamically to kendo controls.

[NEO]

Hello,

I am trying to add the css class to the kendo controls based on some validations. I tried as given in the below code but its not applying. Please suggest me how i can achieve this.

var datePicker = $("#SampleDatePicker").data("kendoDatePicker");
datePicker.addClass('error-Border');

Thanks and Regards,
Ravi

[Iliana Dyankova]

Hi Ravi,

In order to achieve the desired outcome you should add the CSS class to the HTML element from which the Kendo UI widget is initialized. I.e.:

$("#SampleDatePicker").addClass('error-Border');

Kind regards,

Iliana Nikolova
the Telerik team

[Paweł Korczak]

How do I add a class?
What should it look like?

this.addClass ( 'invalid')

kendoNumericTextBox({ label : "  price", format : "n2", decimals : 2 , 
		change: function() {
		if ( this.value() == 0 ) { this.addClass ( 'invalid') } else { this.removeClass ( 'invalid') } 
	} // ---
 }

Paweł 

[Georgi Denchev]

Hi, Paweł,

The NumericTextBox consists of several elements so it depends on what you expect the final result to look like.

There components consists of two inputs. One input is shown when the input is not focused. The second input is shown when you click inside the element.

To add a class to the "unfocused" input, use the following snippet:

this._text.addClass("invalid");

To add class to the "focused" input, use the following snippet:

this.element.addClass("invalid");

Dojo

I've prepared a Dojo example where you can see the difference:

https://dojo.telerik.com/@gdenchev/oxeQUDiP 

Best Regards,

Georgi