Display ALV Grid as well as List Header using HTML Control

1: Use ALV Split container to create space at Top for header and below it for ALV Grid:
{code}
* First Main Container
CREATE OBJECT obj_container
EXPORTING
container_name = 'CC_CONTAINER'
style = cl_gui_custom_container=>ws_maximizebox.

* Splitter Container
CREATE OBJECT obj_splitter
EXPORTING
parent = obj_container
rows = 2
columns = 1.

* Set the height of Top of page
CALL METHOD obj_splitter->set_row_height
EXPORTING
id = 1
height = 30.

* Place obj_parent_html in First row First column
* for Top_of_page
CALL METHOD obj_splitter->get_container
EXPORTING
row = 1
column = 1
RECEIVING
container = obj_parent_html.

* Place ALV grid display in Second row First column
CALL METHOD obj_splitter->get_container
EXPORTING
row = 2
column = 1
RECEIVING
container = obj_parent_grid.

* Create ALV grid Object
CREATE OBJECT obj_grid
EXPORTING
i_parent = obj_parent_grid.
{code}

2:set two diff. events for List display and Grid display
{code}
* Set Event Handler for TOP_OF_PAGE
SET HANDLER obj_event->on_top_of_page FOR obj_grid.
SET HANDLER obj_event->on_grid_top_of_page FOR obj_grid.
{code}

3: define local classes:
{code}
CLASS lcl_event_receiver DEFINITION FINAL.
* event receiver definitions for ALV actions
PUBLIC SECTION.
METHODS:
* Handle List output Top-Of-Page
on_top_of_page
FOR EVENT print_top_of_page OF cl_gui_alv_grid,
*Handle grid Top_Of_Page
on_grid_top_of_page
FOR EVENT top_of_page OF cl_gui_alv_grid
IMPORTING
e_dyndoc_id.

PRIVATE SECTION.
DATA: lv_endda TYPE endda.
ENDCLASS. "lcl_event_receiver DEFINITION

CLASS lcl_event_receiver IMPLEMENTATION.

* Create the Text to be dispalyed at top of page of ALV List Output
METHOD on_top_of_page.
* Will be hit only when ALV List Display is called
PERFORM display_list_top.
ENDMETHOD. "On_top_of_page

* Create Top_Of_Page display for ALV Grid Output
METHOD on_grid_top_of_page.
* top-of-page event
PERFORM event_top_of_page USING obj_dyndoc_id.
e_dyndoc_id = obj_dyndoc_id.
ENDMETHOD. "create_top_of_page

ENDCLASS. "lcl_event_receiver IMPLEMENTATION


4:Make it know to ALV grid about the Top of page event. Code this in MODULE ALV_DISPLAY:
{code}
* Create top-document
CREATE OBJECT obj_dyndoc_id
EXPORTING
style = 'ALV_GRID'.

* Initializing document
CALL METHOD obj_dyndoc_id->initialize_document.

* Processing events
CALL METHOD obj_grid->list_processing_events
EXPORTING
i_event_name = 'TOP_OF_PAGE'
i_dyndoc_id = obj_dyndoc_id.
{code}

5: this object "obj_dyndoc_id" will use different methods to decorate the top page.
Like adding gaps:
"Put Header in center
CALL METHOD p_dyndoc_id->add_gap
EXPORTING
width = 200.

Adding text:
"Add Text to Header
CALL METHOD p_dyndoc_id->add_text
EXPORTING
text = lv_text
sap_style = cl_dd_area=>heading.

OR
CALL METHOD p_dyndoc_id->add_text
EXPORTING
text = lv_text
sap_fontsize = cl_dd_area=>large
sap_emphasis = cl_dd_area=>strong.

Use the constructor of class: CL_DD_AREA to define style and colors.

6: Different objects use are:

obj_container TYPE REF TO cl_gui_custom_container,
obj_splitter TYPE REF TO cl_gui_splitter_container,
obj_parent_grid TYPE REF TO cl_gui_container,
obj_grid TYPE REF TO cl_gui_alv_grid,
obj_dyndoc_id TYPE REF TO cl_dd_document,"reference to document
gv_title TYPE lvc_title,
obj_event TYPE REF TO lcl_event_receiver,
obj_parent_html TYPE REF TO cl_gui_container,"reference to html container
obj_html_cntrl TYPE REF TO cl_gui_html_viewer.