title: jqgrid mask edit
body: <p>I am using a jqgrid where I'd like to use inline editing and mask the entry such that the user is prompted to enter hh:mm where hh = hours and mm = minutes.  I'm using the digitalBush masked jquery plugin.  The issue is that when I call it from initData, it overwrites the current data in that field.  I noticed that this behavior is different when you use a modal form to do the editing.  Does anyone have a solution for this issue? I'll call the mask from any event, and I'm happy to use any available plugin.  As far as I can tell, the jqgrid formatter does not provide a custom mask that guides the user entry in the format in which I need it.  Also happy to be wrong about that (with a snippet of code to support it of course).</p>
  
  <p>Thanks so much in advance.</p>
  
  <p>Update: I managed to cobble together a demo of the problem I'm having.  S-O obviously strips out the html that I wanted to wrap this in so that it could be plugged in and run as-is, so you'll need to wrap this in some html to see it work.  Thanks again for the assistance.  Here's the code:</p>
  
  <pre><code>    &lt;title&gt;Mask Problem&lt;/title&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/css/ui.jqgrid.css" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.maskedinput-1.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/jquery.jqGrid.src.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $.jgrid.no_legacy_api = true;
          $.jgrid.useJSON = true;
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      $(function () {
          var lastSel = -1;
          var mydata = [
              { HoursWorked: "0:00" },
              ];
          $.mask.definitions['5'] = '[0-5]';
          $.mask.definitions['2'] = '[0-2]';
          var $grid = $("#MyGrid");
          $grid.jqGrid({
              datatype: "local",
              data: mydata,
              height: 'auto',
              width: 700,
              colNames: ["Hours Worked"],
              colModel: [
                      { name: "HoursWorked", index: "HoursWorked", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
                          dataInit: function (elem) {
                              $(elem).mask("29:59");
                          }
                      },
                          align: "center", editrules: { custom: true, custom_func: validHourEntry }
                      }
                    ],
              multiselect: false,
              caption: "My sample grid with Mask",
              rowNum: 10,
              cellEdit: true,
              rowList: [5, 10, 20],
              pager: '#MyGridpager',
              gridview: true,
              beforeSelectRow: function (rowid) {
                  if (rowid !== lastSel) {
                      $(this).jqGrid('restoreRow', lastSel);
                      lastSel = rowid;
                  }
                  return true;
              },
              cellsubmit: "clientArray"
          }).jqgrid("navGrid", "#MyGrid", { add: false, del: false }); ;
      });
  
  
  
  
  function validHourEntry(value, colname) {
      var editSuccess = true;
      var errorMsg = "";
      if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) {
          return [true, ""];
      } else {
          return [false, "is wrong time.&lt;br/&gt;Please enter the time in the form &lt;b&gt;hh:mm&lt;/b&gt;"];
      }
  }
  
  
  &lt;/script&gt;
  </code></pre>