Creation of Grid With Simple and Advanced Search Enabled

In this lesson, you will learn how to create a grid with simple and advanced search enabled. Please refer to the Grid help article to learn more about the Grid and its properties.


  • Create a New Page, the way is created earlier in this tutorial.
  • Here page is created as Order Data.
  • Assign the Page to the Role.(Order Management).
  • Go to to the Role and click on the page that is just created.

  • Now go to File → Administration → Customize Page.
  • Click on the Order Data page in the left pane.
  • Click on the New button on the top left corner.
  • A new child item will be added.
  • Select the item type as layout container from the property pallet and click on save.
  • Click on layout container in the left pane and click on new button.
  • A new child item will be added to the layout container.
  • Select the item type as Grid from the property pallet.
  • Enter the Header as Order List.
  • Specify the Data Source as OrderCreation.
  • Enable Show Search On Header, Show Simple Search, Show Advanced Search properties of the grid.
  • If the already existing data has to be displayed by default, then enable the Auto Query property.
  • Now right click on the Grid item in the left Page Layout and click on Auto Populate.
  • Automatically all the fields that are there in that Data Source are populated in alphabetical order.
  • These fields can be rearranged by dragging and dropping them in the appropriate positions.
  • By default four buttons with appropriate button actions are created.
  • Once you are done with all the customization, click on Save button.


  • By Default the number format includes commas.
  • To avoid the comma seperated number format, need to specify ## in the Format property of Orderid field.
  • By default the booked flag is created as text field. To change it to check box.
  • Click on booked flag field in the left pane and change the item type to Checkbox.
  • Specify the mandatory values which are displayed in yellow.
    
  • Click on  Preview page which is on top right corner.
  • It will direct to the page.
  • Click on New button and a new row will be added in the grid.
  • Once you enter the data.
    
  • Click on save button.
  • To search for specific data.
  • Click on Search Icon and a popup is shown where you can specify the search criteria.
  • Click on Search button.

    This is how the grid looks after you enter the data

Location

101 California Street, Suite 2710
San Francisco, CA 94111


440 N. Wolfe Rd.
Sunnyvale, CA 94085


Office 11, 5th Floor, Building 9,
Mindspace IT Park
Hyderabad 500081

p: +1 (844) AT CloudIO (844-282-5683)
f: +1 (650) 300-5247 | e: sales@cloudio.io
© 2009, 2017 CloudIO Inc. | Terms of Use | Privacy Policy