buttontemplate and theming

1 Answer 51 Views
Form
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
David Ocasio asked on 30 Mar 2022, 02:45 PM

I needed to remove the clear button from a form.

So used the buttontemplate functionality ... unfortunately the styling for the button does not match the theme.

what class should I use to have the button match the overall theme. i used the class names that seemed right to me.

    @(Html.Kendo().Form<BomMasterViewModel>()

        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidateBomMaster", "BOMEdit"), method = "POST" })
        .FormData(Model)
        .FocusFirst(true)
        .ButtonsTemplate("<div class=\"k-form-buttons\">" + 
                            "<button class=\"k-button k-primary k-form-submit\" type=\"submit\">Submit</button>"+
                         "</div>")

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 04 Apr 2022, 10:15 AM

Hello David,

In order to hide the 'Clear' button, I recommend you to use the following CSS rule : 

<style>
    button.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-base.k-form-clear{
        display:none;
    }
</style>

In case the use of a template is mandatory, I recommend reviewing the following article  :
https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/button/appearance
It describes exactly how the Kendo buttons are rendered and you could declare a button with a primary color manually as it follows : 

    .ButtonsTemplate(@"
       <button class='k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-primary'>
           Submit
       </button>"
     ))

Another possible solution is to use the HtmlHelper to render the button. This could be done as follows :

    .ButtonsTemplate(
       Html.Kendo().Button().Name("btn").Content("Submit").ThemeColor(ThemeColor.Primary).ToClientTemplate().ToHtmlString()
     ))

I hope this helps!

Regards,
Yanislav
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Form
Asked by
David Ocasio
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Yanislav
Telerik team
Share this question
or