Kendo UI how to move grid command buttons

1 Answer 365 Views
Grid
Hai
Top achievements
Rank 1
Hai asked on 11 Oct 2022, 09:47 PM | edited on 11 Oct 2022, 09:53 PM

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);
        
        })
    )


1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 13 Oct 2022, 09:10 AM

Hello Hai,

You can use any of the two approaches. 

1) You would have to add buttons to the template, attach click handler and execute the desired logic

2) Use the Text() method to set the Button label to an empty string

command.Custom("Edit").Text(" ").IconClass("bi bi-pencil-square").Click("Update");

This REPL demonstrates both the above suggestions.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Hai
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or