Grid Column Command Buttons will not shown after updating from version 2020.1.406 to 2023.2.606

[Jens]

 

Hello,

after upgrading the versions buttons will not shown correctly

• Edit Button is disabled
• Delete Button will not shown anymore

We using dotnet core version 7 and Telerik version 2023.2.606:

Here is the code of the columns.

                      <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command template="<a class='k-grid-edit k-icon k-i-edit button_icon' href='\#'> </a>" text="\{Edit\}" icon-class="k-icon k-i-edit button_icon" name="edit"></column-command>
                            </commands>
                        </column>
                        <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
                            </commands>
                        </column>

Have you any idea to fix the problems? I think the icon class is changed with the update.

Second problem is to disable the buttons via javascript:

                $(".k-grid-edit").addClass("k-state-disabled")
                $(".k-grid-custom").addClass("k-state-disabled")

Before the update this commands works well after not. Have you any idea to find the icon via javascript.

Best regards
Jens

[Jens]

I found a solution:

in the Layout page add following entry:

Continuing with Font Icons

To continue using font icons as the default icon type, call the kendo.setDefaults method:

<script>
    kendo.setDefaults('iconType', 'font');
</script>

 

UI custom commands:

                        <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit width_100px"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit width_100px" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command text=" " icon-class="k-icon k-i-pencil button_icon" name="edit"></column-command>
                            </commands>
                        </column>
                        <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
                            </commands> 

                     </column>

 

Disableing the commands with javascript:

                $(".k-grid-edit-command").addClass("k-disabled")
                $(".k-grid-custom").addClass("k-disabled")