我正在为我的ASP.NET核心应用程序使用Kendo工具。我有一个网格,我想添加自定义按钮到网格工具栏。我可以轻松地将导出添加到excel按钮,但我很难添加自定义按钮。
目前我的按钮显示在网格上方,这里是按钮:
<a href='#' class='k-button' id='saveState'>Save Grid Settings</a>
<a href='#' class='k-button' id='clearState'>Clear Grid Settings</a>
这是我的网格:
@(Html.Kendo().Grid<SylectusTL.ViewModels.Account.UserList>()
.Name("UserList")
.Columns(columns =>
{
columns.Bound(c => c.user_name).ClientTemplate(@"<a href=" + @Url.Content("/Account/UserProfile?caller='UserList'&user_id=#:data.user_id#") + ">#: user_name #</a>").Title("User Name");
columns.Bound(c => c.full_name).Title("Name");
columns.Bound(c => c.main_phone).Title("Phone").Width(150);
columns.Bound(c => c.main_phone_ext).Title("Ext").Width(100);
columns.Bound(c => c.email).Title("E-Mail");
columns.Bound(c => c.admin).ClientTemplate("#= admin ? 'Y' : 'N' #").Title("Admin").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(c => c.active).ClientTemplate("#= active ? 'Y' : 'N' #").Title("Active").Width(100).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Bound(c => c.last_login).Title("Last Login").Format("{0:MM/dd/yyyy}");
})
.ToolBar(tools =>
{
tools.Excel();
})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 20, 50 })
.ButtonCount(5))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn)
.ShowIndexes(true))
.Scrollable()
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.ColumnMenu()
.Excel(excel => excel
.FileName("User List.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Account"))
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Users_Read", "Account").Data("additionalData"))
)
)
有没有办法将soemthing模板添加到工具栏属性,我希望按钮显示在export to excel按钮旁边。我查了一些教程,一切都在我的工具栏属性中使用tools.template显示,但是当我尝试它时,它说模板不存在。
答案 0 :(得分:2)
在tools.Custom()
之后添加tools.Excel()
语句。此示例使用标准创建按钮和用于复制行的自定义按钮创建工具栏。
...
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Custom()
.HtmlAttributes ( new { onclick="master_duplicate(); return false;" } )
.Name("duplicate")@* creates a button with class k-grid-duplicate *@
.Text("Duplicate")
.IconClass("k-icon k-i-copy")
.Url("#")
;
})
...
和javascript
var dup_select_id; * used later in databound handler to automatically select the new duplicate;
function master_duplicate() {
var grid = $('#master').data('kendoGrid');
var data = grid.dataItem(grid.select());
$.ajax({
url: "@Url.Action("Duplicate")",
type: "POST",
data: { masterID: data.id }
})
.done(function (data, status, jqXHR) {
if (data.Data && data.Data.id) {
dup_select_id = data.Data.id;
grid.dataSource.read();
}
})
;
}
当没有选定的行时,还有其他逻辑隐藏按钮。