How to use ToolBar.Template() with ToolBar.Excel() in kendo grid

I use toolbar.Template() and Toolbar.Excel() but toolbar.excel() don't show, just toolbar.Template() show.

.Excel(excel => excel
                            .FileName("Khu vực.xlsx")
                            .Filterable(true)
                            .ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
                     //Cài đặt thanh Menu bên trên Grid
                .ToolBar(toolbar =>
                    {
                        toolbar.Excel().HtmlAttributes(new { @class = "btn btn-danger", style = "float: left" });
                        toolbar.Template(@<text>
                            <div class="toolbar" style="float:right">
                                <a class="btn btn-danger k-grid-add" href="#">
                                    <i class="glyphicon glyphicon-plus"></i> Thêm mới
                                </a>
                                <button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                                    Nhập bằng Excel
                                </button>
                            </div>
                        </text>);
                    })

I delete toolbar.Template(), Toolbar.Excel() show(picture following):

https://i.sstatic.net/4A8g2.png

I keep toolbar.Template(), it don't show:

https://i.sstatic.net/Qjoex.png

Help me, please! Thank you!

P/s: I want button "Nhập bằng Excel" in front of button "Export to excel".

Solution

In order for the Excel button to show up on your toolbar you'll have to include the HTML for it inside the template.

In your case it would be something like this:

.Excel(excel => excel
        .FileName("Khu vực.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("ExportArea", "RegistrationManagement")))
        //Cài đặt thanh Menu bên trên Grid
.ToolBar(toolbar =>
 {
    toolbar.Template(@<text>
           <div class="toolbar" style="float:right">
                <a class="btn btn-danger k-grid-add" href="#">
                     <i class="glyphicon glyphicon-plus"></i> Thêm mới
                </a>
                <button class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                     Nhập bằng Excel
                </button>
                <button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>
           </div>
        </text>);
})

The following line of HTML that you're adding

<button class="k-button k-grid-excel btn btn-danger">Export to Excel</button>

...is basically whatever this line of code would generate:

toolbar.Excel().HtmlAttributes(new { @class = "btn btn-danger", style = "float: left" });

So just load the page once with the toolbar template commented out, see what HTML toolbar.Excel() generates and then copy and paste that inside the template.