Expandable Table View

Expandable Table View

Download PDF

Expandable Table View

Expandable Tableview is a tableview that “allows” its cells to expand and collapse, showing and hiding that way other cells that in any other case would be always visible. Creating expandable table views is a nice alternative when it’s required to gather simple data, or to display on-demand information to users.


Configure.IT brings you this custom control with all the features required.

    Keywords:
  • expandable table
  • tableview expand collapse
  • expand cell on tap
  • expand collapse

Properties

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    Initial Open Section Index

    This property is for setting index of section that should be opened initially.

    Row Animation
    Row animation properties
    Should Show All Opened Sections

    This property is for enabling multiple expandable sections. If this property is enabled user can open multiple sections else only one section can be opened at a time i.e, if a sectioned is opened previous open section will be closed.

    Expand Button Identifier

    This property is for setting "Object ID" of control on tapping which, expandable table section will be opened/closed.

    Dynamic Height Enable

    Enables dynamic height for Expandable Table View control 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

    Sets the web service key from data received from web server, based on which sections classification should be done.

    Section Header View ID

    Sets "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.

    Indexing Enable

    This property enables indexing. Works only if "Sections Enable" property is enabled.

    Should Index Titles Match Section Titles

    Displays index titles same as sectional titles. This works only if "Sections Enable" and "Indexing Enable" properties are enabled.

    page token Id

    An API response parameter indicating whether there are any records available to be fetched in next page(batch). It's value should be "1" if records are available in next batch, else "0".

    Load More View Id

    Sets "Object ID" of control, which is added as footer of Expandable Table View, to indicate that next set of rows are being loading.

    User Interaction is Required For Page Load

    Enables user interaction for loading next page of rows or cell in Expandable Table View. Enabling this property will load the next set of rows only if user taps footer that appears after scrolling to the bottom of table or grid view else next set of rows will be loaded when user scrolls table or grid view till bottom.

    Disable Sorting

    This property disables sorting of sections associated with Expandable 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.

    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 Expandable Table View control.

    Swipe delete enable key

    Sets key name which corresponds to a value that specifies whether swipe delete should be enabled on a specific row or not.

    Swipe Delete Button Title

    Sets the title of delete button which appears on swipe of cell.

    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.

    Table Footer View Id

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

  • Advanced
    PARAMETER
    DESCRIPTION
    Allows Selection

    A Boolean value that determines whether users can select a row. If the value of this property is YES (the default), users can select rows. If you set it to NO, they cannot select rows. Setting this property affects cell selection only when the Expandable Table View is not in editing mode.

    Allows Selection During Editing

    A Boolean value that determines whether users can select cells while the Expandable Table View is in editing mode. If the value of this property is YES, users can select rows during editing. The default value is NO.

    Section Index Minimum Display Row Count

    The number of table rows at which to display the index list on the right edge of the table.

    Allows Multiple Selection During Editing

    A Boolean value that controls whether users can select more than one cell simultaneously in editing mode.The default value of this property is NO. If you set it to YES, check marks appear next to selected rows in editing mode.

  • Display
    PARAMETER
    DESCRIPTION
    Row Height

    Sets height for the rows (cells) of Expandable Table View.

    Section Header Height

    Sets height for Section Header of the Expandable Table View.

    Section Footer Height

    Sets height for Section Footer of the Expandable Table View.

    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.

    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.

    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 Expandable Table View.

    Seperator Height

    This property enables you to set the height of separator for the table cells in the Table View.

  • 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

    Space 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.

  • Row Animation
    PARAMETER
    DESCRIPTION
    Enable Row Animation

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

    Animate To Right

    Sets Table 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 Table View cells tilt backwards. This works only if "Enable Row Animation" is enabled and "Animation Type" property is set to "Tilt".

    Row Animation Type

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

    Row Animation Start Position

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

    Animation Duration

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

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Expandable Table View.

    YPos

    Sets the Y position of the Expandable Table View.

    Width

    Sets the width of the Expandable Table View.

    Height

    Sets the height of the Expandable Table View.

    Object ID

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

    Object Parent ID

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

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

    Key To DataSource

    Web service key which will be used as data source for control

    Separator Style

    The style for table cells used as separators.

    Separator Color

    The color of separator rows in the table view.

    Cell View Id

    This property is for setting identifier of Table View Cell or View to be shown as rows for Table View control or cells 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 defines 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).

  • Hidden
    PARAMETER
    DESCRIPTION
    Allows Multiple Selection
    A Boolean value that determines whether users can select more than one row outside of editing mode.
  • 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 Expandable Table 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 picker
    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 picker
    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.

Actions

  • Load

    This event is triggered on load Expandable Table View. Hence any action can be defined [for eg: when a Table 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 Table View control.

  • Table Select Row

    This event is triggered when a row on Expandable Table 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 Pull Refresh

    This event is triggered when Expandable Table View is pulled down to refresh data. So the action to be performed when Table View is pulled down,(usually "API Call" action to refresh the data of Table View) can be configured in "Table Pull Refresh" event listed in ”ACTION(S)” tab of Table View control.

  • Table Load Next Page

    Pagination is used to show large data on a Table View or Grid View in an effective way.There are some advantage of using pagination in your app :
    1.Load relatively less amount of data on startup. This increases startup loading speed and populates the table with data faster.
    2.Whenever the user scrolls to bottom of UITableView visible cell, the app automatically starts fetching for the next batch of data.

    So you need to configure this event for implementing pagination for a control. This event is triggered when user scrolls to last cell of Table View or Grid View. So actions you want to perform when user scrolls up to load next set of data (WSCall action for loading next set of data) can be configured in "Table Load Next Page" event listed in "ACTION(S)" tab of "Table View" or "Grid View" controls.

  • Table Swipe Delete

    This event is triggered when user taps a delete button on table view row, that appears after swiping. (Note: Configuring this action will enable swipe delete feature automatically in tableview). Any actions you want to perform on Table cell can be configured in "Table Swipe Delete" event listed in "ACTION(S)" tab of Expandable Table View control.

  • Loaded Susscessfully

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

  • Table Cell Will Load

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

Remarks

  • Expand Button Identifier

    You need to set “Expand Button Identifier” to button on tapping which section should be opened. Button you set for this property should be a sub view of Section Header of Table View.

  • Animation effects

    This feature lets you animate rows while user scrolls Expandable Table View to display them. Use “Enable Row Animation” property to enable row 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 Expandable Table 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 Table View control’s Property-Action window to add this feature.

  • Table View with Paging

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

  • Table View with Swipe Delete

    This feature lets you add delete button to Table row when user swipes on it. You need to configure “Table Swipe Delete” event for adding this feature. You can configure actions to delete row from Table View (“Change Table Properties” >> “delete” action) and data entry related to that row (“API Call” action) in “Table Swipe Delete” event, which is triggered when user taps on delete button.

  • Dynamic Height for Table

    Table View height is set to dynamic by enabling “Dynamic Height Enable” property, i.e, Table View height will be set in run time based on number of rows it contains. Table height will be set by adding height of each row. It will be set to a value minimum of row height sum and height set in “Height” property of Table View.

  • Indexing Table

    This feature allows you add indexing to table with sections, which makes traversing through sections easier. By adding an index scrolling, user is allowed to access a particular section in a table instantly, without scrolling through each section. You can add indexing to table by using “Indexing Enable” property. Table index customisation properties include, Should Index Titles Match Section Titles, Section Index Background Color, Section Index Minimum Display Row Count, Section Index Color and Section Index Tracking Background Color.