DataGrid Part 4 - DataGrid Header

If you have not read the previous posts, you might want to start from the first post.

Again, referring to the code segments below, we are discuss the final step, DataGrid.refresh() in this post. As you might guess, this function eventually constructs the whole DataGrid.

DataGrid.setNoDataText("No data available");
DataGrid.addColumnStyle(new cls_datagrid.column("Header 1", "header_5", 50));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 2", "header_4", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 3", "header_3", 130));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 4", "header_2", 120));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 5", "header_1", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 6", "header_0", 140));
DataGrid.setDataSource(DataSource);
DataGrid.refresh();

The first thing to construct in DataGrid and it is also the part to be discussed in this post is the DataGrid header. As you might recall the screen of the DataGrid in the very first post as shown on the left.

The Header is referring to the top most of the DataGrid, which column header is placed i.e. "Header 1", "Header 2" and so on and so forth. The objective of this post is to build the basic header to hold the columns that defined and being added via the function DataGrid.addColumnStyle() above. The others functions like sorting & resizing will be discussed further in future posts.


The following diagram illustrate the construction of the DataGrid header in which consisted of multiple header view and splitter (green area) in between of them.

Header view is type pf cls_header_view, splitter is type pf cls_header_splitter and lastly the DataGrid header is type of a normal LinearLayout. Now we have few new variables in the DataGrid class

• mDataGridHeader of type LinearLayout to hold the entire header
• DATA_SOURCE of type cls_datatable in members_collection class to hold the data source supplied by setDataSource()

and couples of new functions

• setDataSource(), as mentioned above, a setter for variable DATA_SOURCE
• refresh(), the function to construct the whole DataGrid
• create(), the function to create DataGrid for the first time. Subsequent change on DataSource shall triggers refresh() to update the appearance of the DataGrid.
• initHeader() is to create the header appearance.

public class cls_datagrid extends LinearLayout{

 private Context mContext;
 private members_collection mc;
 private String strNoDataText;
 private LinearLayout mDataGridHeader;

 class members_collection{
  public ArrayList<column> COLUMN_STYLE;
  public cls_datatable DATA_SOURCE;
 }

 public static class column{
  
  private String strColumnName;
  private String strFieldName;
  private int intWidth;
  private int intIndex;
  
  public column(String DisplayName, String FieldName, int width)
  {
   strColumnName = DisplayName;
   strFieldName = FieldName;
   intWidth = width;
  }
  
  public void setIndex(int index)
  {
   intIndex = index;
  }
  
  public int getIndex()
  {
   return intIndex;
  }
  
  public String getColumnName()
  {
   return strColumnName;
  }
  
  public String getFieldName()
  {
   return strFieldName;
  }
  
  public int getWitdh()
  {
   return intWidth;
  }
  
  public void setWidth(int width){
   intWidth = width;
  }
 }

 public cls_datagrid(Context context , AttributeSet attrs) throws Exception {        
  super(context, attrs);
  setOrientation(VERTICAL);
  mContext = context;        
  mc = new members_collection();
  mc.COLUMN_STYLE = new ArrayList<column>();
 }

 public void addColumnStyle(column columnStyle)
 {
  mc.COLUMN_STYLE.add(columnStyle);
 }

 public void setNoDataText(String strText)
 {
  strNoDataText = strText;
 }

 public void refresh()
 {
  if(mDataGridHeader == null)create();
 }

 public void create()
 {
  mDataGridHeader = new LinearLayout(mContext);
  mDataGridHeader.setOrientation(LinearLayout.HORIZONTAL);

  initHeader();
  addView(mDataGridHeader);
 }

 private void initHeader()
 {
  cls_spliter_view Spliter;
  cls_header_view HeaderView;
  int intCellSpliter = 0;
  
  for(int i = 0; i < mc.COLUMN_STYLE.size(); i++)
  {  
   HeaderView = new cls_header_view(getContext(), mc);
   HeaderView.setText((mc.COLUMN_STYLE.get(i)).getColumnName());
   HeaderView.setTag(mc.COLUMN_STYLE.get(i));
   HeaderView.setWidth(mc.COLUMN_STYLE.get(i).getWitdh());
   mDataGridHeader.addView(HeaderView, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
      
   if(intCellSpliter < mc.COLUMN_STYLE.size())
   {
    Spliter = new cls_spliter_view(getContext(), mc, i);
    mDataGridHeader.addView(Spliter,new LinearLayout.LayoutParams(5,5));
    intCellSpliter++;
   }
  }
 }

 public void setDataSource(cls_datatable data)
 {
  mc.DATA_SOURCE = data;
 }

}

There are couple of things to note.

• refresh() seems doesn't make sense at this moment but others features will be incorporated in this function soon
• create() basically initialize the mDataGridHeader and all the rest of the task of constructing the header left to initHeader(). Again, this function seems doesn't make sense at this stage, more functions will be placed here soon.
• In initHeader(), there is a loop based on the size of the mc.COLUMN_STYLE, HeaderView and Splitter will added into the mDataGridHeader in the sequence of HeaderView,Splitter and again HeaderView.

Finally, the definition of cls_header_view class and cls_splitter_view

class cls_header_view extends TextView{

 private cls_datagrid.members_collection  mc;
 
 public cls_header_view(Context context, cls_datagrid.members_collection mc) {
  super(context);
  this.mc = mc; 
  setBackgroundColor(Color.BLACK);
  setTextSize(16);
  setPadding(5, 3, 5, 3);
  setSingleLine(true);
  setGravity(android.view.Gravity.CENTER_VERTICAL);
 }
}

class cls_spliter_view extends TextView{

 private cls_datagrid.members_collection mc;
 private int index;
 
 public cls_spliter_view(Context context, cls_datagrid.members_collection mc, int intIndex) {
  super(context);
  this.mc = mc;
  this.setOrientation(VERTICAL);
  setIndex(intIndex);
 }

 public void setIndex(int index){
  this.index = index;
 }
 
 public int getIndex()
 {
  return index;
 }  
}
  

Both of them look quite primitive right now but there are couple of things to be added into it soon.

Next, DataGrid Part 5 - Customized ListView as Table