jqGrid 4.5.2. Filtering with lookup field
I have jqGrid with client-side filtering. I have there one column, id_medpred which contains foreign key to related table, but displays appropriated string field name from related table medpreds .
I want : to search by string field name from filter toolbar in that column, but I don't know what I should to do. At this moment, filter works only by integer value of foreign key. Initialization of grid:
$("#table-extrefs").jqGrid({
editurl: 'test.php',
datatype: 'clientSide',
rowNum: 9999,
loadonce: true,
cellEdit: true,
cellsubmit: 'remote',
cellurl: 'index.php?article=external_referers&act=process_submit',
colNames: [
'ФИО врача',
'Код врача',
'Дата добавления',
'Специальность',
'Телефон',
'Медпред',
'Медпред',
'ЛПУ',
],
colModel: [
{name: 'id', index: 'id', hidden: true, key: true},
{name: 'fio', index: 'fio', width: '200', sortable: true, sorttype: 'text', editable: true, edittype: "text", frozen: true},
{name: 'code', index: 'code', width: '55', sortable: true, sorttype: 'text', editable: true, edittype: "text", frozen: true},
{name: 'adding_date', formatter: 'date', index: 'adding_date', width: '65', sortable: true, sorttype: 'date', editable: false,
srcformat: 'dd.mm.YY', edittype: "text", frozen: true,
searchoptions: {
searchOperators: true,
sopt: ['ge'],
clearSearch: false,
dataInit: function (elem) {
$(elem).datepicker({
dateFormat: 'dd.mm.yy',
autoSize: true,
language: 'ru',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}
}
},
{name: 'speciality', index: 'speciality', sortable: true, width: '95', editable: true, edittype: "text", frozen: true},
{name: 'phone', index: 'phone', editable: true, edittype: "text", width: '90', frozen: true},
{name: 'id_medpred', index: 'id_medpred', sortable: true, editable: true,
edittype: 'select',
formatter: 'select',
editoptions: {value: getAllMedpreds()},
frozen: true,
width: '100',
//searchrules : { custom_func : function(a,b){ console.log(a,b);}}
},
{name: 'medpred', index: 'medpred', sortable: true, editable: true, edittype: "text", frozen: true, hidden: true, },
{name: 'lpu', index: 'lpu', sortable: true, editable: true, edittype: "text", frozen: true},
{name: 'metro', index: 'metro', sortable: true, editable: true, edittype: "text", width: '150', frozen: true},
{name: 'district', index: 'district', editable: true, edittype: "text", width: '50', frozen: true},
],
forceFit: true,
ignoreCase: true,
height: '630px',
width: '1200px',
viewrecords: true,
});
EDIT
Thanks for Tony Tomow.
I made some pretty ugly solution, it did work out, though:
beforeSearch : function() {
//gs_id_medpred it's id of filter input field.
var medpred = $('#gs_id_medpred').val();
var medpreds = getAllMedpreds()
var filters = $('#table-extrefs').getGridParam("postData").filters;
if ("undefined" != typeof(medpred) && medpred.length > 0)
{
filters_obj = JSON.parse(filters);
for (var i in filters_obj.rules)
{
if (filters_obj.rules[i].field === 'id_medpred')
{
for (var j in medpreds)
{
if (medpreds[j].indexOf(medpred)!==-1)
{
filters_obj.rules[i].data = j;
break;
}
}
}
}
$('#table-extrefs').getGridParam("postData").filters = JSON.stringify(filters_obj);
var filters = $('#table-extrefs').getGridParam("postData").filters;
console.log(filters);
}
I handled beforeSearch, and changed filter data accordingly to it's ID in dictionary of medpreds .
At first read I see two possible solutions
Use the select2 plugin for the select element
Define hidden filed which correspond to medpreds name, but set it to be searchable (this is in case if search dialog is used) This way in search dialog the name will appear and you can search on it
{name : "medspredname", hidden: true,... searchoptions: {searchhidden: true} ...}