Use loader to stop user from interaction until data saved/redirect

0 Answers 42 Views
Loader
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 06 Aug 2022, 10:35 PM

I have a general idea of the flow:

(i) Assign a unique id to your form (eg form-id) by changing your form code to:

@using (Html.BeginForm("SaveCountry", "Country", FormMethod.Post, new { id = "form-id" })) {
}

(ii) Put the loader on your page with a unique id. The div is hidden until the form is submitted. Need to use Kendo Loader here and place it in either a partial view or in _Layout so it is always available as hidden--by-default

(iii) Style the loader / loading div to go somewhere useful.

(iv) Show the loader when the form is submitted (and after any validation has been completed), for example (not sure about this):

<script>
    $("#form-id").on("submit", function () {
        $("#divLoading").show();
    });
</script>

(v) Given that the page will redirect, I can probably leave the loader until the page redirects. But if I need to hide the loader before that happens, I can use (Kendo Loader here + function defined in _layout as well):

$("#divLoading").hide();
Now I just need to use Kendo Loader with the above flow.
Aleksandar
Telerik team
commented on 10 Aug 2022, 10:47 AM

Hello,

I am not sure I understand the issue at hand. If further details on the Loader configuration are required refer to the Loader documentation section. If desired you can show a mask over a container and use the loader to indicate there is a process going on. The documentation linked above provides an example for this and a runnable version can be reviewed in this REPL.

No answers yet. Maybe you can help?

Tags
Loader
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or