jqxGrid not able to cutomize derived column filters using "addfilter" function

Question

With jQxGrid,
I am trying to combine columns firstname and lastname, so that if a user filters on the name it actually searches firstname or lastname.
Ultimately the 'updatebounddata' will send this information to the server and i can just return the appropriate values based on the datafields, but the filter's datafields need to become firstname, lastname.

In my example below, i was hoping that const ex and const ex1 would have different values once the name filter is updated to firstname and lastname filter.

But no updates are occurring. :/

(This is based on an existing post on their forums but I am not able to register there and didn't know where else to turn.. )

HTML:

<div id='jqxWidget'>
  <div id="jqxgrid"></div>
</div>

Javascript:

var data = generatedata(500);

var source = {
  localdata: data,
  datafields: [
    {
      name: "firstname",
      type: "string"
    },
    {
      name: "lastname",
      type: "string"
    },
    {
      name: "name",
      type: "string",
      map: "firstname, lastname"
    }
  ],
  datatype: "array",
  beforeLoadComplete: function (records) {
    const data = new Array();

    for (var i = 0; i < records.length; i++) {
      const current = records[i];
      current.name = `${current.firstname} ${current.lastname}`;
      data.push(current);
    }

    return data;
  },
  filter: function (filters, b, c) {
    updateFilters();
  }
};

var adapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
  width: "100%",
  theme: "energyblue",
  source: adapter,
  filterable: true,
  showfilterrow: true,
  columns: [
    {
      text: "Name",
      datafield: "name",
      columngroup: "Name",
      width: 1190
    }
  ]
});

function updateFilters() {

  // Take snapshot of active filters
  debugger;

  const ex = $("#jqxgrid").jqxGrid("getfilterinformation");

  if (ex.length > 1) {
    $("#jqxgrid").jqxGrid("updatebounddata");
  } else {
    const activeFilters = [];

    $.each(
      $("#jqxgrid").jqxGrid("getfilterinformation"),
      (index, filterInfo) => {
        if (filterInfo.datafield === "name") {
          let value = filterInfo.filter.filtervalue
            ? filterInfo.filter.filtervalue
            : filterInfo.filter.getfilters()[0].value;

          let condition = filterInfo.filter.filtervalue
            ? filterInfo.filter.comparisonoperator
            : filterInfo.filter.getfilters()[0].condition;

          activeFilters.push({
            columnName: "firstname",
            filterValue: value.toLowerCase(),
            filterCondition: condition.toLowerCase()
          });

          activeFilters.push({
            columnName: "lastname",
            filterValue: value.toLowerCase(),
            filterCondition: condition.toLowerCase()
          });
        }
      }
    );

    //$("#jqxgrid").jqxGrid("clearfilters");
    // $("#jqxgrid").jqxGrid("removefilter", 'name');

    // Update bound data / reset init row etc

    // Reapply filters
    activeFilters.forEach((filter) => {
      const filtergroup = new $.jqx.filter();
      filtergroup.operator = "or";
      const filtervalue = filter.filterValue;
      const filtercondition = filter.filterCondition;
      const filter1 = filtergroup.createfilter(
        "stringfilter",
        filtervalue,
        filtercondition
      );

      filtergroup.addfilter(1, filter1);
      $("#jqxgrid").jqxGrid("addfilter", filter.columnName, filtergroup);
    });

    const ex1 = $("#jqxgrid").jqxGrid("getfilterinformation");

    $("#jqxgrid").jqxGrid("updatebounddata");

    //$("#jqxgrid").jqxGrid("refreshfilterrow");
  }
}

Answer 1

This seems to work on jQXWidgets v19.
The values of const ex, const ex1 are different.

This is probably a bug in the jqxWidgets library (v12) that I was using.

I think the bug is related to:-

https://www.jqwidgets.com/community/topic/filtering-issues-when-mixing-addfilter-and-filter-row/