igGrid validation message on scroll

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
    rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css">
</link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div id="gridWrapper" style="position:relative">
    <table id="grid"></table>
</div>

CSS

.ui-icon-triangle-1-s:before {
    font-family: "Font Awesome 6 Free";
    content: "\f133" !important;
    font-weight: 900;
    font-size: 16px;
}

JavaScript

$(function () {
    // Sample records to populate the grid 
    var records = [
        { EmployeeID: 1, FirstName: "Nancy", LastName: "Davolio", Title: "Sales Representative", Department: "Sales", Location: "Seattle", Phone: "555-1234", Email: "[email protected]", StartDate: "2020-01-15", Status: "Active" },
        { EmployeeID: 2, FirstName: "Andrew", LastName: "Fuller", Title: "Vice President, Sales", Department: "Executive", Location: "New York", Phone: "555-5678", Email: "[email protected]", StartDate: "2018-03-22", Status: "Active" },
        { EmployeeID: 3, FirstName: "Janet", LastName: "Leverling", Title: "Sales Representative", Department: "Sales", Location: "Chicago", Phone: "555-8765", Email: "[email protected]", StartDate: "2019-07-11", Status: "Active" },
        { EmployeeID: 4, FirstName: "Margaret", LastName: "Peacock", Title: "Sales Representative", Department: "Sales", Location: "Dallas", Phone: "555-4321", Email: "[email protected]", StartDate: "2021-02-01", Status: "Active" },
        { EmployeeID: 5, FirstName: "Steven", LastName: "Buchanan", Title: "Sales Manager", Department: "Management", Location: "Miami", Phone: "555-6789", Email: "[email protected]", StartDate: "2017-10-10", Status: "Active" },
        { EmployeeID: 6, FirstName: "Michael", LastName: "Suyama", Title: "Sales Representative", Department: "Sales", Location: "Boston", Phone: "555-8761", Email: "[email protected]", StartDate: "2019-04-25", Status: "Active" },
        { EmployeeID: 7, FirstName: "Robert", LastName: "King", Title: "Sales Representative", Department: "Sales", Location: "San Francisco", Phone: "555-7410", Email: "[email protected]", StartDate: "2016-09-30", Status: "Inactive" },
        { EmployeeID: 8, FirstName: "Laura", LastName: "Callahan", Title: "Inside Sales Coordinator", Department: "Support", Location: "Austin", Phone: "555-3698", Email: "[email protected]", StartDate: "2022-01-19", Status: "Active" },
        {...