Show Loading Panel when Save form

eiwai · January 12, 2016, 9:18am

Hi,

How can I show loading panel when I click “Save” button inside form? For grid, I can add modalbox inside onXLS event . And hide it inside onXLE event. So, it will show loading panel when grid is loading.

mygrid.attachEvent(“onXLS”, function () {
box = dhtmlx.modalbox({
                text: "Loading, Please Wait...",
                width: "300px"
            });
        });
mygrid.attachEvent(“onXLE”, function (value, text) {
dhtmlx.modalbox.hide(box);
}

How can I do it when user click on button inside form? I need to show loading panel because sometimes the process is very long and there is no hint the form is still processing. When I tried to go to other page, then whole program not working already.

Darya · January 12, 2016, 11:14am

Hi
You can try to do it based on this sample locally:
dhtmlx.com/docs/products/dhtmlxF … _save.html
You need just to add “onBeforeSave” and “onAfterSave” event handlers after loading formdata:

myForm.attachEvent("onBeforeSave", function (id, values){ // document.getElementById("test1").innerHTML = "Start saving"; box = dhtmlx.modalbox({ text: "Loading, Please Wait...", width: "300px" }); return true; }); myForm.attachEvent("onAfterSave", function (id, xml){ // document.getElementById("test2").innerHTML = "End saving"; dhtmlx.modalbox.hide(box); });
Commented lines are just for show progress (in this demo saving command are quite fast, so these objects are like logs - see picture below)

eiwai · January 13, 2016, 1:10am

Hi,

Thank you for your reply. There is one more problem. I have master page and child page. Loading panel only show for child page and I can still click links on master page. How can I make it show for whole page?

Thanks in advance.

Darya · January 13, 2016, 9:18am

In this case you can use our layout to show loading status to the sell or the whole layout. Also you can attach URLs in layout cells
dhtmlx.com/docs/products/dhtmlxL … gress.html
Plus you can attach there form directly:
dhtmlx.com/docs/products/dhtmlxL … _form.html

eiwai · March 11, 2016, 9:09am

Hi Darya,

Thank you so much for your support. Now I have another problem. The loading panel didn’t show when I tried to save the form with grid inside. The page just hang there, when I click the save button. Below is the same code that I tried.

HTML

<script src="Scripts/jquery-2.1.4.js"></script>
<style type="text/css">
    .dhxform_obj_dhx_skyblue {
        font-family: Arial !important;
    }

    .LabelHeader {
        color: black !important;
        font-family: arial !important;
    }

    .dhxform_obj_dhx_skyblue .dhxform_textarea {
        /*border: 0px !important;*/
        /*background-color: transparent !important;*/
        /*font-size: 8pt !important;*/
        font-family: arial !important;
    }

    .dhxform_obj_dhx_skyblue div.dhxform_txt_label2 {
        color: black;
        font-weight: normal;
        /*font-size: 8pt !important;*/
        font-family: arial !important;
    }

    .dhxform_obj_dhx_skyblue fieldset.dhxform_fs legend.fs_legend {
        color: black !important;
        font-weight: normal !important;
        /*font-size: 8pt !important;*/
        font-family: arial !important;
    }

    .dhxform_obj_dhx_skyblue fieldset.dhxform_fs {
        border: 1px solid gray !important;
    }
</style>

<script type="text/javascript">

    var myForm, formData;
    var success, fail;
    var tempRole; var noAccessRight; var tempDays;
    var mygrid;

    $(document).ready(function () {
        doOnLoad();

    });

    var box = null;
    function doOnLoad() {

        formData = [
            { type: "newcolumn", offset: 5 },
            { type: "button", name: "Save", value: "Save", offsetLeft: 0, offsetTop: 0, width: "70" }

        ];


        form_container = new dhtmlXForm("form_container", formData);
        form_container.setFontSize("8pt");

        form_container.attachEvent("onButtonClick", function (id) {

            if (id == "Save") {
               
                box = dhtmlx.modalbox({
                    text: "Loading, Please Wait...",
                    width: "300px"
                });

                var count = mygrid.getRowsNum();
                
                if (count > 0) {

                    var state = mygrid.getStateOfView();
                    for (var idx = state[1]; idx < state[2]; idx++) {
                        var listArguments = new Array();

                        for (i = 0; i <= 2 ; i++) {
                            listArguments[i] = mygrid.cells(idx + 1, i).getValue();
                        }

                        ExecuteSave(getRequestData(listArguments));
                    }

                    if (fail > 0) {

                        dhtmlx.modalbox.hide(box);
                        dhtmlx.message({
                            title: "Save",
                            type: "alert",
                            text: "Save failed. Please retry!",
                            callback: function () { }
                        });
                    }
                    else if (success > 0) {
                        debugger;

                        dhtmlx.modalbox.hide(box);

                        dhtmlx.message({
                            title: "Save",
                            type: "alert",
                            text: "Save successful!",
                            callback: function () {
                                debugger;
                                mygrid.clearAll();
                                ReloadGrid();
                            }
                        });


                    }


                } else {

                    dhtmlx.modalbox.hide(box);
                    dhtmlx.message({
                        title: "Save",
                        type: "alert",
                        text: "No Record!",
                        callback: function () {
                            debugger;

                        }
                    });
                }
            }

        })

        mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setSkin("dhx_skyblue");
        mygrid.setImagePath("imgs/");
        mygrid.setHeader(",ROLE CODE,ROLE NAME");
        mygrid.setInitWidthsP("20,30,*");
        mygrid.setColTypes("link,ro,ro");
        mygrid.setStyle("font-family:arial;font-size:8pt;font-weight:bold", "font-family:arial;font-size:8pt;", "font-family:arial;font-size:8pt;", "font-family:arial;font-size:8pt;");
        mygrid.enablePaging(true, 31, 5, "pagingbox");
        mygrid.init();

        mygrid.attachEvent("onXLS", function () {
            box = dhtmlx.modalbox({

                text: "Loading, Please Wait...",
                width: "300px"
            });
        });


        mygrid.attachEvent("onXLE", function (value, text) {
            dhtmlx.modalbox.hide(box);

        });

        document.getElementById("gridbox").style.height = document.body.offsetHeight - 55 + "px";

        ReloadGrid();
    }
    function getRequestData(data) {

        return JSON.stringify({

            "filterExpression": data

        });

    }

    function ReloadGrid() {

        mygrid.clearAll();
        mygrid.load("Handler1.ashx/?type=RoleGridData",
        function () {  //loading data to the grid

        }, "json");


    }
    var success, fail;
    function ExecuteSave(methodArguments) {

        success = 0, fail = 0;

        $.ajax({

            type: "POST",

            async: false,

            url: "WebFormSaveGridWithLoadingPanel.aspx" + "/" + "SaveTransaction",

            data: methodArguments,

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: alertSuccess,

            fail: alertFail

        });

    }

    function alertSuccess(result) {

        //alert(result);

        success++;

    }


    function alertFail(result) {

        //alert(result);

        fail++;

    }


</script>

<div id="form_container" style="height: 32px"></div>


<div>
    <table style="width: 100%">
        <tr>
            <td>
                <div id="gridbox" style="width: 100%; height: 400px;"></div>
            </td>
        </tr>
        <tr>
            <td>

                <div id="pagingbox"></div>
            </td>
        </tr>
    </table>
</div>

.CS

Any way to show loading panel? Thank you.

Andrei · March 14, 2016, 10:09am

Hi

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you don’t want to share your demo here for any reasons - you can send it to support@dhtmlx.com, if so - please include link to this forum topic.

If you’re using PRO Edition please send your demo to support@dhtmlx.com

eiwai · March 15, 2016, 6:00am

Hi Andrei,

I sent demo to support@dhtmlx.com .

I am hoping to hear from you soon.

Thank you.

Andrei · March 16, 2016, 3:17pm

Hi

We haven’t received it. You can try to upload it to you srever and send us link?

eiwai · March 21, 2016, 1:17am

Dear Andrei,

Do you mean you didn’t receive my email at all? I sent to support@dhtmlx.com with the subject header “Show Loading Panel when Save form” . I uploaded to dropbox and sent the link again. I can’t place the link here because I am using pro version. Any other way to send the demo?

Thank you.