Given the following form:
<kendo-form orientation="vertical" layout="grid" name="formEntity" size="medium">
<form-items>
<form-item hidden-editor="true" field="Id"></form-item>
<form-item hidden-editor="true" field="ParentId"></form-item>
<form-item hidden-editor="true" field="ClientId"></form-item>
<form-item field="EntityName" editor-handler="setRequiredTextboxEditor">
<item-label text="Name" optional="false"/>
</form-item>
<form-item field="EntityEmail" editor-handler="setRequiredTextboxEditor">
<item-label text="Email" optional="false"/>
</form-item>
<form-item field="EntityPhone" editor-handler="setRequiredTextboxEditor">
<item-label text="Phone" optional="false"/>
</form-item>
</form-items>
<validatable validate-on-blur="true" error-template="<span class='k-form-error'>#:message#</span>" validation-summary="false"></validatable>
</kendo-form>
I am trying to create a custom template to house the buttons displayed on the form. All I really wish to do is show/hide the Clear button under certain circumstances and I figured doing so in a template might be my best option.
However, I cannot get a custom template to appear for the form and there are no examples of how to do this in the documentation that I could find.
I assumed it would be something like this:
<buttons-template>
<kendo-template>
<div class="k-form-buttons">
<button id="btnSave" class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-focus" data-role="button" type="submit" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Submit</span></button>
<button id="btnClear" class="k-form-clear k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" data-role="button" type="button" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Clear</span></button>
</div>
</kendo-template>
</buttons-template>
But this just hides the buttons entirely. I know I am missing something, I just don't know what it is.
Thanks.
1 Answer, 1 is accepted
0
Accepted
Marc
Top achievements
Rank 2
Iron
Rank 2
Iron
answered on 29 May 2024, 11:58 PM
Turns out the answer was fairly simple:
<buttons-template>
<div class="k-form-buttons">
<button id="btnSave" class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-focus" data-role="button" type="submit" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Submit</span></button>
<button id="btnClear" class="k-form-clear k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" data-role="button" type="button" role="button" aria-disabled="false" tabindex="0"><span class="k-button-text">Clear</span></button>
</div>
</buttons-template>