Show Dev Express Loading Panel using ASPxComboBox

I had a case where I wanted to show an ASPxLoadingPanel  when the user changed the the selection.  On a command button this is easy you just add a OnClientClick="ShowLoadingPanel()".

But since a Drop Down you need to show the loading panel on the Change Event DevExpress does not handle that unless you are doing a call back. In this case I had an 
ASPxComboBox on a page with an Update Panel and a Grid.

To get around this I added the following JavaScript in the C# code behind:

 BtnRefresh.Attributes.Add("onclick", "javascript:ShowLoadingPanel();");
Which calls...and shows the spinner.
    function ShowLoadingPanel() {     
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_initializeRequest(prm_InitializeRequest);
         prm.add_endRequest(prm_EndRequest);
     }
     function prm_InitializeRequest(sender, args) {
         LoadPnlAcctGridDev.Show();
     }
     function prm_EndRequest(sender, args) {
         LoadPnlAcctGridDev.Hide();
     }
Once the Grid is reloaded the spinner is gone...

Download SQL Server Northwind Database .BAK File

Download the SQL Server Northwind Database backup from from Codeplex or by clicking the link below.

Download NORTHWIND.Bak.Zip

Easily Change the Style of DevExpress Grids to Match Bootstrap

All of the sites I build now use Bootstrap and DevExpress Grids. 

I wanted to style the DevExpress Grid to look more like Bootstrap. This method is not 100% but close enough for the purposes of the grids I have been using.

Add the following style and Javascript to any page / control that has a DevExpress Grid.


Here is a Before / After View of a grid
BEFORE:

AFTER: