Adding Client-Side events to DevExpress ASP.Net controls

I have been involved in a ASP.Net project recently and I have implemented it using the awesome DevExpress ASP.Net controls. In this post I would like to show you how to use the client-side events that can make the user experience of your web application for the end user much better.We do avoid unnecessary page flickering and postbacks.All this functionality is possible through the magic of Ajax and Javascript.I am not going to cover Ajax and Javascript on this post.

With the DevExpress ASP.net controls we have a Client Side Events Editor where we can hook our JavaScript code to the specific client side events for the web server control.

Before you move on with this example you must complete all the steps of this post.We need to have a ASPxGridView that displays some data from an SQL Server table.

1) I am going to add an ASPxPopupMenu control on the default.aspx page.When the user right-clicks on the header of each column of the grid a pop up menu will appear with options Sort Ascending,Sort  Descending,No Sort.I will do that by using client side events.

2) Set the ASPxPopupMenu's ClientInstanceName to rightHeaderMenu

3) We need to add items to the Items collection of the ASPxPopupMenu control. We need to add 3 items. Have a look at the picture below

 

4) We need to set the ASPxPopupMenuPopAction to RightMouseClick

5) Now we need to write some code that will override the default right-click behavior when the user right-clicks on the grid's column headers.Choose the ASPxGridView control and from the Smart Tag click Client-Side Events and in the new window that appears, select the ContextMenu event and type the code as shown in the picture below


 

If the user right-clicks on the headers of the columns of the grid the new context menu will appear.

6) Now we need to write some Javascript code for the specific tasks (Sort Ascending,Sort Descending,No Sort).Choose the ASPxPopupMenu control and from the Smart Tag click Client-Side Events and in the new window that appears, select the ItemClick event and type the code as shown in the picture below

 

 


7) Build and run your application.

Have a look at the picture below to see what happens in my case when I run my application 

 

Hopefully you have witnessed how easy it is to add client side functionality using the ASP.Net DevExpress controls and enhance user experience.

Hope it helps!!! 

1 Comment

Comments have been disabled for this content.