Style help for .k-item or other .k classes

[danparker276]

          <style >
    .k-popup .k-item
   {
font: 8px/1.8em bold Arial, Helvetica, sans-serif;
                    }
                </style>

So say I have 2 dropdowns, and I only want 1 of them to use the above for the dropdown list.  How would I style it?
 The 2 below are kendo dropdown lists

<div id="dd1" class="dd1">
      <input id="color1"  value="1" />
    </div>


    <div id="dd2" class="dd2">
      <input id="color2"  value="1" />
    </div>

[Dimo]

Hello Dan,

You can use the DropDownList's open event and apply a custom CSS class to be used in your CSS rule:

http://demos.telerik.com/kendo-ui/dropdownlist/events

http://docs.telerik.com/kendo-ui/api/web/dropdownlist#events-open

function onOpen(e) {
    e.sender.list.addClass("myClass");
}

e.sender.list refers to the <div> element with the .k-popup class.

Regards,
Dimo
Telerik

 

 

[danparker276]

Ok, I was hoping I could just scope the style, for .k-popup or .k-item but that didn't seem to work.  That's sorta ugly to add that to every dropdown.

[danparker276]

Ok, this this worked for me.  I'm guessing this is the best way to do it.

.myClass .k-item{
      font: 8px/1.8em bold Arial, Helvetica, sans-serif;
      background-color: blue;

}

          $("#color").kendoDropDownList({
              dataTextField: "text",
              dataValueField: "value",
              dataSource: data,
              index: 0,
              change: onChange,
              open: function(e) {
                  e.sender.list.addClass("myClass");
               }

          });