ignite-ui infrafistics PERFORMANCE

30K cells

by wwwroot

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/northwindProducts"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div class="scroll">
<table id="grid1"></table>
</div>

CSS

.scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  height: 500px;
}

JavaScript

$(function() {
  var noOfColumns = 100;
  var noOfRows = 300;

  var columnSettings = [{
    headerText: "",
    key: "ProductID",
    hidden: true
  }, {
    headerText: "Product Name",
    key: "ProductName",
    readOnly: true,
    width: "150px"
  }, {
    headerText: "All",
    key: "exclude-all",
    readOnly: false,
    dataType: "string",
    width: "60px"
  }];


  function init() {
    var data = [];
    for (i = 1; i <= noOfRows; i++) {
      var row = {
        "ProductID": i,
        "ProductName": (new Date()).toISOString(),
        "exclude-all": "X"
      };
      for (j = 1; j < noOfColumns - 2; j++) {
        var key = "Exclude" + j;
        row[key] = "X";
        if (i === 1) {
          columnSettings.push({
            headerText: key,
            key: key,
            readOnly: false,
            dataType: "string",
            width: "50px"
          });
        }
      }
      data.push(row);
    }
    //console.log(data);
    return data;
  }

  var data_source = init();


  $('#grid1').igGrid({
    dataSource: data_source,
    primaryKey: "ProductID",
    height: "400px",
    enableHoverStyles: false,
    autoGenerateColumns: false,
    columns: columnSettings,

    features: [{
      name: "Filtering",
      allowFiltering: true,
      caseSensitive: false
    }, {
      name: 'Sorting',
      type: "local",
    }, {
      name: "Updating",
      validation: false,
      enableAddRow: false,
      editMode: "cell",
      excelNavigationMode: true,
      enableDeleteRow: false
    }]
  });
});