jQuery UI Multiselect widget does not work

Question

I'm applying the jquery UI Multiselect Widget for filter of jqGrid from Oleg's answer. It works fine. But there is a problem when using 2 grids that have two similar columns.

These columns (in two different grids) have same value for "name" property. So the element Id of two these filters are same. Because of this, when I select value of multiselect filter of the second grid, but the effect occurs on filter of the first grid.

Example: in the following screenshots, if i choose a value of filter 2, the same value of filter 1 will be selected instead.

Grid 1 column model:

 grid1ColumnModel = [
{ label: 'PrefRetRuleTierID', name: 'PrefRetRuleTierID', index: 'PrefRetRuleTierID', hidden: true, hidedlg: true },
{ label: 'PrefRetRuleID', name: 'PrefRetRuleID', index: 'PrefRetRuleID', hidden: true, hidedlg: true },

{
    label: 'Transaction Set', name: 'TierID', index: 'TierID', width: 230, editable: false, hidedlg: true,
    edittype: 'select', formatter: 'select',
    editoptions: { value: GetDataFromWebMethod(grid1_URLTier, '') },
    stype: 'select',
    searchoptions: {
        value: initGridFilterData(grid1_URL_Load_Filter_Tier_By_PrefRetRuleId, ddlSelector, 0, 'tierId', 0),
        sopt: ["eq"],
        attr: { multiple: 'multiple', size: 3 },
        dataInit: dataInitMultiselect
    },
    sorttype: Grid1_SortByText_TierID
},
{
    label: 'Switch Pos / Neg Sign', name: 'SwitchSign', index: 'SwitchSign', editable: false, width: 110,
    align: 'center', edittype: 'checkbox', editoptions: { value: 'true:false' }, formatter: 'checkbox',
    stype: 'select', searchoptions: {
        value: ':All;true:Yes;false:No',
        sopt: ["eq"],
        attr: { multiple: 'multiple', size: 3 },
        dataInit: dataInitMultiselect
    }
},
{ label: 'Comments', name: 'Comments', index: 'Comments', editable: false },
{ name: CRUDIndex, index: CRUDIndex, hidden: true, hidedlg: true }
];

Grid 2 column model

grid2ColumnModel = [
{ label: 'TierFilterID', name: 'TierFilterID', index: 'TierFilterID', hidden: true, hidedlg: true },
{ label: 'PrefRetRuleID', name: 'PrefRetRuleID', index: 'PrefRetRuleID', hidden: true, hidedlg: true },
{
    label: 'Transaction Set', name: 'TierID', index: 'TierID', editable: false, hidedlg: true,
    edittype: 'select', formatter: 'select',
    editoptions: { value: GetDataFromWebMethod(grid2_URLTier, '')},
    stype: 'select',
    searchoptions: {
        value: initGridFilterData(grid1_URL_Load_Filter_Tier_By_PrefRetRuleId, ddlSelector, 0, 'tierId', 0),
        sopt: ["eq"],
        attr: { multiple: 'multiple', size: 3 },
        dataInit: dataInitMultiselect
    },
    sorttype: Grid2_SortByText_TierID
},
{
    label: 'Filter Field', name: 'UDFFieldID', index: 'UDFFieldID', editable: false, hidedlg: true,
    edittype: 'select', formatter: 'select',
    editoptions: { value: GetDataFromWebMethod(grid2_URL_UDFField), dataUrl: grid2_URL_UDFField, buildSelect: buildList },
    stype: 'select', searchoptions: {
        //dataUrl: grid2_URL_UDFField, buildSelect: buildList
        value: GetDataFromWebMethod(grid2_URL_UDFField),
        sopt: ["eq"],
        attr: { multiple: 'multiple', size: 3 },
        dataInit: dataInitMultiselect
    },
    sorttype: Grid2_SortByText_UDFFieldID
},
{
    label: 'Filter Criteria', name: 'FilterCriteria', index: 'FilterCriteria', editable: false, hidedlg: true,
    edittype: 'select', formatter: 'select', align: 'center',
    editoptions: { value: ':;=:=;<>:<>;>:>;>=:>=;<=:<=' }, stype: 'select',
    searchoptions: {
        value: ':;=:=;<>:<>;>:>;>=:>=;<=:<=',
        sopt: ["eq"],
        attr: { multiple: 'multiple', size: 3 },
        dataInit: dataInitMultiselect
    }
},
{ label: 'Value', name: 'FilterValue', index: 'FilterValue', editable: false, hidedlg: true },
{ name: CRUDIndex, index: CRUDIndex, hidden: true, hidedlg: true }
];

Is there anyway to custom the Id of filter or something like that to prevent this issue?

Which version of jqGrid you use and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? The ids of searching fields depend on the answer on your question. I develop free jqGrid fork since the end of 2014. Look at the demo http://jsfiddle.net/OlegKi/dj35p611/9/ which I created for [the old issue](https://github.com/free-jqgrid/jqGrid/issues/254). You can modify the demo by adding the second grid. — Oleg, Sep 27 '16 at 11:38
@Oleg: I'm really sorry for replying late, Oleg. I have already resolved this issue by using a workaround. This issue is only occurred when I click on the name of selector's element. It still works well if I click on the checkbox icon. So my solution is that I will trigger the click event of checkbox if user clicks on selector's element name. And then preventing the click event of that element. It seems to be a stupid way, but it resolves my issue. Anyway, I have to say a big thank to you. — Khoa Nguyen, Oct 19 '16 at 14:31

jQuery UI Multiselect widget does not work

0 Answers0