GridView - How to show LoadingPanel during export

When you export a grid with a lage amount of data, you might want to show the LoadingPanel during exporting. To do so, handle the button's client-side Click event to:

1) Show the loading panel;

2) Perform an ajax request to the server to export the grid;

3) Hide the loading panel on success and submit the form to attach the exported document to the response.

[JScript]
function OnClick(s, e){
    $.ajax({
        url: "Home/CallbackExport",
        type: "POST",
        data: GetFormData(),
        contentType: false,
        processData: false,
        beforeSend: (function(data){
            LoadingPanel.Show();})}).done(function(data){
        LoadingPanel.Hide();
        $("#form").submit();});}

Note that in order to export the grid's state to the document, it is necessary to manually send the form data to the server during the ajax request:

[JScript]
...
data: GetFormData(),...function GetFormData(){var fd = new FormData();var data = $('form').serializeArray();
    $.each(data, function(key, input){
        fd.append(input.name, input.value);});return fd;}

See Also:
How to show ASPxLoadingPanel during export