How to customize button in Telerik form / kendo-form?

Question

I'm new in the Telerik UI. When I want to customize a kendo form in asp.net razor pages. But I to rename button name. But I couldn't find any button field. I follow this link [Telerik Form][1]. I edit this form.

This is my code

<div class="card dataForm mb-3">
    <div class="demo-section">
        <kendo-form layout="grid" name="exampleForm"  method="POST">
            <form-items>
                <form-item type="group" layout="grid">
                    <grid cols="6" />
                        <item-label text="Income Information - list every person living in the home" />
                    <form-items>
                        <form-item field="Name" col-span="1">
                            <item-label text="Name:"/>
                        </form-item>
                        <form-item field="Age" col-span="1">
                            <item-label text="Age:"/>
                        </form-item>
                        <form-item field="Relationship" col-span="1">
                            <item-label text="Relationship:"/>
                        </form-item>
                        <form-item field="Income" col-span="1">
                            <item-label text="Income:"/>
                        </form-item>
                        <form-item field="SourceOfIncome" col-span="1">
                            <item-label text="Source of Income:"/>
                        </form-item>
                        <form-item field="EBCIRoll" col-span="1">
                            <item-label text="EBCI Roll:" />
                        </form-item>
                    </form-items>
                </form-item>
            </form-items>
        </kendo-form>
    </div>
</div>

<style>
    #example .demo-section {
        max-width: 600px;
        width: 600px;
    }
</style>

How to control this form? [1]: https://demos.telerik.com/aspnet-core/form/layout

Answer 1

With the TagHelper you need to set the buttons-template or buttons-template-id attribute. The first accepts the template as string the second the external template. Here is an example of the second option

<kendo-form buttons-template-id="myTemplate" layout="grid" form-data="@Model" name="exampleForm" on-validate-field="onFormValidateField" on-submit="onFormSubmit" on-clear="onFormClear" action="Layout" method="POST">
...
</kendo-form>

<script type="text/x-kendo-template" id="myTemplate">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-form-submit" type="submit">
    <span class="k-button-text">Custom Submit Button</span>
</button>
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-form-clear">
    <span class="k-button-text">Clear</span>
</button>