DMXzone Colorpicker Manual

Advanced: Filter Ajax Datagrid by color using DMxzone Colorpicker Behaviors

In this tutorial we will show you how to filter Ajax Datagrid by color using DMxzone Colorpicker Behaviors.

*You can also check out the video.

How to do it

1. We've already inserted Ajax Datagrid on our page. It contains our product names, colors and descriptions. We want to filter Ajax Datagrid by the color selected with DMXzone Colorpicker.

2. In the DMXzone Colorpicker window (1), open the Color Format dropdown menu (2) and select the Color name item (3).

3. We're going to use the default swatches that you can select from the swatches tab. When you're done, click the OK button.

4. Click the Add/edit behaviors button in the property inspector and the DMXzone Behavior Connector window will open.
   
   

5. Select When color is selected from the events (1), choose Control Ajax DataGrid (2) and add the selected behavior (3).

6. In the Control AJAX DataGrid window, select the grid ID (1) and choose the Set Grid Filter item from the action menu (2).

7. We want to filter our Datagrid by the Color column therefor we add ##color## in the Enter value... text box. The ##color## mask returns the color that is selected in the Colorpicker.

8. When you're done, click the OK button and save your work for browser preview.

9. This is how easy it is to filter Ajax Datagrid by color using DMxzone Colorpicker Behaviors.