Question

我想添加图标并更改kendo网格按钮的大小。引擎是剃刀，这是代码：

 @(Html.Kendo().Grid<WEB02.ConfigurationModel.TestGrid>()
.Name("grid")
.Columns(columns =>
{

    columns.Bound(o => o.Name).Width(110);
    columns.Bound(o => o.Type).Width(130);
    columns.Command(command => {command.Destroy();

    command.Custom("higher Order").Click("showDetails");
    command.Custom("AnotherCommand").Text("   ").HtmlAttributes(new { style = "background:url(/Images/Configuration/Up.png) left no-repeat" });

     });
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(p => p.Name))
    .PageSize(100)
    .Read(read => read.Action("ActivityGrid", "Configuration"))
    .Destroy("TestDelete", "Configuration")
    .Events(events => events.Sync("sync_handler"))       
    )


    .Pageable(pageable => pageable
        .Refresh(true))

）

我只能使用HtmlAttributes为此按钮添加一个样式条件。但我想添加更多，因为我想改变按钮的大小。每当我添加任何东西，电网故障!! 有什么建议吗？

Answer 1

您还有其他几种选择，而不是这样：

添加类而不是添加样式，然后为该类添加CSS
使用模板列 .ClientTemplate（“Some Text”）

Answer 2

您可以使用html HtmlAttributes添加多种样式。

 @(Html.Kendo().Grid<TelerikMvcApp1.Models.PersonViweModel>()
 .Name("PersonList")
 .Columns(col =>
 {
 col.Bound(c => c.FirstName).Width(120);
 col.Bound(c => c.LastName).Width(120);
 col.Bound(c => c.Country).Width(120);
 col.Command(c =>
 {
 c.Edit().HtmlAttributes(new { Style = "background-color:cornflowerblue; color:White" 
 });
 c.Destroy();
 }).Title("Action");
 })

 .ToolBar(t => t.Create())
 .DataSource(source => source
 .Ajax()
 .Model(m => m.Id(e => e.Id))
 .Create("Create", "Home")
 .Update(u => u.Action("Update", "Home"))
 .Destroy("Delete", "Home")
 .PageSize(2)
 .Read(Read => Read.Action("Read", "Home"))
 )
 .Pageable()
 .Groupable()
 .Sortable()
 .Editable()
 .Filterable()
.Width(600)
 )
</div>

向Kendo网格按钮添加多种样式

2 个答案: