igGrid Remote Paging with POST Body Extras

by georgianastasov

HTML

<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>
<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>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
  rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>

<div class="wrap">
  <div class="hero">
    <h1>Risk Register</h1>
    <p>Remote paging (25 / page) + custom filters sent in POST body on every request.</p>
  </div>

  <div class="card" id="filtersCard">
    <div class="row" role="group" aria-label="Filters">
      <div class="field">
        <label for="projectFilter">Project</label>
        <select id="projectFilter">
            <option value="P1" selected>P1</option>
            <option value="P2">P2</option>
          </select>
      </div>

      <div class="field">
        <label for="statusFilter">Status</label>
        <select id="statusFilter">
            <option value="Open" selected>Open</option>
            <option value="Closed">Closed</option>
          </select>
      </div>

      <div class="field">
        <button id="apply" title="Apply filters">Apply</button>
      </div>
    </div>

    <div class="hint">Tip: Open DevTools → Network. You should see a <em>POST</em> with a JSON body like
      <code>{"Project":"P1","Status":"Open","Note":"Hello-from-demo"}</code> and query
      <code>?PageIndex=0&PageSize=25</code>.
    </div>
  </div>

  <div class="card" id="gridCard">
    <div id="grid"></div>
 ...

CSS

:root {
  --bg: #0b1020;
  --card: #111936;
  --muted: #c7d2fe;
  --accent: #8ba5ff;
  --text: #eef2ff;
  --sub: #a5b4fc;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, #1f2a5b33, transparent),
    radial-gradient(900px 500px at -10% 120%, #26358b33, transparent),
    var(--bg);
  color: var(--text);
}

.wrap {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

.hero {
  margin-bottom: 16px;
}

.hero h1 {
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .3px;
}

.hero p {
  margin: 0;
  color: var(--sub)
}

.card {
  background: linear-gradient(180deg, #0f1530 0%, var(--card) 60%);
  border: 1px solid #2a3568;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  padding: 18px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

label {
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #aab3ee
}

select,
button {
  appearance: none;
  font: inherit;
  color: var(--text);
  background: #0e1631;
  border: 1px solid #37428a;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

select:focus,
button:focus {
  box-shadow: 0 0 0 3px #5a72ff55;
}

button {
  cursor: pointer;
  padding: 10px 16px;
  border: 1px solid #5d6df7;
  background: linear-gradient(180deg, #3e4df3, #2a39c9);
  font-weight: 600;
}

button:active {
  transform: translateY(1px);
}

.hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted)
}

.divider {
  height: 1px;
  background: #2a3568;
  margin: 16px 0 12px;
  opacity: .7
}

#gridCard {
  margin-top: 18px;
}

JavaScript

$(function () {
    // Data source: where/how the grid fetches data (POST + expected response shape)
    var ds = new $.ig.DataSource({
        type: "remoteUrl",
        dataSource: "https://68f1f03fb36f9750deeabef7.mockapi.io/demo/api/pages",
        requestType: "POST",
        responseDataKey: "records",
        responseTotalRecCountKey: "totalRecords",
        ajaxSettings: {
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: false
        }
    });

    // Grid setup: columns + remote paging
    $("#grid").igGrid({
        autoGenerateColumns: false,
        width: "100%",
        height: "500px",
        dataSource: ds,
        primaryKey: "ProductID",
        columns: [
            { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
            { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
            { headerText: "Product #", key: "ProductNumber", dataType: "string", width: "30%" }
        ],
        features: [{
            name: "Paging",
            type: "remote",
            pageSize: 25,
            pageIndexUrlKey: "PageIndex",
            pageSizeUrlKey: "PageSize",
            recordCountKey: "totalRecords"
        }]
    });

    // Apply: reload and reset to first page
    $("#apply").on("click", function () {
        var $g = $("#grid");
        $g.igGrid("dataBind");
        if ($g.data("igGridPaging")) $g.igGridPaging("pageIndex", 0);
    });
});