I have grid below. I did not like the way buttons are displayed. so would like to do 1 of these:
1) move buttons to the bottom of the row to eliminate 2 column, mainly for mobile friendly
2) or at very least get rid of "Edit" & "Delete" label on these buttons to reduce space. When I removed button text, buttons no longer response to events. Why?
I have attached a screenshot. Could someone suggest a solution please!
@(Html.Kendo().Grid(Model)
.Name("grid")
.ToolBar(toolbar => {
toolbar.Search();
toolbar.Custom().Text("Add").IconClass("bi bi-plus-circle").HtmlAttributes(new { id = "AddButton", @class="floatRight" });
toolbar.Pdf().Text("PDF");
toolbar.Excel().Text("Excel");})
.Search(search=> search.Field(c=>c.Caption))
.Selectable(select => select.Mode(GridSelectionMode.Single))
.Events(ev => ev.Change("onChange"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
.Pageable()
.Sortable()
.Columns(columns =>
{
columns.Bound(f => f.Id).Visible(false);
columns.Bound(f => f.Odometer).Title("Equipment List").ClientTemplate("<p><strong>#=Caption#</strong></p> <ul><li>Odometer: #=Odometer #</li><li>Engine Hour: #=EngineHour #</li><li>Created date: #= CreateDateString #</li><li>Last maintenance: #= LastMaintenance?.Description # on #= LastMaintenance?.CreateDateString #</li></ul>");
columns.Command(command => {
command.Custom("Edit").IconClass("bi bi-pencil-square").Click("Update");
command.Custom("Del").IconClass("bi bi-trash").Click("Archive");
}).Title("Actions").Width(80);
})
)