Alarms new grid POC

by sectioni

HTML

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/datagrid-groupview.js"></script>
<h2>Alarms Grid POC</h2>



<table id="dg" style="width:700px;height:350px"       
       pagination="true" sortName="itemid" sortOrder="desc">
</table>

CSS

.datagrid-header, .datagrid-cell {
  overflow: unset;
}

.datagrid-group {
   height:60px !important;
   background-color:#EEEEEE;
}

.headerTitle {
  float:left; 
}

.headerIcon {
  float:right;
  margin-right:20px;
  height:20px;
}

.datagrid-cell {
  position:relative;
}

.datagrid-cell .dropdown {
  display:none;
  position: absolute;
  top:30px; 
  left: 0px;
  width: 250px;
  height:100px;
  border: solid 1px black;
  background-color: white;
  z-index:2;
}

.datagrid-row-expander {
  margin-top:23px !important;
}

JavaScript

$(function(){
            $('#dg').datagrid({
singleSelect:true,
                view: groupview,                
                singleSelect: false,
                rownumbers:true,
                fitColumns:true,
                pagination:true,
                sortName: 'itemid',
                sortOrder: 'asc',
								groupField:'groupID',
                remoteSort: true,
                
                groupFormatter:function(value,rows){
                    return '<div style="float:left; margin-top:17px; width:150px;">' + value + '</div><div style="float:left; margin-left:200px;">Affected devices<br/><span style="font-size:20px;">200</span></div>';
                },
                onLoadSuccess: function (data) {
                	//$('.datagrid-header-rownumber').html('^');
								},
                columns: [[
                					 {field: 'check', checkbox: true, width:50},
                           {field: 'itemid', title:' Item ID', width: 80, sortable:true, hformatter: function(title, col) {
                              return '<div class="headerTitle">' + title + '</div><div class="headerIcon"><a href="#a" onclick="showDropdown()">F</a></div><div class="dropdown">option 1<br>option 2</div>';
                           }}, 
                           {field:'productid', title:' Product line',sortable:true, width: 80}, 
                           {field:'other', title:' Severity',sortable:true, width: 80}, 
                
                         ]],
                data: [
                  {groupID: 'Disk space utilization', itemid:'Item1', productid:'1'},
                  {groupID: 'Disk space utilization', itemid:'Item2', productid:'2'},
                  {groupID: 'Disk space utilization', itemid:'Item3', productid:'3'},
                  {groupID: 'Device down', itemid:'Item4', productid:'4'},
                  {groupID: 'Device down', itemid:'Item5', productid:'5'},
                  {groupID: 'Device down', itemid:'Item6',...