0

我的 ASP.NET MVC-3 应用程序正在使用以前版本的Telerik MVC Extensions combobox。我正在尝试更改列表中某个项目的样式。

这是模型：

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');

但是，当我尝试更改 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

这是 user373721 将其标记为已回答之后的版本

当我重写我之前的答案并浏览论坛时，user373721 将我的旧版本标记为已回答。

很抱歉，我搜索了telerik 的论坛，看看你如何挂钩数据绑定来影响css。我找不到适合您的问题的匹配项。

一种混乱的解决方法（在这里变得绝望）可能是将 html 添加到应该显示为粗体的名称中：

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

因此，您将绑定到 NameText，而不是绑定到 Name。您可能需要处理 html 转换。

在我最后一次搜索中，我发现了一个可能有帮助的帖子。现在我找到了一个可能来自你的帖子

  • 顺便说一句，我在论坛中读到有几个错误修复可能对您的目标很重要。 您使用的是哪个telerik mvc-release？
于 2012-09-23T07:00:07.217 回答
0

使用新的 mvc-telerik 扩展 (kendo) 设置样式的解决方案

嗨，基于Telerik mvc comboBox 使用中的示例，我使用了模板方法。在 jsfiddle，您可以找到新的 Telerik mvc 扩展 (kendo)的工作示例。

使用模板根据底层数据源设置样式：

<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 回答