Row Selector Column Type

15 of 123

ZingGrid provides a <zg-column type="selector"> column type. This column type is a render-only field and will automatically display a checkbox to select or multi-select rows to delete.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/76WJV4BW

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <!-- 
			Point ZingChart to modules folder so ZingChart
			can automatically grab the CSV module 
		-->
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  </script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      overflow: auto;
      position: relative;
      width: 100%;
      height: 100%;
    }

    #myChart {
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartData = [{
          id: 'theworld',
          parent: '',
          name: 'The World',
          group: ''
        },
        {
          id: 'russia',
          parent: 'theworld',
          name: 'Russia',
          value: 143989754,
          group: 'europe',
        },
        {
          id: 'ukraine',
          parent: 'theworld',
          name: 'Ukraine',
          value: 44222947,
          group: 'europe'
        },
        {
          id: 'poland',
          parent: 'theworld',
          name: 'Poland',
          value: 38170712,
          group: 'europe'
        },
        {
          id: 'romania',
          parent: 'theworld',
          name: 'Romania',
          value: 19679306,
          group: 'europe'
        },
        {
          id: 'czechia',
          parent: 'theworld',
          name: 'Czechia',
          value: 10618303,
          group: 'europe'
        },
        {
          id: 'hungary',
          parent: 'theworld',
          name: 'Hungary',
          value: 9721559,
          group: 'europe'
        },
        {
          id: 'belarus',
          parent: 'theworld',
          name: 'Belarus',
          value: 9468338,
          group: 'europe'
        },
        {
          id: 'bulgaria',
          parent: 'theworld',
          name: 'Bulgaria',
          value: 7084571,
          group: 'europe'
        },
        {
          id: 'slovakia',
          parent: 'theworld',
          name: 'Slovakia',
          value: 5447662,
          group: 'europe'
        },
        {
          id: 'moldova',
          parent: 'theworld',
          name: 'Moldova',
          value: 4051212,
          group: 'europe'
        },
        {
          id: 'unitedkingdom',
          parent: 'theworld',
          name: 'United Kingdom',
          value: 66181585,
          group: 'europe'
        },
        {
          id: 'sweden',
          parent: 'theworld',
          name: 'Sweden',
          value: 9910701,
          group: 'europe'
        },
        {
          id: 'denmark',
          parent: 'theworld',
          name: 'Denmark',
          value: 5733551,
          group: 'europe'
        },
        {
          id: 'finland',
          parent: 'theworld',
          name: 'Finland',
          value: 5523231,
          group: 'europe'
        },
        {
          id: 'norway',
          parent: 'theworld',
          name: 'Norway',
          value: 5305383,
          group: 'europe'
        },
        {
          id: 'ireland',
          parent: 'theworld',
          name: 'Ireland',
          value: 4761657,
          group: 'europe'
        },
        {
          id: 'lithuania',
          parent: 'theworld',
          name: 'Lithuania',
          value: 2890297,
          group: 'europe'
        },
        {
          id: 'latvia',
          parent: 'theworld',
          name: 'Latvia',
          value: 1949670,
          group: 'europe'
        },
        {
          id: 'estonia',
          parent: 'theworld',
          name: 'Estonia',
          value: 1309632,
          group: 'europe'
        },
        {
          id: 'iceland',
          parent: 'theworld',
          name: 'Iceland',
          value: 335025,
          group: 'europe'
        },
        {
          id: 'guernseyandjersey',
          parent: 'theworld',
          name: 'Guernsey and Jersey',
          value: 165314,
          group: 'europe'
        },
        {
          id: 'isleofman',
          parent: 'theworld',
          name: 'Isle of Man',
          value: 84287,
          group: 'europe'
        },
        {
          id: 'faroeislands',
          parent: 'theworld',
          name: 'Faroe Islands',
          value: 49290,
          group: 'europe'
        },
        {
          id: 'italy',
          parent: 'theworld',
          name: 'Italy',
          value: 59359900,
          group: 'europe'
        },
        {
          id: 'spain',
          parent: 'theworld',
          name: 'Spain',
          value: 46354321,
          group: 'europe'
        },
        {
          id: 'greece',
          parent: 'theworld',
          name: 'Greece',
          value: 11159773,
          group: 'europe'
        },
        {
          id: 'cyprus',
          parent: 'theworld',
          name: 'Cyprus',
          value: 1179551,
          group: 'europe'
        },
        {
          id: 'portugal',
          parent: 'theworld',
          name: 'Portugal',
          value: 10329506,
          group: 'europe'
        },
        {
          id: 'serbia',
          parent: 'theworld',
          name: 'Serbia',
          value: 8790574,
          group: 'europe'
        },
        {
          id: 'croatia',
          parent: 'theworld',
          name: 'Croatia',
          value: 4189353,
          group: 'europe'
        },
        {
          id: 'bosniaandherzegovina',
          parent: 'theworld',
          name: 'Bosnia and Herzegovina',
          value: 3507017,
          group: 'europe'
        },
        {
          id: 'albania',
          parent: 'theworld',
          name: 'Albania',
          value: 2930187,
          group: 'europe'
        },
        {
          id: 'republicofmacedonia',
          parent: 'theworld',
          name: 'Republic of Macedonia',
          value: 2083160,
          group: 'europe'
        },
        {
          id: 'slovenia',
          parent: 'theworld',
          name: 'Slovenia',
          value: 2079976,
          group: 'europe'
        },
        {
          id: 'montenegro',
          parent: 'theworld',
          name: 'Montenegro',
          value: 628960,
          group: 'europe'
        },
        {
          id: 'malta',
          parent: 'theworld',
          name: 'Malta',
          value: 430835,
          group: 'europe'
        },
        {
          id: 'andorra',
          parent: 'theworld',
          name: 'Andorra',
          value: 76965,
          group: 'europe'
        },
        {
          id: 'gibraltar',
          parent: 'theworld',
          name: 'Gibraltar',
          value: 34571,
          group: 'europe'
        },
        {
          id: 'sanmarino',
          parent: 'theworld',
          name: 'San Marino',
          value: 33400,
          group: 'europe'
        },
        {
          id: 'vaticancity',
          parent: 'theworld',
          name: 'Vatican City',
          value: 792,
          group: 'europe'
        },
        {
          id: 'germany',
          parent: 'theworld',
          name: 'Germany',
          value: 82114224,
          group: 'europe'
        },
        {
          id: 'france',
          parent: 'theworld',
          name: 'France',
          value: 64979548,
          group: 'europe'
        },
        {
          id: 'netherlands',
          parent: 'theworld',
          name: 'Netherlands',
          value: 17035938,
          group: 'europe'
        },
        {
          id: 'belgium',
          parent: 'theworld',
          name: 'Belgium',
          value: 11429336,
          group: 'europe'
        },
        {
          id: 'austria',
          parent: 'theworld',
          name: 'Austria',
          value: 8735453,
          group: 'europe'
        },
        {
          id: 'switzerland',
          parent: 'theworld',
          name: 'Switzerland',
          value: 8476005,
          group: 'europe'
        },
        {
          id: 'luxembourg',
          parent: 'theworld',
          name: 'Luxembourg',
          value: 583455,
          group: 'europe'
        },
        {
          id: 'monaco',
          parent: 'theworld',
          name: 'Monaco',
          value: 38695,
          group: 'europe'
        },
        {
          id: 'liechtenstein',
          parent: 'theworld',
          name: 'Liechtenstein',
          value: 37922,
          group: 'europe'
        },
        {
          id: 'brazil',
          parent: 'theworld',
          name: 'Brazil',
          value: 209288278.71,
          group: 'southamerica',
          text: ' '
        },
        {
          id: 'colombia',
          parent: 'theworld',
          name: 'Colombia',
          value: 49065615,
          group: 'southamerica'
        },
        {
          id: 'argentina',
          parent: 'theworld',
          name: 'Argentina',
          value: 44271041,
          group: 'southamerica'
        },
        {
          id: 'peru',
          parent: 'theworld',
          name: 'Peru',
          value: 32165485,
          group: 'southamerica'
        },
        {
          id: 'venezuela',
          parent: 'theworld',
          name: 'Venezuela',
          value: 31977065,
          group: 'southamerica'
        },
        {
          id: 'chile',
          parent: 'theworld',
          name: 'Chile',
          value: 18054726,
          group: 'southamerica'
        },
        {
          id: 'ecuador',
          parent: 'theworld',
          name: 'Ecuador',
          value: 16624858,
          group: 'southamerica'
        },
        {
          id: 'bolivia',
          parent: 'theworld',
          name: 'Bolivia',
          value: 11051600,
          group: 'southamerica'
        },
        {
          id: 'paraguay',
          parent: 'theworld',
          name: 'Paraguay',
          value: 6811297,
          group: 'southamerica'
        },
        {
          id: 'uruguay',
          parent: 'theworld',
          name: 'Uruguay',
          value: 3456750,
          group: 'southamerica'
        },
        {
          id: 'guyana',
          parent: 'theworld',
          name: 'Guyana',
          value: 777859,
          group: 'southamerica'
        },
        {
          id: 'suriname',
          parent: 'theworld',
          name: 'Suriname',
          value: 563402,
          group: 'southamerica'
        },
        {
          id: 'frenchguiana',
          parent: 'theworld',
          name: 'French Guiana',
          value: 282731,
          group: 'southamerica'
        },
        {
          id: 'falklandislands',
          parent: 'theworld',
          name: 'Falkland Islands',
          value: 2910,
          group: 'southamerica'
        },
      ];

      let chartConfig = {
        type: 'bubble-pack',
        plotarea: {
          margin: 10
        },
        options: {
          palette: ['#ff5252', '#448aff', '#ffab40'],
          padding: 2,
          minSize: 3,
          groupFilter: ['southamerica', 'europe'],
          format: {
            short: true,
            decimals: 1,
            decimalsSeparator: '.',
            thousandsSeparator: ','
          },
          text: ' '
        },
        series: chartData
      };

      zingchart.loadModules('bubble-pack', function() {
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  	<!-- 
			Point ZingChart to modules folder so ZingChart
			can automatically grab the CSV module 
		-->
    <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    </div>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  overflow:auto;
  position:relative;
  width: 100%;
  height:100%;
}

#myChart {
  width: 100%;
  height:100%;
}

.zc-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartData = [
    {
      id: 'theworld',
      parent: '',
      name: 'The World',
      group: ''
    },
    {
      id: 'russia',
      parent: 'theworld',
      name: 'Russia',
      value: 143989754,
      group: 'europe',
    },
    {
      id: 'ukraine',
      parent: 'theworld',
      name: 'Ukraine',
      value: 44222947,
      group: 'europe'
    },
    {
      id: 'poland',
      parent: 'theworld',
      name: 'Poland',
      value: 38170712,
      group: 'europe'
    },
    {
      id: 'romania',
      parent: 'theworld',
      name: 'Romania',
      value: 19679306,
      group: 'europe'
    },
    {
      id: 'czechia',
      parent: 'theworld',
      name: 'Czechia',
      value: 10618303,
      group: 'europe'
    },
    {
      id: 'hungary',
      parent: 'theworld',
      name: 'Hungary',
      value: 9721559,
      group: 'europe'
    },
    {
      id: 'belarus',
      parent: 'theworld',
      name: 'Belarus',
      value: 9468338,
      group: 'europe'
    },
    {
      id: 'bulgaria',
      parent: 'theworld',
      name: 'Bulgaria',
      value: 7084571,
      group: 'europe'
    },
    {
      id: 'slovakia',
      parent: 'theworld',
      name: 'Slovakia',
      value: 5447662,
      group: 'europe'
    },
    {
      id: 'moldova',
      parent: 'theworld',
      name: 'Moldova',
      value: 4051212,
      group: 'europe'
    },
    {
      id: 'unitedkingdom',
      parent: 'theworld',
      name: 'United Kingdom',
      value: 66181585,
      group: 'europe'
    },
    {
      id: 'sweden',
      parent: 'theworld',
      name: 'Sweden',
      value: 9910701,
      group: 'europe'
    },
    {
      id: 'denmark',
      parent: 'theworld',
      name: 'Denmark',
      value: 5733551,
      group: 'europe'
    },
    {
      id: 'finland',
      parent: 'theworld',
      name: 'Finland',
      value: 5523231,
      group: 'europe'
    },
    {
      id: 'norway',
      parent: 'theworld',
      name: 'Norway',
      value: 5305383,
      group: 'europe'
    },
    {
      id: 'ireland',
      parent: 'theworld',
      name: 'Ireland',
      value: 4761657,
      group: 'europe'
    },
    {
      id: 'lithuania',
      parent: 'theworld',
      name: 'Lithuania',
      value: 2890297,
      group: 'europe'
    },
    {
      id: 'latvia',
      parent: 'theworld',
      name: 'Latvia',
      value: 1949670,
      group: 'europe'
    },
    {
      id: 'estonia',
      parent: 'theworld',
      name: 'Estonia',
      value: 1309632,
      group: 'europe'
    },
    {
      id: 'iceland',
      parent: 'theworld',
      name: 'Iceland',
      value: 335025,
      group: 'europe'
    },
    {
      id: 'guernseyandjersey',
      parent: 'theworld',
      name: 'Guernsey and Jersey',
      value: 165314,
      group: 'europe'
    },
    {
      id: 'isleofman',
      parent: 'theworld',
      name: 'Isle of Man',
      value: 84287,
      group: 'europe'
    },
    {
      id: 'faroeislands',
      parent: 'theworld',
      name: 'Faroe Islands',
      value: 49290,
      group: 'europe'
    },
    {
      id: 'italy',
      parent: 'theworld',
      name: 'Italy',
      value: 59359900,
      group: 'europe'
    },
    {
      id: 'spain',
      parent: 'theworld',
      name: 'Spain',
      value: 46354321,
      group: 'europe'
    },
    {
      id: 'greece',
      parent: 'theworld',
      name: 'Greece',
      value: 11159773,
      group: 'europe'
    },
    {
      id: 'cyprus',
      parent: 'theworld',
      name: 'Cyprus',
      value: 1179551,
      group: 'europe'
    },
    {
      id: 'portugal',
      parent: 'theworld',
      name: 'Portugal',
      value: 10329506,
      group: 'europe'
    },
    {
      id: 'serbia',
      parent: 'theworld',
      name: 'Serbia',
      value: 8790574,
      group: 'europe'
    },
    {
      id: 'croatia',
      parent: 'theworld',
      name: 'Croatia',
      value: 4189353,
      group: 'europe'
    },
    {
      id: 'bosniaandherzegovina',
      parent: 'theworld',
      name: 'Bosnia and Herzegovina',
      value: 3507017,
      group: 'europe'
    },
    {
      id: 'albania',
      parent: 'theworld',
      name: 'Albania',
      value: 2930187,
      group: 'europe'
    },
    {
      id: 'republicofmacedonia',
      parent: 'theworld',
      name: 'Republic of Macedonia',
      value: 2083160,
      group: 'europe'
    },
    {
      id: 'slovenia',
      parent: 'theworld',
      name: 'Slovenia',
      value: 2079976,
      group: 'europe'
    },
    {
      id: 'montenegro',
      parent: 'theworld',
      name: 'Montenegro',
      value: 628960,
      group: 'europe'
    },
    {
      id: 'malta',
      parent: 'theworld',
      name: 'Malta',
      value: 430835,
      group: 'europe'
    },
    {
      id: 'andorra',
      parent: 'theworld',
      name: 'Andorra',
      value: 76965,
      group: 'europe'
    },
    {
      id: 'gibraltar',
      parent: 'theworld',
      name: 'Gibraltar',
      value: 34571,
      group: 'europe'
    },
    {
      id: 'sanmarino',
      parent: 'theworld',
      name: 'San Marino',
      value: 33400,
      group: 'europe'
    },
    {
      id: 'vaticancity',
      parent: 'theworld',
      name: 'Vatican City',
      value: 792,
      group: 'europe'
    },
    {
      id: 'germany',
      parent: 'theworld',
      name: 'Germany',
      value: 82114224,
      group: 'europe'
    },
    {
      id: 'france',
      parent: 'theworld',
      name: 'France',
      value: 64979548,
      group: 'europe'
    },
    {
      id: 'netherlands',
      parent: 'theworld',
      name: 'Netherlands',
      value: 17035938,
      group: 'europe'
    },
    {
      id: 'belgium',
      parent: 'theworld',
      name: 'Belgium',
      value: 11429336,
      group: 'europe'
    },
    {
      id: 'austria',
      parent: 'theworld',
      name: 'Austria',
      value: 8735453,
      group: 'europe'
    },
    {
      id: 'switzerland',
      parent: 'theworld',
      name: 'Switzerland',
      value: 8476005,
      group: 'europe'
    },
    {
      id: 'luxembourg',
      parent: 'theworld',
      name: 'Luxembourg',
      value: 583455,
      group: 'europe'
    },
    {
      id: 'monaco',
      parent: 'theworld',
      name: 'Monaco',
      value: 38695,
      group: 'europe'
    },
    {
      id: 'liechtenstein',
      parent: 'theworld',
      name: 'Liechtenstein',
      value: 37922,
      group: 'europe'
    },
        {
      id: 'brazil',
      parent: 'theworld',
      name: 'Brazil',
      value: 209288278.71,
      group: 'southamerica',
      text: ' '
    },
    {
      id: 'colombia',
      parent: 'theworld',
      name: 'Colombia',
      value: 49065615,
      group: 'southamerica'
    },
    {
      id: 'argentina',
      parent: 'theworld',
      name: 'Argentina',
      value: 44271041,
      group: 'southamerica'
    },
    {
      id: 'peru',
      parent: 'theworld',
      name: 'Peru',
      value: 32165485,
      group: 'southamerica'
    },
    {
      id: 'venezuela',
      parent: 'theworld',
      name: 'Venezuela',
      value: 31977065,
      group: 'southamerica'
    },
    {
      id: 'chile',
      parent: 'theworld',
      name: 'Chile',
      value: 18054726,
      group: 'southamerica'
    },
    {
      id: 'ecuador',
      parent: 'theworld',
      name: 'Ecuador',
      value: 16624858,
      group: 'southamerica'
    },
    {
      id: 'bolivia',
      parent: 'theworld',
      name: 'Bolivia',
      value: 11051600,
      group: 'southamerica'
    },
    {
      id: 'paraguay',
      parent: 'theworld',
      name: 'Paraguay',
      value: 6811297,
      group: 'southamerica'
    },
    {
      id: 'uruguay',
      parent: 'theworld',
      name: 'Uruguay',
      value: 3456750,
      group: 'southamerica'
    },
    {
      id: 'guyana',
      parent: 'theworld',
      name: 'Guyana',
      value: 777859,
      group: 'southamerica'
    },
    {
      id: 'suriname',
      parent: 'theworld',
      name: 'Suriname',
      value: 563402,
      group: 'southamerica'
    },
    {
      id: 'frenchguiana',
      parent: 'theworld',
      name: 'French Guiana',
      value: 282731,
      group: 'southamerica'
    },
    {
      id: 'falklandislands',
      parent: 'theworld',
      name: 'Falkland Islands',
      value: 2910,
      group: 'southamerica'
    },
  ];

  let chartConfig = {
    type: 'bubble-pack',
    plotarea: {
      margin: 10
    },
    options: {
      palette: ['#ff5252', '#448aff', '#ffab40'],
      padding: 2,
      minSize: 3,
      groupFilter: ['southamerica', 'europe'],
      format: {
        short: true,
        decimals: 1,
        decimalsSeparator: '.',
        thousandsSeparator: ','
      },
      text: ' '
    },
    series: chartData
  };
  
  zingchart.loadModules('bubble-pack', function(){
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  });
});

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Row Selector Column Type

Full Code

Demo Gallery