Learn more at devexpress.com

Copyright © 2008 Developer Express Inc

ALL RIGHTS RESERVED

ASP.NET Grid – How to Create Custom Command Buttons

In addition to custom themes and cell templates, the ASPxGridView allows you to customize the grid’s

default buttons to perform different actions based on you and your customer’s needs.

In this lesson, you will learn how to create and customize a custom command button at design-time. We

will then use that custom button to initiate a custom callback at runtime and apply a filter criterion.

So let’s get started…

1. I’ll start with an ASP.NET Application that has an ASPxGridView control bound to an Access Data

Source.

2. The Access Data Source is bound to a set of columns within the “Customers” Table of the

Northwind Sample Database.

3. First, I’ll enable Inserting and Filtering on the grid.

4. To do this, I invoke its smart tag and check the “Enable Inserting” and “Enable Filtering” boxes.

5. You can see the grid update accordingly.

6. Next I’m going to create a custom command column.

7. From the grid’s smart tag, I invoke the Columns Editor.

8. Here, I create you can see Command Column created at index ‘0’.

9. First, let’s replace the “New” link with an image.

10. I select the column and set its ButtonType property to Image.

11. Then I expand its NewButton and Image property nodes.

12. I set the image URL to an alpha-channel PNG file that I have copied to the website earlier.

13. I manually set the Height and Width.

Learn more at devexpress.com

Copyright © 2008 Developer Express Inc

ALL RIGHTS RESERVED

14. And finally, the AlternateText property which will be displayed as a tooltip at runtime.

15. I will repeat the same steps for the ClearFilterButton property.

16. While these aren’t necessary for this example, it is performed to demonstrate how easily you

can replace the default command links of the ASPxGridView with buttons and images of your

own.

17. I click ok to close the Editor.

18. I switch to the ASP.NET Source View.

19. I’m now going to create a Custom Command Button and use it to apply a default filter criteria to

the grid.

20. Within the GridViewCommandColumn element, I add a CustomButtons collection.

21. Here, I will add a custom button and set its ID to “cbFilter” so that I can access it from code later

on.

22. I will also set its Text property and display it within the FilterRow of the column.

23. Now I need to specify an image for this custom button.

24. I select another image I have previously copied to the project.

25. I run the application.

<CustomButtons>

<dxwgv:GridViewCommandColumnCustomButton ID="cbFilter"

Text="Apply Default Filter"

Visibility="FilterRow">

<Image Url="Images/filter-16x16.png" Width="16px"

Height="16px" />

</dxwgv:GridViewCommandColumnCustomButton>

</CustomButtons>

Learn more at devexpress.com

Copyright © 2008 Developer Express Inc

ALL RIGHTS RESERVED

26. You can see that the image buttons are showing up on the grid.

27. If I click on the Filter Custom Button we just created, you can see that a callback is performed

but no changes are made to the grid.

28. I close Internet Explorer and return to Visual Studio.

29. I switch to Design View.

30. I select the ASPxGridView and create a handler for its CustomButtonCallback event.

31. This event is raised every time a custom button is clicked.

32. First, I’ll add a reference to the DevExpress.Web.ASPxGridView namespace.

33. Within the event handler, I’ll check to see which custom button has been pressed.

34. If it is not the “cbFilter” button, no action is taken.

35. Then I’ll set the FilterExpression method of the grid control to display all entries that have the

word “Inside” within their “Title” column.

36. And I’m done!

37. I run the application again.

if (e.ButtonID != "cbFilter") return;

ASPxGridView grid = sender as ASPxGridView;

grid.FilterExpression = "[Title] like '%Inside%'";

Learn more at devexpress.com

Copyright © 2008 Developer Express Inc

ALL RIGHTS RESERVED

38. I click on the custom button within the filter row and a criterion is applied to only display the

entry with the word “Inside” in its “Title” column.

39. I can click on the clear filter icon to remove the default filter.

For more information, please refer to the ASPxGridView Documentation

(http://www.devexpress.com/Help/?document=ASPxGridView).

Thanks for watching and thank you for choosing DevExpress!