Excel like filtering

[joshParticipant]

Am trying to implement an excel like filtering and this part of my is my code

var source =
{
localdata: data,
datatype: “json”,

datafields:
[ { name: ‘evidence’, map: ‘fields>evidence’, type: ‘string’ },
{ name: ‘device_name’, map: ‘fields>device_name’, type: ‘string’ },
{ name: ‘vid_pid’, map: ‘fields>vid_pid’, type: ‘timestamp’ },
{ name: ‘install’, map: ‘fields>install’, type: ‘date’ },
{ name: ‘volume_device’, map: ‘fields>volume_device’, type: ‘date’ },
{ name: ‘disk_device’, map: ‘fields>disk_device’, type: ‘date’ },
{ name: ‘usb_type’, map: ‘fields>usb_type’, type: ‘string’ },
{ name: ‘vid’, map: ‘fields>vid’, type: ‘string’ },
{ name: ‘pid’, map: ‘fields>pid’, type: ‘string’ },
{ name: ‘hub’, map: ‘fields>hub’, type: ‘number’ },
{ name: ‘port’, map: ‘fields>port’, type: ‘number’ },
{ name: ‘vendor’, map: ‘fields>vendor’, type: ‘string’ },
{ name: ‘product’, map: ‘fields>product’, type: ‘string’ },
{ name: ‘revision’, map: ‘fields>revision’, type: ‘string’ },
{ name: ‘volume_guid’, map: ‘fields>volume_guid’, type: ‘string’ },
{ name: ‘volume’, map: ‘fields>volume’, type: ‘string’ },
{ name: ‘volume_name’, map: ‘fields>volume_name’, type: ‘string’ },
{ name: ‘user’, map: ‘fields>user’, type: ‘string’ },
{ name: ‘user_datetime’, map: ‘fields>user_datetime’, type: ‘date’ },
{ name: ‘instance_id’, map: ‘fields>instance_id’, type: ‘string’ },
{ name: ‘property_keys’, map: ‘fields>property_keys’, type: ‘date’ },
{ name: ‘vol_serial1’, map: ‘fields>vol_serial1’, type: ‘string’ },
{ name: ‘vol_name1’, map: ‘fields>vol_name1’, type: ‘string’ },
{ name: ‘last_modify_regtimes1’, map: ‘fields>last_modify_regtimes1’, type: ‘date’ },
{ name: ‘vol_serial2’, map: ‘fields>vol_serial2’, type: ‘string’ },
{ name: ‘vol_name2’, map: ‘fields>vol_name2’, type: ‘string’ },
{ name: ‘last_modify_regtimes2’, map: ‘fields>last_modify_regtimes2’, type: ‘date’ },
{ name: ‘vol_serial3’, map: ‘fields>vol_serial3’, type: ‘string’ },
{ name: ‘vol_name3’, map: ‘fields>vol_name3’, type: ‘string’ },
{ name: ‘last_modify_regtime3’, map: ‘fields>last_modify_regtime3’, type: ‘date’ },
{ name: ‘vol_serial4’, map: ‘fields>vol_serial4’, type: ‘string’ },
{ name: ‘vol_name4’, map: ‘fields>vol_name4’, type: ‘string’ },
{ name: ‘last_modify_regtime4’, map: ‘fields>last_modify_regtime4’, type: ‘date’ },
{ name: ‘vol_serial5’, map: ‘fields>vol_serial5’, type: ‘string’ },
{ name: ‘vol_name5’, map: ‘fields>vol_name5’, type: ‘string’ },
{ name: ‘last_modify_regtime5’, map: ‘fields>last_modify_regtime5’, type: ‘date’ },

],
};
var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ’100%’,
height:450,
source: dataAdapter,
altrows: true,
sortable: true,
groupable: true,
columnsresize: true,
filterable: true,
showfilterrow: true,
filtermode: ‘excel’,
autoshowfiltericon: false,

selectionmode: ‘multiplecellsextended’,
columns:
[ { text: ‘evidence’, columntype: ‘textbox’, datafield: ‘evidence’, width: 50 },
{ text: ‘Device Name’, columntype: ‘textbox’, datafield: ‘device_name’, width: 130 },
{ text: ‘VID/PID’, columntype: ‘textbox’, datafield: ‘vid_pid’, width: 90 },
{ text: ‘Install’, columntype: ‘textbox’, datafield: ‘install’, width: 60 },
{ text: ‘Disk Device’, columntype: ‘textbox’, datafield: ‘disk_device’, width: 100 },
{ text: ‘Volume Device’, columntype: ‘textbox’, datafield: ‘volume_device’,width: 130},

{ text: ‘Type’, columntype: ‘textbox’, datafield: ‘usb_type’,width: 60 },
{ text: ‘VID’, columntype: ‘textbox’, datafield: ‘vid’, width: 60 },
{ text: ‘PID’, columntype: ‘textbox’, datafield: ‘pid’, width: 70 },
{ text: ‘Vendor’, columntype: ‘textbox’, datafield: ‘vendor’, width: 90 },
{ text: ‘Product’, columntype: ‘textbox’, datafield: ‘product’,width: 60 },
{ text: ‘Revision’, columntype: ‘textbox’, datafield: ‘revision’, width: 100 },
{ text: ‘Volume Guid’, columntype: ‘textbox’, datafield: ‘volume_guid’, width: 130},

{ text: ‘volume’, columntype: ‘textbox’, datafield: ‘volume’, width: 60 },
{ text: ‘Volume Name’, columntype: ‘textbox’, datafield: ‘volume_name’, width: 60 },
{ text: ‘User’, columntype: ‘textbox’, datafield: ‘user’, width: 50 },
{ text: ‘user date time’, columntype: ‘textbox’, datafield: ‘user_datetime’, width: 50 },
{ text: ‘Instance Id’, columntype: ‘textbox’, datafield: ‘instance_id’, width: 150 },
{ text: ‘Volume Serial 1’, columntype: ‘textbox’, datafield: ‘vol_serial1’,width: 60 },
{ text: ‘Volume Name 1’, columntype: ‘textbox’, datafield: ‘vol_name1’, width: 100 },
{ text: ‘last Modify regtimes1’, columntype: ‘textbox’, datafield: ‘last_modify_regtimes1’, width: 130},

{ text: ‘volume serial 2’, columntype: ‘textbox’, datafield: ‘vol_serial2’, width: 60 },
{ text: ‘Volume name 2’, columntype: ‘textbox’, datafield: ‘vol_name2’, width: 60 },
{ text: ‘Last Modify regtimes2’, columntype: ‘textbox’, datafield: ‘last_modify_regtimes2’, width: 70 },
{ text: ‘volume serial 3’, columntype: ‘textbox’, datafield: ‘vol_serial3’, width: 60 },
{ text: ‘Volume name 3’, columntype: ‘textbox’, datafield: ‘vol_name3’, width: 60 },
{ text: ‘Last Modify regtime3’, columntype: ‘textbox’, datafield: ‘last_modify_regtime3’,width: 70 },
{ text: ‘volume serial 4’, columntype: ‘textbox’, datafield: ‘vol_serial4’, width: 60 },
{ text: ‘Volume name 4’, columntype: ‘textbox’, datafield: ‘vol_name4’, width: 60 },
{ text: ‘Last Modify regtime4’, columntype: ‘textbox’, datafield: ‘last_modify_regtime4’, width: 70 },
{ text: ‘volume serial 5’, columntype: ‘textbox’, datafield: ‘vol_serial5’, width: 60 },
{ text: ‘Volume name 5’, columntype: ‘textbox’, datafield: ‘vol_name5’, width: 60 },
{ text: ‘Last Modify regtime5’, columntype: ‘textbox’, datafield: ‘last_modify_regtime5’, width: 70 },

{ text: ‘Hub’, datafield: ‘hub’, cellsalign: ‘right’, cellsformat: ‘n2’ }
]
});
what do you think am missing?
Regards
Joshua

[DimitarParticipant]

Hello Joshua,

Your code seems correct. You may, however, be missing some script references, such as the one to jqxgrid.filter.js. Please compare your page to the demo Excel-like Filter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kbajpaiParticipant]

I am able to apply Excel-Like filtering to all the columns. I wanted to add excel-like filtering to only one column. In other words, one of my column has values that are Dropdown list, so I wanted to have a excel-like filtering for that particular column.

Thanks,
Kunal B.

[DimitarParticipant]

Hello Kunal B.,

The only way to have different filter types for the different columns is if you enable the filter row.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts