jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

JqGrid Advanced Search with 'Masked Input' plugin bug

Tags: advanced search Masked Input

18/05/2010
17:26

fromano2802

Member

Members

Forum Posts: 3

Member Since:
18/05/2010

Offline

Hi there,

as stated in http://stackoverflow.com/quest..... (see answer), the 'Masked Input' plugin works only with the first field you apply the mask to, but it doesn't work if you want to set up more than one field.

Hope you can help,

Cheers

19/05/2010
17:31

fromano2802

Member

Members

Forum Posts: 3

Member Since:
18/05/2010

Offline

If I can help more, here's the code I am using:

    jQuery("#east-grid").jqGrid({
        url: 'Viewer/GetItems/',
        datatype: "json",
        colNames: ['Id','Phone', 'Status'],
        colModel: [
            { name: 'ERN_Id', index: 'Id', width: 1, hidden: true },
         { name: 'Phone', sortable: false, width: 1, searchoptions: { sopt: ['eq'], datainit: phoneMask} },
         { name: 'Status', sortable: false, width: 1, stype: 'select',
             editoptions: { value: "A:Active/Changed;X:Re-Identified;R:Reserved;C:Cancelled;O:Rescinded;S:Suspended" },
             searchoptions: { sopt: ['eq'] }
         }
        ],
        scroll: 1,
        rowNum: 100,
        viewrecords: true,
        pager: '#east-grid_pager',
        multiselect: false,
        autowidth: true,
        hidegrid: false,
        mtype: 'POST',
        caption: 'Information Items'
    });
    jQuery("#east-grid").jqGrid('navGrid', '#east-grid_pager', { view: false, del: false, add: false, edit: false },
       {}, // default settings for edit
       {}, // default settings for add
       {}, // delete instead that del:false we need this
       {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
       {} /* view parameters*/
     );

phoneMask = function(elem) {
        $(elem).mask("(999) 999-9999");
    };

28/05/2010
10:02

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I will see this, but it seems to be a problem in the masked plugin.

Also in order to understand what is happen:

1. Initiallly we create all the needed fields for the multiselect.

2. Again with this we create a needed events. and so on.

3. If you click plus button (to add another field in the search) we get the field

and do jQuery.clone(true) - this mean we clone the elements with all the events binded to him.

You can construct a simple test.

Create a simple form and attach to one field a masked input.

Then create a button and clone the element with clone(true) - see if the masked input is here.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

31/05/2010
02:43

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Tony!

Try with the following example from http://www.ok-soft-gmbh.com/jq.....edEdit.htm. In the example there are defined a integer mask on "Tax" and "Total" columns. You can be able use masked input plugin without any problem in "Inline Edit" mode and "Form Edit" mode (saving of data is not implemented in this example), but has a large problem with Advanced Searching after adding a second search field.

To reproduce the problem you can do following:

1) make a double-click on a row and try input some data in Tax" and "Total" columns. You will be able input any digits corresponds to the mask. All other characters will be blocked.

2) use navigation bar to modify a row. You can verify that you can input any digits corresponds to the mask in "Tax" and "Total" fields.

3) use navigation bar to start the search dialog. Verify that you can input any digits corresponds to the mask in "Tax" or "Total" fields.

4) !!! Now click on "+" to add a second search field. Independent of the value of cloneSearchRowOnAdd option we will not be able to make any input in the "Tax" or "Total" fields in the second search field. The problem exist independent on what field was selected in the first search dialog field. It can be "Tax" or "Total" fields or it can be any other field like "Inv No".

So for me the problem look like a bug in jquery.searchFilter.js somewhere inside of jQ.find(".ui-add").click handler (between 388-412 lines). The results are independent on the value of cloneSearchRowOnAdd option.

Best regards
Oleg

01/06/2010
12:32

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Oleg,

Thanks for the test case.

Now why the masked plugin work in editing modules and does not work in searchFilter?

The reason for this is that in editing modules we have "uniquie" id's where we bind the masked plugin and this work ok.

Search Filter work little different.

1. When we have custom dataInit and DataEvents we create a template for all these fields.

2. When we select such one we activate the appropriate table row element.

3. When we click the add button we clone the template and insert it after the active row.

In order to ilustrate this:

Create a form (not using jqGrid) something like this:

<form….>

<table>

<td> Label </td> <td> <input class='field1' type='text'/></td>

</tr>

</table>

</form>

Apply masked plugin to input of class= 'field1'

jQuery(".field1″).mask("99.99″);

Then clone the table row of class'myclass' and insert it before or after this row
var row = jQuery(".myclass");
var newRow = row.clone(true).insertAfter(row);

See if the plugin will work – it will not work.
This is a way that searchFilter works.

In order to fix we should unbind all existing events of the cloned row elements and bind it again.
Will try to fix this, but not in the upcomming 3.7

Best Regards
Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

01/06/2010
14:20

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello Tony!

Thank you for the information. I understood the problem exactly how you as wrote. I see one more a way to fix the problem and to expand a little the features of Search plugin. I posted this in a features request /blog/?page_id=393/feature-request/editrules-in-serach-dialog/. The idea is to integrate jquery.searchFilter.js more in jqGrid.

In grid.inlinedit.js, grid.celledit.js and grid.formedit.js is used the method createEl from grid.common.js. This method has as an option id, which are a little different for inline edit and form edit. Why one use clone of rows in grid.searchFilter.js and not use createEl to build full data element one more time? Usage of createEl could give more advantaged like checkbox type in searching and much more. I understand, that exact implementing of such way in grid.searchFilter.js can be not so easy, but with this way it seems to me one can not only fix problems with masked input plugin and make unneeded parameters like datepickerFix. One will receive some nice features in search dialog well known in edit mode (checkbox for example).

Best regards
Oleg