Search and grid on same page

In this tutorial is demonstrated how to create a grid with search feature together in the same page.

Creating new grid

1. Create a new grid application using the products table.

2. Choose Fields Positioning option in the application menu and choose ProductID, ProductName, SupplierID, CategoryID, QuantityPerUnit, UnitPrice and UnitsInStock fields.


Changing settings to display grid and search on the same page

3. Back to the initial options “Grid Modules”


4. Set Yes to Use Iframe property.


Setting Search fields

5. Open the Search folder and click on “Advanced Search >> Select Fields”.


6. Choose SupplierID and CategoryID fields.

7. Click in SupplierID field.


8. Set Data Type property to Select.

9. Open the block Search Lookup.

10. Define the settings according to the image below.


11. Enable Onchange Submit option in Field’s Behavior block. With this option enabled, the search is executed automatically upon an option change.


12. Open CategoryID field settings, change Data Type property to Select, and perform the following changes.


13. Open Field’s Behavior block and configure it according to the image below.


14. Click the Run button on the toolbar.


Tutorials in the same category

Grid using infinite scroll with fixed height

In this tutorial we will be creating a Grid with infinite scroll with a fixed height. Creati...

Grid slide using infinite scroll

In this tutorial we will see how to create a Slide Grid / Report with Infinite Scroll to display im...

Grid using infinite scroll

1. We must create a new Grid application 2. Then we proceed to configure the Grid Module, wh...

Filter with buttons inline

In this tutorial we will see how to use the Filter and a Grid in the same window and the Filter but...

Comment this post