Question

我想根据数据库中的值显示按钮上的文字。

因此，每行按钮文字各不相同（例如：服务中，过期，30天过期）。

1）如何在Kendo行的按钮中显示文字？

2）我想根据以上3个值更改按钮的颜色。（例如：在服务中 - 绿色，过期 - 红色，30天到期 - 黄色）

我想在下面的代码

中的自定义命令按钮中显示该按钮

我该怎么做？

@(Html.Kendo().Grid(Model)
       .Name("grid")
       .Columns(columns =>
       {
           columns.Bound(c => c.UserName).Title("User").Filterable(false);               
           columns.Bound(c => c.Role).Title("Role");               
           //columns.Command(command => command.Custom().Click("showDetails"));
       })
       .HtmlAttributes(new { style = "height: 500px;" })
       .Sortable()
       .Scrollable(x => x.Height(400))
       .Filterable()
       .Pageable(x => x.Enabled(true).PreviousNext(false).PageSizes(true))
   )

Answer 1

看起来你正在对网格进行ServerSide绑定。在这种情况下，您需要使用列构建器的Template（）方法。

我试图复制你的场景。我有一个具有以下定义的模型：

 public class StatusModel
    {
        public string Col1 { get; set; }
        public string Status { get; set; }
    }

然后在我的控制器中，我只是创建一个包含3个项目的列表，如下所示：

public ActionResult Index()
        {
            var data = new List<StatusModel>()
            {
                new StatusModel {Col1="Row 1",Status="In Service" },
                new StatusModel {Col1="Row 2",Status="Expire" },
                new StatusModel {Col1="Row 3",Status="30 days Expire" },
            };
                return View(data);
        }

在视图中，您需要定义网格：

@(Html.Kendo().Grid(Model)
                  .Name("kGrid")
                  .Columns(columns =>
                  {
                      columns.Bound(c => c.Col1).Title("Column 1");
                      columns.Bound(c => c.Status).Template(@<text>
                        @if (@item.Status == "In Service")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:green;color:white;width:150px" })
                        }
                        else if (@item.Status == "Expire")
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:red;color:white;width:150px" })
                        }
                        else
                        {
                            @Html.Kendo().Button().Name("kButton").Content(@item.Status).HtmlAttributes(new { style = "background-color:orange;color:white;width:150px" })
                        }
                    </text>);
                  })
            )

您可以通过执行if else来优化代码，以决定可以应用的CSS类，最后对Kendo.Button（）进行一次调用，并将css类作为HTML属性传递。

希望这会有所帮助。

在按钮上显示文本并更改按钮Kendo UI的颜色

1 个答案: