0

私のASP.NETMVC-3アプリケーションは、以前のバージョンのTelerikMVCExtensionsコンボボックスを使用しています。リスト内のアイテムのスタイルを変更しようとしています。

モデルは次のとおりです。

public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool DisplayBold { get; set; }
        public string Value
        {
            get
            {
                return string.Format("{0}|{1}", this.Id, this.DisplayBold.ToString());
            }
        }
    }

コントローラー：

var people = new List<Person>();
people.Add(new Person { Id = 1, Name = "John Doe", DisplayBold = true });
people.Add(new Person { Id = 2, Name = "Jayne Doe", DisplayBold = false });
ViewData["people"] = people;
return View();

コンボボックス：

<% Html.Telerik().ComboBox()
   .Name("ComboBox")
           .BindTo(new SelectList((IEnumerable<Person>)ViewData["people"], "Id", "Name"))
           .ClientEvents(events => events
        .OnChange("ComboBox_onChange")
        .OnLoad("ComboBox_onLoad")
        .OnOpen("ComboBox_OnOpen"))
    .Render();
%>

私は次のことを試しましたが、最初の項目が変更されました。

var item = combobox.dropDown.$items.first();
item.addClass('test');

しかし、TureのときにCSSを変更しようとすると：

var combobox = $(this).data('tComboBox');
$.each(combobox.dropDown.$items, function (idx, item) {
    if (combobox.data[idx].Value.split('|')[1] == 'True') {
        alert(item);
        $(item).addClass('test');

    }
});

それは動かなかった！

4

2 に答える 2

0

新しいmvc-telerik拡張機能（剣道）でスタイルを設定するためのソリューション

こんにちは、 telerik mvc comboBoxの使用例に基づいて、テンプレートアプローチを使用しました。jsfiddleで、新しいtelerik mvc拡張機能（剣道）の実用的な例を見つけることができます。

テンプレートを使用して、基になるデータソースに基づいてスタイルを設定します。

<script id="template" type="text/x-kendo-tmpl">
  # if (data.displayBold) { #
    <span style="font-weight: bolder;">${ data.name }</span>
  # } else { #
    <span style="font-weight: normal;">${ data.name }</span>
  # } #
</script>

document.readyで、コンボボックスをバインドします。

    // use of templates
    $("#titles").kendoComboBox({
         dataTextField: "name",
         dataValueField: "Id",
         // define custom template
         template: kendo.template($("#template").html()),
         dataSource: musicians
                });

dataSourceは、personクラスに似たオブジェクトの配列です。

var musicians= [{ id: 1, name: "Melody Gardot", displayBold: true }
 , { id: 2, name: "Lynn Withers", displayBold: false }
 , { id: 3, name: "Blue Ray", displayBold: true }    
 , { id: 4, name: "Club de Belugas", displayBold: true }    
 , { id: 5, name: "Mizzy Li", displayBold: false }    
];

hth

于 2012-09-23T05:12:22.447 に答える
0

これは、user373721がこれを回答済みとしてマークした後のバージョンです

以前の回答を書き直してフォーラムを閲覧しているときに、user373721が古いリビジョンを回答済みとしてマークしました。

申し訳ありませんが、telerikのフォーラムを検索して、データバインディングにフックしてCSSに影響を与える方法を確認しました。私はあなたの問題にぴったり合うものを見つけることができませんでした。

泥だらけの回避策の1つ（ここで必死になっている）は、太字で表示する必要のある名前にhtmlを追加することです。

public class Person
{
    public string NameText { get; }
    {
        get
        {
            if(this.DisplayBold) {
                 return "<b>" + this.Name + "</b>";
            } else
                 return this.Name; 
        }
    }
}

したがって、Nameにバインドする代わりに、NameTextにバインドします。あなたはhtml変換の世話をする必要があるかもしれません。

私の最後の検索で、私は役立つかもしれない投稿を見つけました。そして今、私はあなたからの投稿を見つけました

  • ちなみに、フォーラムで私はあなたの目標にとって重要であるかもしれないいくつかのバグ修正があったことを読みました。 どのtelerikmvc-releaseを使用していますか？
于 2012-09-23T07:00:07.217 に答える