Android Jetpack Android Datagrid

Android JetPack Android DataGrid

Android JetPack Android DataGrid

Table of contents

Summary...... 4

Introduction...... 8

System Requirements...... 13

Getting Started - Simple Example...... 16

Basic Android Project Setup...... 21

Adding the AndroidJetPack library...... 28

Adding Required Assets...... 31

Placing the Android DataGrid in your view...... 36

Summary And Code Sample...... 42

Common Configuration Options...... 45

Basic Configuration Options...... 48

Configuration Options - Filters...... 55

Configuration Options - Footers...... 60

Configuration Options - Paging...... 67

Configuration Options - Export...... 71

Configuration Options - Preferences/Settings...... 75

Configuration Options – Customizing Cell Content...... 80

Stlying and Theming...... 88

Styling Using Markup and API...... 91

Beyond the Basics...... 109

Grid Architecture...... 112

Binding to Data...... 117

Flat Data - Client Mode...... 118

Flat Data - Server Mode...... 120

Hierarchical Data - Client Mode...... 122

Hierarchical Data - Server Mode...... 124

XML Data...... 126

Cell Text & Label Functions...... 128

Cell Formatting...... 130

Editing Items...... 132

Custom Item Editors...... 133

Configuration - XML vs API...... 135

XML Configuration...... 138

API Configuration...... 142

Event Handlers and Function Callbacks...... 146

Events...... 149

Function Callbacks...... 157

Cells and Renderers...... 162

Recycling, Virtualization and Buffering...... 166

Custom Renderers...... 170

Class Factories...... 175

Filter Options - Deep Dive...... 179

Filter Page Sort Mode...... 182

Built in filter controls...... 186

Built in filter control options...... 189

Text Input Filter...... 193

Multi Select Combo Box Filter...... 197

Date Combo Box Filter...... 200

Other Controls...... 203

Anatomy of a filter control...... 206

Sample Custom Filter Control...... 221

External Filters and Filter Functions...... 224

Export Options - Deep Dive...... 227

Built in Exporters...... 230

Export with Server Paging...... 233

Custom Export Popup...... 236

Custom Exporter...... 239

Preference Persistence...... 241

Introduction...... 244

Built in features...... 247

Persisting Preferences on the Server...... 251

Customizing the Preference Popups...... 258

Hierarchical Grids...... 261

Hierarchical Grid Types...... 264

Grids with Inner Renderers...... 271

Dynamic Levels...... 274

Paging Options & Toolbar...... 279

Miscellaneous...... 282

Advanced Configuration Options – Single Level Grids...... 283

Advanced Configuration Options – Hierarchical Grids...... 289

Setting Column Widths...... 293

Localization...... 298

Selected Key Field...... 303

Next Steps & Further Reading...... 306

Summary

AndroidJetPack Android DataGrid (henceforth referred to as the grid) is a powerful DataGrid designed for the Android platform. It is built to render highly complex, Hierarchical/Nested as well as Flat Data in Android Mobile Applications, with a massive set of features Right out Of the Box. Inline Filters, Summary Footers, Fully Customizable Server/Client Paging, DataGrid Print, Excel Export, Word Export, and User Settings Persistence, Smooth Scroll, Nested hierarchical Tree/Child grids, Right Locked columns, built in Lazy Load support, and a whole lot more. A full list of features can be found here:

Introduction

Note: You can skip this section and get directly to the "Getting Started - Simple Example" topic if you are familiar with our Flex Products.

The Android DataGrid is a Native Java port of the Flexicious Ultimate DataGrid, which is the most powerful DataGrid component available for Flex application development. For those of you who are not familiar with flex, Flex is a highly productive, open source application framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and devices. It provides a modern, standards-based language and programming model that supports common design patterns suitable for developers from many backgrounds.

Why Android JetPack Android DataGrid?

Android DataGrid is built on top of the Android SDK: We leverage the underlying framework for a lot of things like dialog boxes, date pickers, item editors, as well as core concepts like component life-cycle management, display list management, event handling framework, and more. By leveraging the framework features for a lot of these dependencies, not only do we reduce the footprint of our Code base, but also make it easier for our customers to integrate our product into their systems, while at the same time benefiting from the many man months of effort that goes into developing these framework pieces.

A Feature set unmatched by any : At the time of this writing, there is no other product on the market that comes close to Android JetPack Android DataGrid in terms of features. The grid was specifically designed to handle very complex use cases that involve hierarchical data as well as complex interactions you can perform with such data sets. Some of the examples of such interactions include lazy loading child records that each hierarchical level, recursive selection, selection cascading and bubbling, virtual scroll, built-in support for drill up and drill down, built in support for in-line detail panels, in addition to integrating with regular DataGrid features like in-line filtering, paging, multiple columns sort, grouped as well as left and right locked columns, row span and column span, a number of selection modes like cell, row , multiple cell, multiple row, as well as customizable programmatic cell backgrounds contents borders and colors. The complete list of features is way too long to cover in this single post so please look at the features and the demos to get an idea of what's possible.

Highly Optimized: We have gone to great lengths to optimize every single piece of the rendering mechanism. We recycle renderers as you scroll in both directions horizontal as well as vertical. We draw just the visible area for all the sections of the DataGrid including headers footers filters the toolbar as well as the data area. This makes it possible for us to render very large record sets in a very short period of time.

Enterprise Ready, Proven, and Robust: Since the AndroidJetPack Android DataGrid has its roots in the Flexicious ultimate flex DataGrid; it automatically inherits years and years of development, testing, refining as well as the level of robustness that comes from being used in the most demanding enterprise applications ever built. For years flex has been the application development framework of choice for large organizations especially with the Java J2EE stack. There is good reason for it, because a number of the concepts that have been developed in the flex ecosystem make it a very attractive option as the UI technology of choice for large-scale applications. AndroidJetPack DataGrid benefits from inheriting all of these underlying concepts that are baked into its architecture.

Laser Sharp Focus: As a company, we have been making a living for years by providing our customers with the most powerful Flex DataGrid component money can buy. Today we are bringing that same level of polish to Android developers. We have a team of very talented developers and designers who have thought about the DataGrid component more than what should be considered healthy. We have pondered over use cases, argued over user interaction schematics, listened to our customers, refined and improved our product on basis of what their requirements are, and relentlessly re-factored, redesigned and redeveloped features until they achieve perfection. We're committed to constantly improving our product in pursuit of the highest level of quality.

Below are some of the features of the grid, with new ones being added with each release.

FEATURES

Basic DataGrid Features : Ability to organize information as rows and columns, with locked headers, Ability to Customize the appearance Rows and Columns, User Interactive, Draggable, Resizable, Sortable and Editable Columns, Keyboard Navigation and Accessibility Support.

In-line Filtering,with numerous built in Filter Controls, and extensible architecture to define your own.

Server and Client Paging, with a fully Customizable Pager UI.

Summary Footers, with fine-tuned control over Formula, Precision, Formatting, Placement and Rendering of Footers.

Ability toExport to Excel, Word, Text, XMLand other formats. Ability to plug in your own Exporters.

Preference Persistence(Ability for your end users to save viewing preferences, like column order, visibility, widths, filter criteria, print settings etc.)

Support forHierarchical DatawithSmooth ScrollingandNested Tree Grids

Ability to defineFully Lazy Loaded, Partially Lazy Loaded and Initial LoadedFlat as well as Hierarchical Data Grids.

Support forRow Span and Column Span.

Support forVirtual Scroll of Hierarchical Data.

A vast number of Business Scenarios supported out of the box:

Fully ConfigurableDrag and Drop

Multi Column Sort

Multi-Level,Grouped Column Headers

Single Cell, Single Row, Multiple Cell, Multiple RowSelection Modes.

Display of HomogeneousHierarchical Data(Single Set Of Columns)

Checkbox Selectionof data, with Tri State Checkbox Header

CustomizableLoading Animation

Smooth Scrolling

Display of HeterogeneousHierarchical Data(Multiple Sets Of Columns)

Display ofHeterogeneous Hierarchical Data(Multiple Sets Of Columns)

Ability to define paging, filtering and summary footers at each hierarchical level

Left and Right Lockedcolumns

Built inCascadingandBubblingof checkbox/row selection for hierarchical data

Built in Drill Down/Drill Up/Drill to of Hierarchical data

Toolbar action icons, with ability to define custom actions

Built in Ability to define initial sort values at any level

Built in Ability to show custom ToolTip with interactive content on hover over

Built in Ability to define custom logic that controls row selection, enabled, background, and border.

Built in Ability to Auto Adjust height based on rows, as well as prevent multiple scrollbars at hierarchical levels.

Programmatic control over which cells are editable, which rows are selectable, background, border and text colors of each cell.

Read write nested properties of complex objects

Context menu based copying of data rows

Ability to declaratively define Hand Cursors, Underline, truncateToFit, wordWrap on the columns

Ability to define various column width modes, like fitToContent, Percentage and Fixed, Automatic column width adjustment on basis of data

System Requirements

Android SDK
API Level 8+

Getting Started - Simple Example

In this section, we will begin with a small example.

As with any Android component, the AndroidJetPack Android DataGrid requires that you import the jar file you received as a part of the trial package or the licensed package to be included in the build path of your Android project. Sample Projects for both Eclipse ADT as well as Android Studio are available for download if you request a trial on our website.

The second thing would be to include the AndroidJetPack Android DataGrid in your view as a component. Finally, you would pass in the XML configuration as well as the data to render in the grid.

We will perform these steps in the next few examples. For the purpose of this demo, we are using Eclipse EDT, but the steps should be fairly consistent for Android Studio

Basic Android Project Setup

In this section, we will begin with a small example. Let's start with a new Android Project:

In the next steps, you leave the defaults

You can leave the defaults in all of the above screens, and click on finish.

This should generate a project, along with a MainActivity that gets launched when your application launches. Obviously, you can change all of these, but for the sake of this tutorial we will leave everything as is.

Adding the AndroidJetPack library

To be able to reference the AndroidJetPack Android DataGrid in your apps, you must add a reference to the jar file that contains it. You will get this file when you request a download or purchase a license.

This library is called and should be placed in your libs folder as shown below.

Once you do this, you should be able to place the Android DataGrid in your view.

Adding Required Assets

The Android JetPack Android DataGrid depends on a number of assets that need to be imported by the client project. There are two advantages to this

You can remove the assets you don't need

You can easily replace assets like images, themes, etc to match your styles without having to recompile the core library jar.

There are a few different categories of such assets:

Images used in the toolbar

The default style definitions (default_styles.json)

The Layouts for the various popups

• The Export Popup
• The Settings Popup
• The Save Settings Popup
• The Custom Date Range Picker Popup

All of the above are present in the demo console that you receive when you request a trial or purchase a license.

That said, let's import these assets. From the demo console project, copy the following files to the folders mentioned below:

1) In /MySampleApp/res/raw/ drop the following files

/FlexiciousAndroidConsole/res/raw/flxs_default_styles.json

2) In /MySampleApp/res/layout/ drop the following files (all layouts starting with flxs)

/FlexiciousAndroidConsole/res/layout/flxs_date_picker_dialog.xml to

/FlexiciousAndroidConsole/res/layout/flxs_export_dialog.xml

/FlexiciousAndroidConsole/res/layout/flxs_save_settings_dialog.xml

/FlexiciousAndroidConsole/res/layout/flxs_settings_dialog.xml

/FlexiciousAndroidConsole/res/layout/flxs_sort_dialog.xml

3) In /MySampleApp/res/drawable-hdpi, drop the following files (all images starting with flxs):

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_clearfilter.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_collapseall.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_collapseone.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_dropdown.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_expandall.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_expandone.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_export.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_filter.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_filtershowhide.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_firstpage.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_footershowhide.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_grey_checked_checkbox.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_grey_partially_selected_checkbox.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_grey_unchecked_checkbox.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_headerbackground.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_lastpage.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_nextpage.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_opensettings.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_pagerbackground.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_pdf.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_prevpage.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_print.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_radio_button_selected.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_radio_button_unselected.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sampledown.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sampleinfo.gif

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_samplesearch.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sampleup.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_savesettings.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_settings.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sort.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sortarrow.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_sortarrowdesc.png

/FlexiciousAndroidConsole/res/drawable-hdpi/flxs_word.png

4) Finally, you will also need to add the Activity definitions for the popups to your manifest, since these are used by the grid to launch the respective screens.

activity

android:name="com.flexicious.screens.ExportActivity"

android:windowSoftInputMode="stateHidden"

android:theme="@android:style/Theme.Dialog"

</activity

activity

android:name="com.flexicious.screens.SaveSettingsActivity"

android:windowSoftInputMode="stateHidden"

android:theme="@android:style/Theme.Dialog"

</activity

activity

android:name="com.flexicious.screens.SettingsActivity"

android:windowSoftInputMode="stateHidden"

android:theme="@android:style/Theme.Dialog"

</activity

activity

android:name="com.flexicious.screens.SortActivity"

android:windowSoftInputMode="stateHidden"

android:theme="@android:style/Theme.Dialog"

</activity

activity

android:name="com.flexicious.screens.DatePickerActivity"

android:windowSoftInputMode="stateHidden"

android:theme="@android:style/Theme.Dialog"

</activity

5) Please note, the trial version of the software connects to our servers to check validity (the licensed version do not). So for the trial version, you will need the following addition to your AndroidManifest.xml

uses-permissionandroid:name="android.permission.INTERNET"</uses-permission

uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"</uses-permission

6) Once everything is added, your manifest should look something like below:

<?xmlversion="1.0"encoding="utf-8"?>

manifestxmlns:android="

package="com.flexicious.mysampleapp"

android:versionCode="1"

android:versionName="1.0"

uses-permissionandroid:name="android.permission.INTERNET"

</uses-permission

uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"

</uses-permission

uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="19"/>

application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme"

activity

android:name="com.flexicious.mysampleapp.MainActivity"

android:label="@string/app_name"

intent-filter

actionandroid:name="android.intent.action.MAIN"/>

categoryandroid:name="android.intent.category.LAUNCHER"/>

</intent-filter

</activity

activity

android:name="com.flexicious.screens.ExportActivity"

android:theme="@android:style/Theme.Dialog"

android:windowSoftInputMode="stateHidden"

</activity

activity

android:name="com.flexicious.screens.SaveSettingsActivity"

android:theme="@android:style/Theme.Dialog"

android:windowSoftInputMode="stateHidden"

</activity

activity

android:name="com.flexicious.screens.SettingsActivity"

android:theme="@android:style/Theme.Dialog"

android:windowSoftInputMode="stateHidden"

</activity

activity

android:name="com.flexicious.screens.SortActivity"

android:theme="@android:style/Theme.Dialog"

android:windowSoftInputMode="stateHidden"

</activity

activity

android:name="com.flexicious.screens.DatePickerActivity"

android:theme="@android:style/Theme.Dialog"

android:windowSoftInputMode="stateHidden"

</activity

</application

</manifest

Placing the Android DataGrid in your view

Once you have the library added to your Android project, and imported the required assets, you can reference it in your views. In our sample, the IDE created a Main Activity and a Fragment. We will add our DataGrid to the fragment. The way to do this is to define the markup for the grid in the layout of the fragment. This is very simple to do

RelativeLayoutxmlns:android="

xmlns:tools="

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"