DotNetStories
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!!!
Comments have been disabled for this content.