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>