igGrid - custom filtering conditions

C-00229962

by rivanova

HTML

<!-- jQuery Required JavaScript Files -->
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>

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

<!-- DATA -->
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>

<!-- HTML Structure -->
<table id="grid"></table>

JavaScript

$(function() {
  $("#grid").igGrid({
    autoGenerateColumns: false,
    width: "100%",
    height: "450px",
    columns: [{
        headerText: "Product ID",
        key: "ProductID",
        dataType: "number",
      },
      {
        headerText: "Product Name",
        key: "Name",
        dataType: "string",
      },
      {
        headerText: "Color (custom filters)",
        key: "Color",
        dataType: "string",
      },
    ],
    dataSource: adventureWorks,
    features: [{
      name: "Filtering",
      columnSettings: [{
          columnKey: "ProductID",
          allowFiltering: false
        },
        {
          columnKey: "Color",
          // Determine which conditions to display for this column.
          conditionList: ["contains", "startsWith", "Black", "Silver", "Yellow"],
          customConditions: {
            // Custom condition #1
            Black: {
              labelText: "Black",
              expressionText: "Black",
              requireExpr: false,
              filterFunc: function(
                value,
                expression,
                dataType,
                ignoreCase,
                preciseDateFormat
              ) {
                return value === "Black";
              },
            },
            // Custom condition #2
            Silver: {
              labelText: "Silver",
              expressionText: "Silver",
              requireExpr: false,
              filterFunc: function(
                value,
                expression,
                dataType,
                ignoreCase,
                preciseDateFormat
              ) {
                return value === "Silver";
              },
            },
            // Custom condition #3
            Yellow: {
              labelText: "Yellow",
              expressionText: "Yellow",
              requireExpr: false,
              filterFunc: function(
                value,
                expression,
                dataType,
              ...