jqxgrid not displaying busy or loading indicator

Question

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

         };

Answer 1

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,

Alpesh