One of the most powerful features of the Android DataGrid product is the ability to control the content of each cell that sits inside the grid. 

 Inside each cells is the actual component that renders the content of the cell. These are represented by the following properties on the column or the level

  •  
    • itemRenderer
    • headerRenderer
    • footerRenderer
    • pagerRenderer
    • filterRender
    • nextLevelRenderer


       The above properties point to class factories for item renderer instances that display the data for each item in the column. You can specify a ClassFactory custom item renderer component as the value of these properties. The default item renderer is a Label class, which displays the item data as text.


If specifying custom label text is not enough for your needs, you can use itemRenderers, which is a very powerful concept. Item Renderers are basically UIComponents that sit inside the various cells of the grid.  

In this example, we are going to specify a custom header renderer that renders the text vertically. This is what it will look like:

 



 

How do we do this? Just look at the code in red:

<?xml version="1.0" encoding="UTF-8"?>

<grid

    enableExport="true"

    enableFilters="true"

    enableFooters="true"

    enablePreferencePersistence="true"

    enablePrint="true"

    forcePagerRow="true"

    pageSize="50"

    enablePaging="true">

 

    <level>

        <columns>

            <column

                dataField="label"

                headerText="Name"

                filterControl="TextInput"

                filterOperation="Contains"

                headerRenderer="com.flexicious.mysampleapp.ItemRenderers_VerticalTextRenderer"

                footerLabel="Count: " footerOperation="count" footerOperationPrecision="3"/>

            <column

                dataField="data"

                headerText="Type"

                filterControl="TextInput"

                headerRenderer="com.flexicious.mysampleapp.ItemRenderers_VerticalTextRenderer"

                filterOperation="Contains"

                footerLabelFunction="customFooterFunction"

                />

        </columns>

    </level>

 

</grid>

 

 And the renderer:

package com.flexicious.mysampleapp;

 

public class ItemRenderers_VerticalTextRenderer extends TextView {

     

      final boolean topDown = false;

       

     

      public Object getData() {

            return data;

      }

 

      public void setData(Object data) {

      }

       

 

         @Override

         protected void onDraw(Canvas canvas){

            TextPaint textPaint = getPaint();

            textPaint.setColor(getCurrentTextColor());

            textPaint.drawableState = getDrawableState();

 

            canvas.save();

 

            if(topDown){

               canvas.translate(getWidth(), 0);

               canvas.rotate(90);

            }else {

               canvas.translate(0, getHeight());

               canvas.rotate(-90);

            }

 

 

            canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());

 

            getLayout().draw(canvas);

            canvas.restore();

        }

     

      private Object data;

 

}

 

 Full sample code:

MySampleApp.zip (157.35 kb)