razorkendo-uikendo-gridfont-awesomekendo-asp.net-mvc

How to add icon in kendo grid's custom command button?


I want to know how to add icon or fontAwesome class in Test button (Screenshot attached) Edit and Delete are default buttons provided by kendo controls, It has icons already but I added the Test custom button and want add icon there as well.

@(Html.Kendo().Grid<IntegrationViewModel>()
            .Name("IntegrationItemSettingsGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.IntegrationType).Title("Integration Type").Width(50);
                columns.Bound(p => p.ClinetId).Title("Clinet ID").Width(70);
                columns.Bound(p => p.ClientSecret).Title("Client Secret").Width(150);
                columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                    command.Custom("Test").Click("TestConnection");  //here
                });
            }
).ToolBar(toolbar => toolbar.Create())
      .Editable(editable => editable.Mode(GridEditMode.InLine))
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Pageable(pageable => pageable.Enabled(false))
      .HtmlAttributes(new { style = "width:100%;" })
     .DataSource(dataSource => dataSource.Ajax()
     .Model(model => model.Id(e => e.ClinetId))
     .Create(update => update.Action("CreateIntegration", "Admin"))
     .Read(read => read.Action("ReadIntegType", "Admin"))
     .Destroy(update => update.Action("DeleteIntegration", "Admin"))
     .Update(update => update.Action("UpdateIntegration", "Admin"))
     .Events(events => events.Error("onError"))
)

)

Icon in Test button

It should look like this enter image description here


Solution

  • There is a .IconClass() configuration you can use, for example:

                    columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();
                    command.Custom("Test").Click("TestConnection").IconClass("fa fa-check");
                });