Skip to Content

Filtration of data on SAP MII iGrid

Just about a month ago I came to know about a requirement of developing  a data filter functionality for SAP MII iGrid, quite similar to SAP Webdynpro or SAP MII admin pages’ table filter. User will enter a keyword as an input and iGrid data should be filtered based on that input. 

The first thing that came into my mind is to explore all iGrid API methods/functions but unfortunately didn’t find any standard way to support this feature.

 As we all know that MII iGrid is not editable which causes the first barrier to support the iGrid data filter feature. Replacing the iGrid with Dojo or Ajax grid can make our work much easier in some cases. But in my case I had to support this feature on existing SAP MII iGrid itself so I decided to build something very simple and easy to implement. 

The first thing that we need to do here is to add a blank row as a first row in the iGrid as shown in Fig: 1. So used the below code snippet to add a top row  containing HTML input box for each individual column of the iGrid to take the input for data filtration: 

document.iGridName.getGridObject().setCellValue(rowNumber, columnNumber ,”


The above code snippet will change the grid as shown below and it will offer the filtering possibility through the filtering row.

Fig: 1

Next there should be a provision to enter filter input; this can be supported in several ways like developing a custom html/css based popup window etc. But I used standard JavaScript prompt() function to support the same.

Fig: 2

After clicking ‘OK’ it filters the data based on the column of the grid according the filter value located at the top of a column and user can see the filtered data on the grid and the filter input value ‘14M’ on the top row.

Fig: 3

To display the filter criteria on the selected column I have used the following code snippet: 

customText = “


document. iGridName.getGridObject().setCellValue(1, selectedColumnNumber ,customText);

Filtering capabilities:
The iGrid data filter has the following capabilities:
Strings: if user enter filter input value “a” it returns any fields that has “a” in it irrespective of the position of “a” in the string.
Numeric values, dates timestamp: It filters for the exact numeric value, date and timestamp.

Filter implementation:

When user clicks the ‘OK’ button then the filter () gets triggered and it takes two parameters: one is selected column name by

document.iGridName.getGridObject().getColumnName(int) method and another is  the column value which is entered by the user .

Following is the code to take those two user inputs: 

filterCriteria=prompt(“Please enter filter criteria here”);

 if(filterCriteria!=null && filterCriteria!=””) {

document.DisplayBufferMessage.getGridObject().setCellValue(1, selectedColumnNumber ,filterCriteria);

 filterExprsn = selectedColumnName+” “+”LIKE”+” “+”‘%”+filterCriteria+”%'”+” “;

        if(selectedColumnNumber == 5 || selectedColumnNumber ==6){ 

            filterCriteria = filterCriteria.replace(“T”, ” “);

      filterExprsn = selectedColumnName+” “+”=TO_TIMESTAMP(‘”+filterCriteria+”‘,’YYYY-MM-DD HH24:MI:SS’ )”;




Inside fetchQueryResult() method the created filter expression is passed to the Xacute query of the transaction to query the set of data from the database based on this filter expression.



 This filter transaction needs two parameters to do this data filtration. One is query path and another is the filter expression.

This query path has been used to fetch all the unfiltered data in the grid and the incoming parameter, ‘Columns’, of the SQL query has been used to get the list of Column names of the database table.

I have used those exact column names to generate the output XML document for the grid to display the data and while filtering the data I have used only that exact column name as the selected column for the filter expression.

 So that this iGrid data filter can work as a generic iGrid filter and it can be reused. 

1 Comment
You must be Logged on to comment or reply to a post.