Поскольку все кнопки выглядят одинаково в теме blue-opal
, я пытаюсь применить стили Bootstrap 3
к Add New Record, Add Child, Edit, Delete
кнопкам в TreeList и удалить стиль k-button
в событии DataBound
, как показано ниже.
Razor Code
@(Html.Kendo().TreeList<KendoEx.Web.Models.Level>()
.Name("lvlTreeList")
.Toolbar(toolbar =>
{
toolbar.Create();
})
.Columns(columns =>
{
columns.Add().Field(e => e.LvlName).Title("Name").Width(120);
columns.Add().Field(e => e.LvlType).Title("Type").Width(80);
columns.Add().Field(e => e.Rating1).Title("Rating 1").Filterable(false).Width(100);
columns.Add().Field(e => e.Rating2).Title("Rating 2").Filterable(false).Width(100);
columns.Add().Command(c =>
{
c.CreateChild().Text("Add child");
c.Edit();
c.Destroy();
}).Width(180);
})
.Events(e => e.DataBound("lvlTreeList_DataBound"))
.Editable(e => e.Mode("inline"))
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetLevel", "Level"))
.Create(create => create.Action("Save", "Level"))
.Update(update => update.Action("Save", "Level"))
.Destroy(delete => delete.Action("Remove", "Level"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentLvl).DefaultValue(0);
m.Expanded(true);
m.Field(f => f.LvlName);
m.Field(f => f.LvlType);
m.Field(f => f.Rating1);
m.Field(f => f.Rating1);
}))
.Height(550))
Метод Javascript
function lvlTreeList_DataBound(e) {
$(".k-grid-add").removeClass("k-button");
$(".k-grid-edit").removeClass("k-button");
$(".k-grid-delete").removeClass("k-button");
$(".k-grid-add").addClass("btn btn-sm btn-success a-add");
$(".k-grid-edit").addClass("btn btn-sm btn-primary a-edit");
$(".k-grid-delete").addClass("btn btn-sm btn-danger a-del");
}
После удаления класса k-button
HTML выглядит как
<button type="button" data-command="create" class="k-button-icontext k-grid-add btn btn-sm btn-success a-add">
<span class="k-icon k-i-plus"></span>
Add New Record
</button>
Без класса k-button
, эти кнопкине запускают событие click
.Но Kendo Grid работает без проблем.
Version Info: Telerik 2018.1.221.545, MVC 5.2, .NET 4.6
Пожалуйста, сообщите об этом.Спасибо.