Remove default handler of clear button

[kva]

Default handler clears inputs values, but I want to set default values. I can accomplish this with my own handler, but I don't know how to remove default.

[Mihaela]

Hello,

You can use the ButtonsTemplateId() method to override the default Form buttons (Submit and Clear):

@(Html.Kendo().Form<UserViewModel>()
    .Name("formExample")
    .HtmlAttributes(new { action = "Index", method = "POST" })
    .ButtonsTemplateId("custom-form-buttons")
    ...
)

<script id="custom-form-buttons" type="text/x-kendo-template">
    <div class="custom-buttons">
        <button class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="submit">
            <span class="k-button-text">Submit</span>
        </button>
        @(Html.Kendo().Button()
            .Name("customFormBtn")
            .Content("Set default values")
            .HtmlAttributes(new { type = "button" })
            .Events(ev => ev.Click("onClick"))
            .ToClientTemplate()
        )
    </div>
</script>

<script>
    function onClick() {
        //"Set default values" button click event handler
    }
</script>

REPL sample: https://netcorerepl.telerik.com/mHEsblvV39OlpliC09

I hope that helps.

 

Regards, Mihaela Progress Telerik

[kva]

Could you, please, tell me how to implement the specified handler for clear button which will also work with dropdown editors?

[Mihaela]

You can add the default Form "Clear" button within the ButtonsTemplate by adding a button with class "k-form-clear". By default, it resets all Form items (including DropDownList editors).

For example:

<script id="custom-form-buttons" type="text/x-kendo-template">
    <div class="custom-buttons">
        <button class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="submit">
            <span class="k-button-text">Submit</span>
        </button>
        <button class="k-form-clear k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
            <span class="k-button-text">Clear</span>
        </button>
        @(Html.Kendo().Button()
            .Name("customFormBtn")
            ....
            .ToClientTemplate()
        )
    </div>
</script>

Here is the revised REPL sample that demonstrates this example:

https://netcorerepl.telerik.com/QdkCPplR56N4Cnem47

Best,

Mihaela

[kva]

Default handler removes all values, but I need to reset them to default ones (which were before editing). After successful submitting new values should become default.

[Mihaela]

You could reset the Form items to its default values as per the following approach:

• Set the Model data to the Form through the FormData() configuration:

@model User

@(Html.Kendo().Form<User>()
    .Name("formExample")
    .FormData(Model)
    ...
)

• Create a custom Form button that will set the default Form values and get the default form data in the button "click" event handler. Get references to the Form editors by using the getKendo<WidgetName>() method and call the value() method of the respective editor to update its value.

@model User

<script id="custom-form-buttons" type="text/x-kendo-template">
    <div class="custom-buttons">
        <button class="k-form-submit k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" type="submit">
            <span class="k-button-text">Submit</span>
        </button>
        @(Html.Kendo().Button()
            .Name("customFormBtn")
            .Content("Set default values")
            .HtmlAttributes(new { type = "button" })
            .Events(ev => ev.Click("onSetDefaults"))
            .ToClientTemplate()
        )
    </div>
</script>

@(Html.Kendo().Form<User>()
    .Name("formExample")
    .FormData(Model)
    .ButtonsTemplateId("custom-form-buttons")
    ...
)

<script>
    function onSetDefaults() {
        var form = $("#formExample").getKendoForm(); //get a reference to the Form
        var defaultFormModel = form.options.formData; //access the default values through the "formData" option
        let emailTextBox = $("#Email").getKendoTextBox(); //Get a reference to the respective Kendo editor
        let feedBackTextBox = $("#Feedback").getKendoTextArea();
        let ddl = $("#UserID").getKendoDropDownList();
        emailTextBox.value(defaultFormModel.Email); //Set the editor's value based on the default Model property value
        emailTextBox.trigger("change"); //Trigger the "change" event of the editor
        feedBackTextBox.value(defaultFormModel.Feedback);
        feedBackTextBox.trigger("change");
        ddl.value(defaultFormModel.UserID);
        ddl.trigger("change");
    }
</script>

REPL sample: https://netcorerepl.telerik.com/cRaCvMFr42DXj0tD10

I hope that helps.

[kva]

Thanks, that's what I needed.

[kva]

Is there a way to get from jquery input object information what's editor type it is bound and depending on that information, call the required method to get the editor?

Like this:

let input = $(`#{id}`);
let type = input.kendoEditorType;
let editor = input[`get${type}`]();

[Mihaela]

You could use the "data-role" attribute of the input element to get the editor's type:

        $.each($(".k-form-field .k-input, .k-form-field .k-picker"), function(){ //Loop through all elements with class "k-input" and "k-picker"
            let editorType = $(this).find('[data-role]').attr('data-role');
            console.log(editorType);
        });

[kva]

But how can I call the corresponding method, when it's typed in camel case, but the attribute's value is in lowercase.

[Mihaela]

You can use a custom function to convert the "data-role" value to camelCase.

Alternatively, you can loop through the different editor types that are available in the form:

        //Access all DropDownLists
        $.each($(".k-form-field input[data-role='dropdownlist']"), function(){
            $(this).data("kendoDropDownList").value(...);
        });

        //Access all DatePickers
        $.each($(".k-form-field input[data-role='datepicker']"), function(){
            $(this).data("kendoDatePicker").value(...);
        });

        //Access all NumericTextBoxes
        $.each($(".k-form-field input[data-role='numerictextbox']"), function(){
            $(this).data("kendoNumericTextBox").value(...);
        });

[kva]

Thanks!