JSGrid Bug

by tabalinas

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div class="datatable"></div>

JavaScript

var DATA = null;

        function load_data(filter) {
            
            if (!DATA) {
            	  DATA = [{ username: "User Name" }];
            }

            var result = $.grep(DATA, function(item, idx) {
                for (var key in filter) {
                    var value = filter[key];
                    if (value.length > 0) {
                        if (item[key].indexOf(value) == -1)
                            return false;
                    }
                }
                return true;
            });
            return result;
        }

        function date_renderer(value, row) {
            return row['date_str'];
        }

        function comment_renderer(value, row) {
            var s = value;
            if (row['details']) {
                var details = row['details'];
                s += ' <span class="details"><a class="show-details">[Details]</a><pre class="details-data" style="display: none">' + details + '</pre></span>';                
            }
            return s;
        }

            $('.datatable').jsGrid({
                width: "90%",
                height: "600px",
                autoload: true,
                sorting: true,
                paging: true,
                filtering: true,
                pageSize: 16,
                pageButtonCount: 5,
                controller: {
                    loadData: load_data
                },
                fields: [
                    { name: "date", title: "Date", type: "text", width: 30, itemTemplate: date_renderer, autosearch: true},
                    { name: "level", title: "Level", type: "text", width: 20, css: 'field-level'},
                    { name: "username", title: "Username", type: "text", width: 20, css: 'field-username', filtering: true},
                    { name: "comment", title: "Comment", type: "text", css: 'field-comment', filtering: true, itemTemplate: comment_renderer},
                ]
            });
           ...