Changing list style at runtime

[Justis]

With the now deprecated Telerik MVC controls, I was able to control styles fairly simply; however, I run into complications when trying to modify the background color of the drop-down list at runtime. I have a requirement to change the color when an error occurs. My first assumption would be something along the lines of:

$.each(result, function (index, key) {
var ele = $('[name=' + key + ']');
ele.css('background-color', '#ffc0cb')
ele.css('border-color', 'red');

ele = $('#' + key).data('kendoDropDownList');
if (ele) { ele.list.css('background-color', '#ffc0cb'); }
});

where 'result' is a list of the field names that have an error. I can confirm that I am getting the correct field names and I am infact getting the kendoDropDownList object.

What am I missing?

Many thanks,
-J

[Dimiter Madjarov]

Hi Joshua,


Since you are confirming, that the DropDownList object data is received as expected, I am not seeing any other possible mistakes in the rest of the provided code. Could you please take a look at the following JS Bin example and let me know if it covers your scenario?

 

Regards,
Dimiter Madjarov
the Telerik team

[Justis]

Hi Dimiter,

I've looked at the JSBin example and have determined that what my original code is doing is, infact, working. Upon noticing this, the behavior that I am looking to do has nothing to do with the list items themselves but rather the entire control on the screen. I imagine this may be one or more container styles that need to be modified.

For example, the default state of the JSBin example has the "black" option selected and has a gray gradient background. The desired behavior for me should be that when an error occurs, the entire list should change to a different style altogether.

Thank you,
-J

[Dimiter Madjarov]

Hello Joshua,

To override the default styling of the DropDownList,  you should use similar CSS styles.
E.g.

.k-dropdown .k-state-default
{
    background-color: red;
    background-image: none;
}

If you want to change the styling only when a certain condition is fulfilled, then you would have to set the styles dynamically with JavaScript.

Additional information about the most commonly used classes for styling Kendo UI Widgets can be found on the following page.
 

Regards,
Dimiter Madjarov
the Telerik team

[Justis]

Hi Dimiter,

Do you have an an example of dynamically changing styles with regards to the kendo drop-down list? I'm able to get the hidden input box that takes on the ID i provide and the parent span with classes "k-dropdown" and "k-header", but neither of those control the style of visible list.

<span aria-haspopup="true" style="width: 150px;" aria-expanded="false" aria-busy="false" class="k-widget k-dropdown k-header" role="listbox" tabIndex="0" aria-owns="PaymentMethodID_listbox" aria-activedescendant="PaymentMethodID_option_selected" unselectable="on"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on"></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on">select</span></span></span><input style="width: 150px; display: none;" id="PaymentMethodID" name="PaymentMethodID" value="0" type="text" data-role="dropdownlist" data-val-required="The PaymentMethodID field is required." data-val="true" data-val-range-min="1" data-val-range-max="255" data-val-range="The field PaymentMethodID must be between 1 and 255." data-val-number="The field PaymentMethodID must be a number."></span>

The above code is what I have extracted from the DOM. If i'm not mistaken, the drop-down list's  actual styling comes from this child span:

<span class="k-dropdown-wrap k-state-default" unselectable="on">

By using jQuery to select the input text (in my case, the ID is "PaymentMethodID", I find that I should be able to grab the parent and subsequently find the next element with the "k-dropdown-wrap" to modify the style; however, the execution doesn't seem to follow my expectations of the code. This is what I am trying to do:

$('#' + key).parent().next('.k-dropdown-wrap .k-state-default').css('background-color', '#ffc0cb');

I appreciate all your support and guidance. I'd hoping I can leverage KendoUI as much as possible but may have to resort to basic HTML drop-down lists if necessary.

Thank you,
-J

[Dimiter Madjarov]

Hi Joshua,


The element with an id key and the .k-state-default span are on the same level in the DOM tree, so you could use the prev method to get it.
E.g.

$("#" + key).prev("span.k-state-default")
       .css("background-color", "blue")
       .css("background-image", "none");

I hope this approach will work in your scenario.

 

Regards,
Dimiter Madjarov
the Telerik team

[Justis]

Hi Dimiter,

The use of .prev() completely escaped me! I am now getting the desired behavior thanks to your support and guidance.

Code to modify class of invalid inputs (represented as a list in the 'result' variable):

$.each(result, function (index, key) {
var ele = $('[name=' + key + ']');
ele.addClass('ValidationErrorClass');
if (ele.data('kendoDropDownList')) {
$('#' + key).prev("span.k-state-default").addClass('ValidationErrorClass');
}
});

Code to to remove the validation error class from form inputs that have that class:

$("#Form .ValidationErrorClass").removeClass('ValidationErrorClass');

Many thanks,
-J