jqxgrid not displaying busy or loading indicator

[alpeshParticipant]

Hello,
I am using jqxgrid and I have below code snippet and i want to display load indicator on button click which calls the Ajax method and hide it on the success method or anyway other to display it as i need to show loading indicator from the time request made till i get the data

$("#btnSearch").bind('click', function () {

        //show indicator here
        LoadLookUpSearchGrid();
    }

    //Ajax call to fetch data
    function LoadLookUpSearchGrid() {
        var filterRows = getGridRows();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            async: false,
            cache: false,
            url: 'AddEditView.aspx/LoadLookUpSearchGrid',
            data: JSON.stringify({
                FilterType: $('select#ddlFilterType').val(),
                Id: $("#txtId").val(),
                Name: $("#txtName").val(),
                SearchText: '',
                FilterRows: filterGridRows
            }),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {

                var source = data.d;
                SetSearchFields($('select#ddlFilterType option:selected').text(), source);

            },
            error: function (err) {
                alert(err.text + " : " + err.status);
            }
        });
    };
    //source object to format data 
    function SetSearchFields(fieldName, source) {
        var columns;

        if (fieldName == "Operating Company") {

            source = {
                datatype: "xml",
                datafields: [{
                    name: 'COMPANY',
                    type: 'string'
                }, {
                    name: 'DESCR',
                    type: 'string'
                }],
                async: false,
                root: "Company",
                localdata: source
            };
            columns = [{
                text: 'OPCO ID',
                dataField: 'COMPANY',
                width: '30%'
            }, {
                text: 'Company Name',
                dataField: 'DESCR',
                width: '65%'
            }];

        }

        lookupSearchResultGrid(source, columns, fieldName);
    }

    //adaptor to fill source and bind grid
    function lookupSearchResultGrid(source, columns, fieldName) {

        var searchViewGridDataAdapter = new $.jqx.dataAdapter(source);

        $("#divLookupSearch").jqxGrid({
            width: '100%',
            source: searchViewGridDataAdapter,
            theme: theme,
            sortable: true,
            pageable: true,
            autoheight: true,
            selectionmode: 'checkbox',
            columns: columns
        });
        //hide indicator here on on success method of ajax call

    };

Could you please help us ?

Thanks.

[DimitarParticipant]

Hello alpesh,

On the click of the button call showloadelement and in the Ajax call success callback function call hideloadelement.

$("#btnSearch").bind('click', function () {
        $('#divLookupSearch').jqxGrid('showloadelement');
        //show indicator here
        LoadLookUpSearchGrid();
    }

...

            success: function (data) {
                $('#jqxGrid').jqxGrid('hideloadelement');
                var source = data.d;
                SetSearchFields($('select#ddlFilterType option:selected').text(), source);

            },

...

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts