ListGrid CellFormatter() working on alternate rows

[shraddha.bhatt]

I want to make a chat Screen to show the chat messages between two users. I am using ListGrid as a base component have CSS applied on the each row using setCellFormatter() method. although my HTML generates properly with proper CSS STYLE. But in Visual display I get the rows with alternate rows showing proper view.

.css

.messageListFromRow,
.messageListFromRowOver,
.messageListFromRowDark,
.messageListFromRowSelected,
.messageListFromRowSelectedDark,
.messageListFromRowSelectedOver,
.messageListFromRowSelectedOverDark,
.messageListToRow,
.messageListToRowOver,
.messageListToRowDark,
.messageListToRowSelected,
.messageListToRowSelectedDark,
.messageListToRowSelectedOver,
.messageListToRowSelectedOverDark
{
  position: relative;
  margin: 3px;
  min-height:45px;
  max-width: 88%;
  width:auto;
  clear: both;
}
.messageListToRow,
.messageListToRowOver,
.messageListToRowDark,
.messageListToRowSelected,
.messageListToRowSelectedDark,
.messageListToRowSelectedOver,
.messageListToRowSelectedOverDark
{
  	float: left;
	margin-right: auto;
	height: auto;
	padding: 4px 10px 4px 60px; /*position within the border*/
}
.messageListToRow:before
{
	z-index: -1;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 50px;
	content: "";

	border-width: 8px 10px 8px 17px; 
	border-image: url('./images/speech_bubble_left_2.png') 8 10 8 17 stretch stretch;
	-webkit-border-image: url('./images/speech_bubble_left_2.png') 8 10 8 17 stretch stretch;
	-moz-border-image: url('./images/speech_bubble_left_2.png') 8 10 8 17 stretch stretch;
	-o-border-image: url('./images/speech_bubble_left_2.png') 8 10 8 17 stretch stretch;
}
.messageListToRow:after{
	z-index: -1;
	position: absolute;
	left: 0px;
	width: 48px;
	bottom: 0px;
	height: 48px;
	content:"";

	background-image: url('./images/left_chatter.png');
	background-size: 48px 48px;
	background-position: bottom left;

	border-radius: 3px;
	-webkit-border-radius: 3px;	
	-moz-border-radius: 3px;	
	-o-border-radius: 3px;	
	-ms-border-radius: 3px;	
}

.messageListFromRow,
.messageListFromRowOver,
.messageListFromRowDark,
.messageListFromRowSelected,
.messageListFromRowSelectedDark,
.messageListFromRowSelectedOver,
.messageListFromRowSelectedOverDark
{
	z-index: -1;
	float: right;
	margin-left: auto;
	height:auto;
	padding: 4px 60px 4px 10px; /*position within the border*/
	text-align: right;	
}
.messageListFromRow:before
{
	z-index: -1;
	position: absolute;
	top: 0px;
	right: 50px;
	bottom: 0px;
	left: 0px;
	content: "";

	border-width: 8px 17px 8px 10px; 
	border-image: url('./images/speech_bubble_right_2.png') 8 17 8 10 stretch stretch ;
	-webkit-border-image: url('./images/speech_bubble_right_2.png') 8 17 8 10 stretch stretch ;
	-moz-border-image: url('./images/speech_bubble_right_2.png') 8 17 8 10 stretch stretch ;
	-o-border-image: url('./images/speech_bubble_right_2.png') 8 17 8 10 stretch stretch ;
}
.messageListFromRow:after{
	
	z-index: -1;
	position: absolute;
	right: 0px;
	width: 48px;
	bottom: 0px;
	height: 48px;
	content:"";

	background-image: url(./images/right_chatter.png);
	background-size: 48px 48px;
	background-position: right bottom;

	border-radius: 3px;
	-webkit-border-radius: 3px;	
	-moz-border-radius: 3px;	
	-o-border-radius: 3px;	
	-ms-border-radius: 3px;	
}

ListGrid code :

messageList.setHeight100();
		messageList.setWidth100();
		messageList.setBorder("1px solid grey");
		messageList.setCellHeight(70);
		messageList.setShowHeader(false);
		messageList.setWrapCells(true);
		messageList.setLeaveScrollbarGap(false);
		messageList.setShowAllRecords(true); 
		messageList.setBodyStyleName("messageGridBody");
		
		messageList.setDataSource(DataSource.get(MESSAGE_DMI));
		
messageList.fetchData(criteria, new DSCallback()
		{
			@Override
			public void execute(DSResponse response, Object rawData, DSRequest request) 
			{
				messageList.getField("displayMessageList").setCellFormatter(new CellFormatter() 
				{
					@Override
					public String format(Object value, ListGridRecord record, int rowNum, int colNum) 
					{
						String strTemp = "";
						if(record.getAttributeAsString("senderRoleName").equalsIgnoreCase("Dispatcher"))
						{
							if(record.getAttributeAsBoolean("truckMarkDeleted"))
							{
								record.setEnabled(false);
							}
							else
							{
								record.setEnabled(true);
							}
							strTemp = "<div class=\"messageListToRow\">"+ record.getAttributeAsString("truckName") + " : " +
							record.getAttributeAsString("truckDriverName") + " : " + DateUtil.formatAsShortDatetime(record.getAttributeAsDate("sentDateAndTime")) +
				        	"<br>"+ record.getAttributeAsString("txtMessage")+ "</div>";
							
							return strTemp;
						}
						else
						{
							if(record.getAttributeAsBoolean("truckMarkDeleted"))
							{
								record.setEnabled(false);
							}
							else
							{
								record.setEnabled(true);
							}
							strTemp = "<div class=\"messageListFromRow\">"+ record.getAttributeAsString("truckName") + " : " +
							record.getAttributeAsString("truckDriverName") + " : " + DateUtil.formatAsShortDatetime(record.getAttributeAsDate("sentDateAndTime")) +
				        	"<br>" + record.getAttributeAsString("txtMessage")+ "</div>";
							
							return strTemp;
						}
					}
				});
			}
		});
		messageList.redraw();

I am also attaching the o/p I currently getting. Can anyone please help me out as I need this urgently fixed

[shraddha.bhatt]

workaround

I found a work around for this issue.

I just overrided the ListGrid.getCellStyle() and send an empty style. This made my work