Question

I’m using several plugins attributed to css selectors and has been working properly.
The trouble is that by doing the same with the plugin jqgrid with edit mode, this same technique is not working.

I’ll try to explain:
for example.

I have a separate js file where I put the following

$ (". JQmaskdata"). InputMask ("99-99-9999") / / imput mask plugin

/ * Animate options: clip, fold, slide * /
$ (". JQCalendar"). Datepicker (
            {DateFormat, 'dd-mm-yy'
                Regional: 'en', / / ​​file regional [pt.js]
                showAnim 'clip'
                showButtonPanel: true / / show the button to go to close the current date +
            }
    );

if you do the following in an existing element on the page:

The result will be as expected. (Will show the masks and the calendar)

I’m doing this so that objects on the page that have these classes (JQmaskdata JQCalendar) can inherit this functionality.

I’m trying to do the same for jqgrid edit mode but is not working as expected

example with relevant code,

---

 / / Load Grid
    $ ("# List"). JqGrid ({
        datatype: "local"
        width: 465,
        / / Height: 280,
        colNames: ["ID", "", "Description", "", ""]
        colModel: [
          {Name: 'id', index: 'id', sorttype: "int", hidden: true},
          {Name: "data", index, "data", width: 80, editable: true, EditType "text",
          **editoptions: {dataInit: function (elem) {$ (elem). addClass ('JQmaskdata JQCalendar');}}
      },**
          {Name: "table," index "table", editable: false, hidden: true},
          {Name: "Action" index "action", width: 80, sortable: false, search: false} / / Buttons

        ]
        loadtext: 'Loading ...',
       ..........

The class is correctly placed in the input but does not work.

Thank you very much

---

Hello Scruffy The Janitor,
yes, it’s on purpose. it’s two separated classes. one two the mask and the other for the calendar.

In short if I do this in an existing page input works

<input type="text" id="mindadata" class="JQmaskdata JQCalendar" value="mindadata" /> works

But if you do not work the same in the edit jqgrid.

markup of jqgrid using inspect element of google crhome

<td role="gridcell" aria-describedby="list_descr" style="" title=""> <input type = "text" id = "0_descr" name = "descr" class = "editable JQmaskdata JQCalendar" style = "width: 98%; "role =" textbox "> </ td>

Answer 1

Simply adding the class at that point in the page is insufficent. You’re input is created after your mask is applied.

You might want to look at using the beforeEditCell event of the jqGrid to apply your mask to the cell at the point it becomes editable and the input element is inserted into the DOM.

Not sure if that’s the best event to use, but looks like the right one from the documentation:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing

Hope that helps.