JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table id="sg1"></table>
<div id="psg1"></div>

<div class="modal fade" id="ConfirmationMessageModal" tabindex="-1" role="dialog" aria-labelledby="ConfirmationMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" id="ConfirmationMessageModalBody">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="ConfirmationMessageModalLabel"><span class="glyphicon glyphicon-list-alt">&nbspMessage</span>&nbsp</h4>
                </div>
                <div class="modal-body">
                    <div id="ConfirmationMessageContent" class="alert alert-danger multiline-validation hide"> 
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <ul id="ValidationMessage"></ul>
                    </div>
                </div>
                <div class="modal-footer">                    
                    <button type="button" class="btn btn-default" id="ConfirmationDialogCancelBtn" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="ConfirmationDialogOkBtn">Continue</button>
                </div>
            </div>
        </div>
    </div>

CSS

.multiline-validation{max-height:100px;overflow-y:auto;}

JavaScript

jQuery("#sg1").jqGrid({
	datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
	height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:60, sorttype:"int"},
   		{name:'invdate',index:'invdate', width:90, sorttype:"date"},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
   		{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},		
   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
   		{name:'note',index:'note', width:150, sortable:false}		
   	],
        beforeSelectRow: function (rowid, e) {
            $('#ConfirmationMessageModal').modal({ show: true, keyboard: false, backdrop: 'static' });
        },
   	caption: "Test Grid"
});

var mydata = [
		{id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
		];

for(var i=0;i<=mydata.length;i++)
	jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);


$('#ConfirmationDialogOkBtn').on('click', function(){
    
    $('#ConfirmationMessageContent').addClass('hide');
    $("ul#ValidationMessage").empty();
    
    for(var i=0;i<10;i++){
        $('<li />', { html: 'Value '+i+' already exists in list' }).appendTo($('#ValidationMessage'));                
    }
    $('#ConfirmationMessageContent').removeClass('hide');
});