JavaScript Grid

Invoke the updatebounddata method of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxLayout'>
</div>
<div id='jqxMenu'>
</div>

CSS

#musicBtn {
  padding: 0;
  margin: 0 5px;
}

JavaScript

window.onload = () => {

  const layout = [{
    type: 'layoutGroup',
    orientation: 'horizontal',
    items: [{
        type: 'autoHideGroup',
        alignment: 'left',
        width: '10%',
        unpinnedWidth: '15%',
        popupContentSize: '200%', // Seems to be a multiple of the "width"
        items: [{
            type: 'layoutPanel',
            title: 'Menu',
            contentContainer: 'MenuPanel',
            initContent: function() {
              $("#jqxMenu").jqxMenu({
                theme: 'energyblue',
                mode: 'vertical',
                autoCloseOnClick: false
              });
            }
          },
          {
            type: 'layoutPanel',
            title: 'Tunes',
            contentContainer: 'TunelistPanel',
          },
          {
            type: 'layoutPanel',
            title: 'Others',
            contentContainer: 'OtherFilesPanel',
          },
          {
            type: 'layoutPanel',
            title: 'Recent',
            contentContainer: 'RecentPanel',
          }
        ]
      },
      { // LHS
        type: 'layoutGroup',
        width: '50%',
        orientation: 'vertical',
        items: [{ // LHS - Upper
          type: 'tabbedGroup',
          height: '100%',
          items: [{ // Tab 1
              type: 'layoutPanel',
              title: 'ABC',
              contentContainer: 'AbcPanel',
              selected: true
            },
            { // Tab 2
              type: 'layoutPanel',
              title: 'Modified',
              contentContainer: 'ModifiedPanel'
            }
          ]
        }]
      },
      { // RHS
        type: 'layoutGroup',
        width: '40%',
        orientation: 'vertical',
        items: [{ // RHS Upper
          type: 'tabbedGroup',
          height: '100%',
          items: [{ // Tab 1
              type: 'layoutPanel',
              title: 'Music',
              contentContainer: 'MusicDisplayPanel',
              selected: true
        ...