<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>
$.ig.checkboxMarkupClasses = 'ui-state-default ui-corner-all ui-igcheckbox-small';
var products = [
                { 'Id': 1, 'Name': '果汁100% オレンジ', 'Price': 2000, 'RegisteredDate': new Date(2019, 2, 15), 'IsActive': true },
                { 'Id': 2, 'Name': '果汁100% グレープ', 'Price': 1900, 'RegisteredDate': new Date(2019, 2, 17), 'IsActive': true },
                { 'Id': 3, 'Name': '果汁100% レモン', 'Price': 1000, 'RegisteredDate': new Date(2019, 2, 21), 'IsActive': true },
                { 'Id': 4, 'Name': '果汁100% ピーチ', 'Price': 2200, 'RegisteredDate': new Date(2019, 3, 4), 'IsActive': false },
                { 'Id': 5, 'Name': 'コーヒーマイルド', 'Price': 11000, 'RegisteredDate': new Date(2019, 4, 10), 'IsActive': true },
            ];

$("#grid").igGrid({
  dataSource: products,
  primaryKey: "Id",
  width: '620px',
  autoGenerateColumns: false,
  renderCheckboxes: true,
  columns: [
    { headerText: "製品 ID", key: "Id", dataType: "number", width: "70px" },
    { headerText: "製品名", key: "Name", dataType: "string", width: "200px" },
    { headerText: "単価", key: "Price", dataType: "number", width: "120px", format: "currency" },
    { headerText: "登録日", key: "RegisteredDate", dataType: "date", width: "120px", format: "date" },
    { headerText: "アクティブ", key: "IsActive", dataType: "bool", width: "110px" }
  ],
  features: [
    {
      name: "Updating",
      editMode: "cell",
      enableDeleteRow: false,
      enableAddRow: false,
      editCellStarting: function (evt, ui) {
        if (ui.columnKey === "IsActive" && $(evt.originalEvent.target).hasClass("ui-icon-check")) {
          ui.value = !ui.value;
        }

        var record = ui.owner.grid.findRecordByKey(ui.rowID);
        if(ui.columnKey === "Name" && !record.IsActive) {
          return false;
        }
      }
    }
  ]
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.