Как я могу применить стиль к одному элементу в выпадающем списке кендо?

0

Я сейчас экспериментирую с Kendo, и я нашел этот пример онлайн:

Здесь код для ASP.NET MVC:

<div class="demo-section">
<h2>View Order Details</h2>
<p>
    <label for="categories">Catergories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categories")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryId")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetCascadeCategories", "ComboBox");
               });
          })
    )
   </p>
   <p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("products")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )
        <script>
        function filterProducts() {
            return {
                categories: $("#categories").val()
            };
        }
    </script>
     </p>
     <p>
     <label for="orders">Orders:</label>
     @(Html.Kendo().DropDownList()
          .Name("orders")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select order...")
          .DataTextField("ShipCity")
          .DataValueField("OrderID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeOrders", "ComboBox")
                      .Data("filterOrders");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("products")
    )
    <script>
        function filterOrders() {
            return {
                products: $("#filterOrders").val()
            };
        }
     </script>
    </p>
   </div>
    <script>
    $(document).ready(function () {
    var categories = $("#categories").data("kendoDropDownList"),
        products = $("#products").data("kendoDropDownList"),
        orders = $("#orders").data("kendoDropDownList");

       $("#get").click(function () {
        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
    });
});
</script>
<style scoped>
.demo-section {
    width: 460px;
    padding: 30px;
}
.demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.demo-section label {
    display: inline-block;
    width: 120px;
    padding-right: 5px;
    text-align: right;
}
.demo-section .k-button {
    margin: 20px 0 0 125px;
}
.k-readonly
{
    color: gray;
}

Здесь веб-сайт с интерактивной демонстрацией и исходным кодом: http://demos.telerik.com/kendo-ui/web/dropdownlist/cascadingdropdownlist.html

Мне интересно, хочу ли я слова "Выбрать категорию..." или "Выбрать продукт..." в этом раскрывающемся списке, сделанном в стиле шрифта курсивов, и только этот элемент (первый элемент раскрывающегося списка), как я могу сделай это?

В настоящее время .HtmlAttributes(new { style = "width:300px" }) (например) применяет стили ко всем элементам в списке. Как я могу применить его только к одному элементу в списке?

Теги:
kendo-ui
kendo-asp.net-mvc

1 ответ

1

Вы должны применить стиль вручную к элементу, обозначенному как заполнитель, используя что-то похожее

$("#myDropDownList").find(".k-select").css("background-color", "yellow" );
  • 0
    Я хочу сказать, как мне применить его к первому элементу выпадающего списка? То есть drowndownlist [0] должен возвращать Select Product, например. В вашем примере вы используете myDropDownList, но этот стиль применяется ко всем элементам в выпадающем списке, верно?
  • 0
    Когда я посмотрел на dom для раскрывающегося списка с заполнителем, местозаполнитель или элемент со стрелкой раскрывающегося списка, казалось, были отмечены классом «k-select», поэтому я предложил найти («. K-select»). Чтобы применить стилизацию к «PlaceHolder», элемент, который вы обозначили с помощью .OptionLabel («Выбрать заказ ...»)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню