ASP.NET Core中为Kendo Grid工具栏添加自定义按钮的方法

嘿，我之前刚好折腾过Kendo Grid工具栏自定义的问题，给你两个实用方案，能轻松让自定义按钮和Excel导出按钮并排显示：

方案一：使用Toolbar模板完全自定义（推荐） #

Kendo Grid的Toolbar支持通过Template属性定义整个工具栏的HTML结构，这样你可以把自定义按钮和Excel导出按钮放在同一个容器里，自然就会并排显示，还能精准控制布局。

示例代码（Razor语法）：

@(Html.Kendo().Grid<YourDataModel>()
    .Name("yourGrid")
    .ToolBar(toolbar => {
        toolbar.Template(@<text>
            <div class="k-toolbar k-grid-toolbar">
                <!-- 自定义按钮 -->
                <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onclick="handleCustomClick()">
                    <span class="k-icon k-i-plus"></span> 新增数据
                </button>
                <!-- Excel导出按钮 -->
                @(Html.Kendo().Button()
                    .Name("excelBtn")
                    .Icon("k-i-excel")
                    .Content("导出到Excel")
                    .Events(e => e.Click("triggerExcelExport"))
                )
            </div>
        </text>);
    })
    .Excel(excel => excel
        .FileName("Grid数据.xlsx")
        .Filterable(true)
        .AllPages(true)
    )
    // 其他Grid配置（列、数据源等）...
)

<script>
    function handleCustomClick() {
        // 这里写自定义按钮的业务逻辑
        alert("自定义按钮被触发啦！");
    }

    function triggerExcelExport() {
        // 调用Grid的Excel导出方法
        $("#yourGrid").data("kendoGrid").saveAsExcel();
    }
</script>

注意点： #

• 给自定义按钮加上Kendo官方的样式类（比如k-button系列），能让按钮风格和默认工具栏按钮保持一致，避免视觉违和感。
• 通过saveAsExcel()方法手动触发导出，和默认Excel按钮的行为完全一致。

方案二：用默认Toolbar方法+CSS调整（快速实现） #

如果不想写完整模板，也可以直接用Kendo提供的Custom()方法添加按钮，再通过CSS调整布局让按钮并排：

示例代码：

@(Html.Kendo().Grid<YourDataModel>()
    .Name("yourGrid")
    .ToolBar(toolbar => {
        // 添加自定义按钮
        toolbar.Custom().Text("自定义按钮").HtmlAttributes(new { onclick = "handleCustomClick()" });
        // 添加默认Excel导出按钮
        toolbar.Excel();
    })
    .Excel(excel => excel
        .FileName("Grid数据.xlsx")
        .Filterable(true)
        .AllPages(true)
    )
    // 其他Grid配置...
)

<style>
    /* 让工具栏内的按钮并排显示 */
    .k-grid-toolbar .k-button {
        display: inline-block;
        margin-right: 8px; /* 给按钮之间加些间距 */
    }
</style>

<script>
    function handleCustomClick() {
        // 自定义按钮逻辑
    }
</script>

原理： #

默认情况下，Kendo Grid工具栏的按钮可能会被设置为块级元素导致换行，通过CSS将其改为inline-block就能实现并排，这种方式适合快速添加少量自定义按钮的场景。

内容的提问来源于stack exchange，提问作者Kristen