Grid View

Grid View

Download PDF

Grid View

Grid View acts as a Group that displays items in a two-dimensional, scrollable grid. A grid view or a datagrid is a graphical control element that presents a tabular view of data.


Configure.IT brings you this control with the data being displayed as per your requirement. You can have number of rows and columns as desired. Configure the Grid cell where you can have Image, Button, Label, etc within and find the data being populated. After all, the way you display your data, Matters! Hence explore and give that finest User Interface and Experience.

    Keywords:
  • grid computing
  • data grid
  • image grid
  • icon grid
  • gridview

Properties

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a control.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a control.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which control in its normal state has to be rotated. Possible values for this property are -360 to 360.

  • PARAMETER
    DESCRIPTION
    Background
    Used to set the background color to the object.
  • Display
    PARAMETER
    DESCRIPTION
    Indicator Style

    Set the Indicator style from Default, Black or White. The style of the scroll indicators.

    Shows Horizontal Scroll Indicator

    A Boolean value that manages visibility of horizontal scroll indicator visible while scrolling horizontally.

    Shows Vertical Scroll Indicator

    A Boolean value that manages visibility of vertical scroll indicator visible while scrolling vertically.

    Scroll Enabled

    Enable scrolling with this option.A Boolean value that determines whether scrolling is enabled.

    Paging Enabled

    A Boolean value that determines whether paging is enabled for the scroll view.

    Directional Lock Enabled

    A Boolean value that determines whether scrolling is disabled in a particular direction.

    Bounces

    A Boolean value that controls whether the scroll view bounces past the edge of content and back again.

    Always Bounce Horizontal

    A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.

    Always Bounce Vertical

    A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content view.

    Minimum Zoom Scale

    A floating-point value that specifies the minimum scale factor that can be applied to the scroll view's content.

    Maximum Zoom Scale

    A floating-point value that specifies the maximum scale factor that can be applied to the scroll view's content.

    Zoom Bounces

    A Boolean value that determines whether the scroll view animates the content scaling when the scaling exceeds the maximum or minimum limits.

    Delays Content Touches

    A Boolean value that determines whether the scroll view delays the handling of touch-down gestures.

    Can Cancel Content Touches

    A Boolean value that controls whether touches in the content view always lead to tracking.

    User Interaction Enabled

    Enables user interaction i.e, control responds to user touches.

    Alpha

    This is for setting transparency of control. ranges from 0 to 1.

    Background Color

    Used to set the background color to the Grid View.

  • Row Animation
    PARAMETER
    DESCRIPTION
    Enable Row Animation

    Enabling this property will animate cells loading while scrolling Grid View.

    Animate To Right

    Sets Grid View cells Wave, Fan or Curl animation direction left to right of the screen. This works only if "Enable Row Animation" is enabled and "Animation Type" property is set to "Wave", "Fan" or "Curl".

    Animate To Back

    Sets animating Grid View cells tilt backwards. This works only if "Enable Row Animation" is enabled and "Animation Type" property is set to "Tilt".

    Row Animation Start Position
    This property is for setting start position on screen for row animation in percentage (1 to 100). Works only if "Row Animation Type" is set to "Flip", "Wave" or "Fan" animation and "Enable Row Animation" property is enabled.
    Row Animation Type

    Set the Animation effects for rows loading, from the different available options as curl, fade, flip, etc.

    Animation Duration

    Sets the time duration for Animation. Works only if "Enable Row Animation" property is enabled.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Row Animation
    Row animation properties
    Padding

    Used to set space between two tiles.

    Space Between Grid Tiles

    Sets the space between Grid Tiles.

    Dynamic Height Enable

    This property is for enabling dynamic height for Grid View based on number of cells. Maximum height would be the value set in "Height" property.

    Sections Enable
    This property is for enabling sections. Works only if proper key is set in "Section Key" property.
    Section Key

    This property is for setting web service key name based on whose value we have to group data source into sections. Works only if "Sections Enable" property is enabled.

    Section Header View ID

    This property is for setting "Object ID" of view to be shown as header of sections. Works only if "Sections Enable" property is set.

    Section Header Color

    Sets the background color for header of sections. Works only if "Sections Enable" property is set.

    Section Header Background Image

    Sets the background image for header of sections. Works only if "Sections Enable" property is set.

    Sectional Data is Single Charcter

    Displays single character in sectional header and sections will be grouped based on alphabet.

    Section Corner Radius Enable

    Enables cornered border for sections. Works only if "Border Corner Radius" property is set.

    page token Id

    A WS key name based on which paging will be done (ex: next_page)

    Load More View Id

    This property is for setting "Object ID" of view that has to be shown as footer for Table or Grid view when user scrolls down to the end for loading next page. Works only if "page token Id" property is set, "Paging Enable" property is enabled and "Table Load Next Page" event is configured.

    Empty Data Representation View Id

    This property sets "Object ID" of control which has to be shown when there is no data available to show in Grid View control.

    Disable Sorting

    This property disables sorting of sections associated with Table View, if "Sections Enable" and "Section Key" properties are set. If this property is enabled, sections will not be sorted. Else sections will be sorted based on the key set in "Section Key" property.

    Key Name To Sort

    Sets the web service key based on which table view data has to be sorted.

    Enable Deletion On Long Press

    This property is for enabling single tile deletion on long press. If this property is enabled when user long presses on a tile delete button would appear on that tiles and user can delete that tile by tapping on delete button.

    Enable Deletion Of All Tiles on Long Press

    This property is for enabling multiple tile deletion on long press. If this property is enabled when user long presses on a tile, delete button would appear on all tiles and user can delete multiple tiles.

    Tile Delete Button Image

    This property is for setting image for delete button shown when long pressed on cell. Works only if "Enable Deletion Of All Tiles on Long Press" or "Enable Deletion On Long Press" property is enabled.

    Tile Delete Button X Offset

    This property is for setting delete button x position offset from grid view cell origin x position. Default value is -5 Used to set x offset of delete button. Works only if "Enable Deletion Of All Tiles on Long Press" or "Enable Deletion On Long Press" property is enabled.

    Tile Delete Button Y Offset

    This property is for setting delete button Y position offset from grid view cell origin Y position. Default value is -5 Used to set Y offset of delete button. Works only if "Enable Deletion Of All Tiles on Long Press" or "Enable Deletion On Long Press" property is enabled.

    Tile Normal Border Color

    This property is used to set border color for Grid View tiles in normal state.

    Tile Selected Border Color

    This property is used to set border color for selected Grid View tile.

    Single Selection View Id

    Sets "Object ID" of control, on whose click, you want to provide single selection.

    Multiple Selection View Id

    Sets "Object ID" of control, on whose click, you want to provide multiple selection.

    Multiple Selection Session Key

    This property sets name of the key with which selected values should be stored in session.

    Selection Keys

    This property is for setting "," separated keys you want to send to WS.

    Header View Id

    This property is for setting "Object ID" of View that should be shown as header when view is scrolled downwards. Works only if "Enable Vertical Navigation" property is enabled.

    Table Footer View Id

    This property for setting "Object ID" of view that has to be shown as sectional footer.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Grid View.

    YPos

    Sets the Y position of the Grid View.

    Width

    Sets the width of the Grid View.

    Height

    Sets the height of the Grid View.

    Object ID

    Sets unique identifier for the control. Grid View can be referenced with the name set in this property for configuration.

    Object Parent ID

    Set "Object ID" of Grid View which contains this control or can serve as parent.

    Key To DataSource

    Sets “key name to datasource” for a particular part of datasource.

    Cell View Id

    Set the identifier of Grid View Cell or View to be shown as rows for Grid View control.

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value define the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s)

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advance - Sets auto resizing with respect to superview, for Grid View.

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Horizontal

    Group of horizontal android default properties.

    Vertical

    Group of vertical android default properties.

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

  • Advanced
    PARAMETER
    DESCRIPTION
    Clips Subviews

    A Boolean value that determines whether subviews are confined to the bounds of the control.

  • Hidden
    PARAMETER
    DESCRIPTION

Actions

  • Load

    This event is triggered on load Grid View. Hence any action can be defined [for eg: when a Grid View loads like API Call to load data to be shown on cells] This can be configured in "LOAD" event listed under "Action(S)" tab of Grid View control.

  • Table Select Row

    This event is triggered when a row on Grid View is tapped. Any action to be defined when row is tapped can be configured in "Table Select Row" event listed in "ACTION(S)" tab of Table View controls.

  • Table Cell Will Load

    This event is triggered when cell of a Grid View is about to load. Any actions to be performed on Grid View cell load can be configured in "Table Cell Will Load" event listed under "ACTION(S)" tab of Grid View control.Note: This event is used for multiple cell configuration i.e, showing more than one kind of a cell in Grid View.

  • Loaded Susscessfully

    This event is triggered when all rows of Grid View are loaded completely. So any actions to be performed after all cells are loaded, can be configured in "Loaded Successfully" event listed under Grid View control.

  • Delete On Grid Item

    This event is triggered when an item of Grid View is deleted. So any actions to be performed after deeltion of item, can be configured in "Delete On Grid Item" event listed under Grid View control.

Remarks

  • Animation effects

    This feature lets you animate items while user scrolls Grid View to view them. Use “Enable Row Animation” property to enable item animation. You can select the type of animation from “Row Animation Type” property. Here you have wide range to choose from, such as Curl, Fade, Fan, Flip, Helix, Tilt, Wave where Curl is the default one. You can customize the animation using “Animation Duration”, “Row Animation Start Position”, “Animate To Right” and “Animate To Back” properties.

  • Pull to Refresh

    This  feature facilitates Grid View data to be refreshed when user pulls it down and releases. You need to configure “API Call ” action in “Table Pull Refresh” event under Grid View control’s Property-Action window to add this feature.

  • Grid View with Paging

    Pagination lets you load Grid View data in batches. This feature proves to be extremely useful when you need to show large data in Grid View. Using this you can load relatively less amount of data on startup. This increases startup loading speed and populates the grid with data, faster. To add this feature you need to configure “Trigger Data Source(API Call)” action in “Table Load Next Page” event under Grid View control’s Property-Action window.

  • Sectional Grid

    Sectional Grid View is for displaying Grid data divided into sections. You can configure sectional grid using, “Sections Enable” and “Section Key” properties. You can also customise sections using, “Section Header View ID”, “Section Header Color”, “Section Header Background Image”, “Sectional Data is Single Character” and “Section Corner Radius Enable” properties.

  • Grid View with item delete

    This feature lets you add delete button to grid view item when user long presses on it. You need to enable “Enable Delete On Long Press” or “Enable Deletion Of All Tiles On Long Press” property. Configure “Delete On Grid Item” event for performing any actions on deletion of grid item.

  • Dynamic Height for Grid View

    Grid View height is set to dynamic by enabling “Dynamic Height Enable” property,  i.e, Grid View height will be set in run time based on number of items it contains. Grid height will be set by adding height of each row or column of items(based on scroll direction enabled). It will be set to a value minimum of row height sum and height set in “Height” property of Grid View.

  • “No data” representation view

    Configure.IT provides you this feature of showing a view to indicate user that there is no data available to display using “Empty Data Representation View ID” property. You need to set control to “Empty Data Representation View ID” property, which you want to show when there is no data available to show in Grid View. This reduces the overhead of configuring “Change Object Properties” >> “Hidden” action explicitly by checking response of API.