CODEWITHSUNDEEP
jqgrid
rboarman
rboarman

Reputation: 8214

jqGrid toobar not filtering when typing

Using jqGrid js v5.5.0, the filter as you type functionality is not working for some fields.

Typing into the Title field causes the column to display only values that match what has been entered.

enter image description here

Typing a "2" into the Serial filter results in nothing being displayed.

enter image description here

The expected result is for the serial column to behave exactly as the title column and show partial matches.

All data is preloaded into the grid.

Here's the code and a Fiddle demonstrating the issue.

http://jsfiddle.net/rboarman/p7uyq6w2/15/

var mydata = [{
    "Id": "5b1600409fc4a04a1001af6c",
    "HitNumber": "2169957",
    "Title": "Centrifuge",
    "ClientIdNumber": "",
    "Status": "Requested",
    "IsVisible": false,
    "Manufacturer": "Corning",
    "ModelNumber": "6765/C1501",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Centrifuge",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/"
  },
  {
    "Id": "5b1600409fc4a04a1001af6b",
    "HitNumber": "2169956",
    "Title": "Centrifuge",
    "ClientIdNumber": "",
    "Status": "Requested",
    "IsVisible": false,
    "Manufacturer": "Corning",
    "ModelNumber": "6765/C1501",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Centrifuge",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/",
  },
  {
    "Id": "5b1600409fc4a04a1001af70",
    "HitNumber": "2169961",
    "Title": "Pipettes",
    "ClientIdNumber": "",
    "Status": "Available",
    "IsVisible": true,
    "Manufacturer": "Sartorius",
    "ModelNumber": "Picus / Tacta",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Pipettes",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/",
  }
];

grid = $("#jqgrid").jqGrid({
  data: mydata, //insert data from the data object we created above
  datatype: 'local',
  ajaxGridOptions: {
    contentType: 'application/json; charset=utf-8'
  },
  height: 'auto',
  colNames: ['Id', 'Serial', 'Title', 'AvailForRedeploy'],
  colModel: [{
      name: 'Id',
      index: 'Id',
      hidden: true,
    },
    {
      name: 'HitNumber',
      index: 'Hit #',
      sortable: true,
      search: true
    },
    {
      name: 'Title',
      index: 'Title',
      sortable: true,
    },
    {
      name: 'AvailForRedeploy',
      index: 'AvailForRedeploy',
      formatter: 'date',
      formatoptions: {
        srcformat: "ISO8601Long",
        newformat: "m/d/Y h:i A"
      },
      sortable: true,
    }
  ],
  rowNum: 25,
  rowTotal: 2000,
  loadonce: true,
  rowList: [25, 50, 100],
  pager: '#pjqgrid',
  sortname: 'id',
  toolbarfilter: true,
  viewrecords: true,
  sortorder: "asc",
  caption: "",
  multiselect: true,
  multiboxonly: true,
  autowidth: true,
  toolbar: [true, "both"],
});

$("#jqgrid").filterToolbar({
  stringResult: true,
  searchOnEnter: false
});

Upvotes: 0

Views: 24

Answers (1)

Tony Tomov
Tony Tomov

Reputation: 3277

The problem you have is in definition in colModel and especially the index property.

This property can't have value with space. Moreover the index property when defined is used in searching. Your definition is:

{
    name: 'HitNumber',
    index: 'Hit #',
    sortable: true,
    search: true
},

which is not correct. In order this to work set the name which is used in your data: i.e

{
    name: 'HitNumber',
    index: 'HitNumber,
    sortable: true,
    search: true
},

More about colModel option index you can read in our documentation here

Upvotes: 1

Related Questions