telerik / kendo-ui-core

An HTML5, jQuery-based widget library for building modern web apps.
http://www.telerik.com/kendo-ui
Other
2.53k stars 1.91k forks source link

Adding HtmlAttributes to the Edit button are transferred also to the popup editor buttons #7102

Open kendo-bot opened 1 year ago

kendo-bot commented 1 year ago

I have a grid where the editor button should not be with text so I added a class to the button like this:

@(Html.Kendo().Grid<...>()
      .Name("...")
      .Columns(columns =>
      {
         columns.Command(command => command.Edit()
                                           .Text(" ")
                                           .HtmlAttributes(new { @class = "grid-button-notext", title = "..." }));
      })
      .Editable(editable => editable.Mode(GridEditMode.PopUp)
                                    .TemplateName("..."))
)

but the HtmlAttributes are applied also to the two buttons on the popup editor

<div class="k-edit-buttons k-actions-end">
   <button type="button" class="k-grid-update grid-button-notext k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" title="...">
     <span class="k-icon k-i-check k-button-icon"></span>
     <span class="k-button-text">Save</span>
   </button>
   <button type="button" class="k-grid-cancel grid-button-notext k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" title="...">
      <span class="k-icon k-i-cancel k-button-icon"></span>
      <span class="k-button-text">Cancel</span>
   </button>
</div>

Expected behaviour:

the HtmlAttributes to be applied only to the grid button. And if needed to provide PopupButtonHtmlAttributes like you have for column: HtmlAttributes, HeaderAttributes, FooterAttributes

Environment

aleksandarevangelatov commented 1 year ago

The same behavior is observed for the Kendo UI for jQuery Grid - example

<div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { command: [{ 
            name: "edit",
            attr:{"class":"myClass"}
          }] }
        ],
        editable: "popup",
        dataSource: {
          data: [ {Id: 1, name: "Jane Doe" } ],
          schema: {
            model: {
              id: "Id",
              fields: {
                name: { type: "string" }
              }
            }
          }
        }
      });
    </script>