jqxMaskedInput in jqxGrid

[Craig MatthewsParticipant]

Greetings.

Are there any plans to include jqxMaskedInput functionality into jqxGrid?

Thank you.

[Peter StoevKeymaster]

Hi Craig Matthews,

It is already possible to create custom editors in jqxGrid and it is demonstrated online here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic. The same approach can be used for creating Masked Input Editor.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Craig MatthewsParticipant]

After examining the referenced demo code, I worked up what I thought would be the appropriate changes.

Here is the relevant section of the jqxGrid columns definition:

                   { text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
                     createeditor: function(row, cellvalue, editor, cellText, width, height) {
                                     var inputElement = $('<input/>').prependTo(editor);
                                     inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                                   },
                     initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                                   var inputField = editor.find('input');
                                   if (pressedkey) {
                                      inputField.val(pressedkey);
                                      inputField.jqxMaskedInput('selectLast');
                                   } else {
                                      inputField.val(cellvalue);
                                      inputField.jqxMaskedInput('selectAll');
                                   }
                                 },
                     geteditorvalue: function(row, cellvalue, editor) {
                                       return editor.find('input').val();
                                     }
                   },

Unfortunately, what I got back in the console.log window was:
uncaught exception: jqxCore: Invalid parameter ‘[selectAll]’ does not exist.
uncaught exception: jqxCore: Invalid parameter ‘[selectLast]’ does not exist.
every time I double-clicked on the cell.

What am I missing?

Thank you.

[Peter StoevKeymaster]

Hi Craig Matthews,

The exceptions are correct. You cannot use API which does not exist. jqxMaskedInput does not have selectAll or selectLast methods. API Reference: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmaskedinput/jquery-masked-input-api.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Craig MatthewsParticipant]

Hi Peter Stoev,

Is there a way to get selectLast and selectAll functionality in jqxMaskedInput?

Also, the problem with the jqxMaskedInput in the grid is more complicated now. I added some console.log to display some values.

The involved code in the jqxGrid columns for this column is now:

{ text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
  cellsrenderer: function(row, columnfield, cellvalue, defaulthtml, columnproperties) {
                   console.log('cellsrenderer - cellvalue = "' + cellvalue + '", defaulthtml = "' + defaulthtml + '"');
                   if (cellvalue == stringOf(9, '0')) {
                      return '';
                   } else {
                      if (cellvalue.indexOf('-') > -1) {
                         return cellvalue;
                      } else {
                         return cellvalue.substr(0, 3) + '-' + cellvalue.substr(3, 2) + '-' + cellvalue.substr(5, 4);
                      }
                   }
                 },
  createeditor: function(row, cellvalue, editor, cellText, width, height) {
                  console.log('createeditor - cellvalue = "' + cellvalue + '", cellText = "' + cellText + '"');
                  var inputElement = $('<input/>').prependTo(editor);
                  inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                },
  initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
                var inputField = editor.find('input');
                if (pressedkey) {
                   inputField.val(pressedkey);
                } else {
                   inputField.val(cellvalue);
                }
              },
  geteditorvalue: function(row, cellvalue, editor) {
                    console.log('geteditorvalue - cellvalue = "' + cellvalue + '"');
                    return editor.find('input').val();
                  }
},

—–
Upon loading the grid from existing data, the console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
(11)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
When I set the grid editable=true, the console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
(11)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
createeditor – cellvalue = “000000000”, cellText = “000000000”
T?id=01001010000 (line 688)
initeditor – cellvalue = “000000000”, celltext = “000000000”
T?id=01001010000 (line 693)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”

—–
After double-clicking on the 2nd row FICA Number column, the cell displays 000-00-0000
After entering 123456789 and pressing tab, the cell contains 123-45-6789
The console.log output is:
geteditorvalue – cellvalue = “000000000”
T?id=01001010000 (line 704)
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
(10)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
So far, so good, however after double-clicking on the 3rd row FICA Number column and before entering anything the cell displays 000-00-0089

The console.log output is:
cellsrenderer – cellvalue = “100101000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>100101000</div>”
T?id=01001010000 (line 676)
cellsrenderer – cellvalue = “123-45-6789”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>123-45-6789</div>”
T?id=01001010000 (line 676)
initeditor – cellvalue = “000000000”, celltext = “000000000”
T?id=01001010000 (line 693)
(9)
cellsrenderer – cellvalue = “000000000”, defaulthtml = “<div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>000000000</div>”
T?id=01001010000 (line 676)

—–
All of the empty FICA Number column cells contain 000000000.
Where is the “89” coning from? I can’t find it in any of the console.log displays.

Thank you.

[Peter StoevKeymaster]

Hi Craig Matthews,

When there is no such API, then no it is not possible to use not implemented functionality. How you use a non-built in editor within jqxGrid is also a matter of custom implementation. You can learn how to use jqxMaskedInput from its demos and help documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hi Peter Stoev,

Can you think of a place where that “89” could be coming from?

I dumped what looked like the relevant variables, and I am not putting the “89” into the grid for that cell.

After further testing, if I put 987654321 in the FICA Number cell, it shows correctly as 987-65-4321.

When I edit the cell in the row below, it starts out as 000-00-0021.

For some reason, the end of the cell value from the row above is being used in the current row.

What could cause this?

What am I missing?

Thank you.

[Craig MatthewsParticipant]

Greetings.

I am still unable to get the jqxMaskedInput with the jqxGrid to work properly.

As you can see from my last two posts, there are unentered characters appearing within the cell and I know I am not putting them there.

Can someone please have a look and tell me what I am doing wrong?

Or provide a jqxMaskedInput within jqxGrid specific example to follow?

Thank you.

[Peter StoevKeymaster]

Hi Craig Matthews,

You have custom cellsrenderer implementation so what you see in the cells is the result of that function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hi Peter Stoev,

I realize I have a custom cellsrenderer, so what I see should be the result of my code.

However, it is not.

I modified cellsrenderer as follows:

initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
               console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
               var inputField = editor.find('input');
               console.log(inputField);
               if (pressedkey) {
                  inputField.val(pressedkey);
               } else {
                  inputField.val(cellvalue);
               }
             }

When the above code is executed, I get the following in the console window:
initeditor – cellvalue = “000000000”, celltext = “000000000”

As you can see from this, a value of nine zeroes is being passed.

The console.log(inputField) produced this in the console window:
+ Object[input#jqxWidget3e73b777.jqx-input.jqx-input-energyblue.jqx-rc-all.jqx-rc-all-energyblue.jqx-widget.jqx-widget-energyblue.jqx-widget-content.jqx-widget-content-energyblue.jqx-reset.jqx-reset-energyblue.jqx-input-content.jqx-input-content-energyblue property value = “123-45-6789” attribute value = “null”]

After clicking on the ‘+’ in front of “Object”, I was able to copy the following from the console window:
+ 0 input#jqxWidget3e73b777.jqx-input.jqx-input-energyblue.jqx-rc-all.jqx-rc-all-energyblue.jqx-widget.jqx-widget-energyblue.jqx-widget-content.jqx-widget-content-energyblue.jqx-reset.jqx-reset-energyblue.jqx-input-content.jqx-input-content-energyblue property value = “000-00-0089” attribute value = “null”

The cell is ready to edit, and already contains 000-00-0089. After clicking on “Inspect element” and clicking on this cell, I copied this from the console window:
<input id=”jqxWidget3e73b777″ role=”textbox” data-role=”input” aria-valuenow=”000-00-0089″ aria-disabled=”false” aria-multiline=”false” aria-readonly=”false” class=”jqx-input jqx-input-energyblue jqx-rc-all jqx-rc-all-energyblue jqx-widget jqx-widget-energyblue jqx-widget-content jqx-widget-content-energyblue jqx-reset jqx-reset-energyblue jqx-input-content jqx-input-content-energyblue” autocomplete=”off” autocorrect=”off” autocapitalize=”off” spellcheck=”false” style=”text-align: left; height: 24px; width: 99px;”>

I have nothing in my code that passes the 000-00-0089 value, and the cell above that had just been edited contains 123-45-6789.

So, where does the “89” come from?

The only other clue I can provide is that the mask is 11 characters long (###-##-####) and the data being passed is 9 characters (000000000), the difference being 2 which is the length of the “89”.

I really need some assistance with this. It looks very unprofessional to have incorrect data appear on the screen, even if it can be changed.

Thank you.

[Peter StoevKeymaster]

Hi Craig Matthews,

I have not investigated all your custom implementation logic. If it displays 89 then this is what you cellsrenderer implementation returns and this is what you should check in your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hi Peter Stoev,

I have checked my code – repeatedly – for anything that would carry the last two characters from the cell above to the current cell.

The only time this happens is when multiple cells in the same column are edited.

The first cell edited in this column correctly starts out as nine zeroes. After that row is edited, the same column in the next row carries the last two characters from the row above, such as when entering 123-45-6789 the next row starts as 000-00-0089 and after changing that to 987-65-4321 the next row will incorrectly start as 000-00-0021.

There is nothing in my code that would do this.

In initeditor I have verified the cell contents as being nine zeroes before setting inputField.val. As of the end of the initeditor, control passes back into the jqxGrid code, which I have neither the time nor expertise to delve into.

I have included a stripped-down version of my code that demonstrates this. If you save it as html and run it, you will see what I am experiencing.

Throughout my career, I seem to find things that no one else has run into before. I think I have done so once again.

Please investigate this further.

Thank you.

<!-- Written by Craig R. Matthews -->
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.edit.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxgrid.selection.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcalendar.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcheckbox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxcombobox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdatetimeinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdragdrop.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxdatatable.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxmaskedinput.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxnotification.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxnumberinput.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxpanel.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxradiobutton.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxtooltip.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxtree.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxmenu.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jqwidgets/jqxwindow.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/jqxvalidator.js"></script>
<script language="javascript" type="text/javascript" src="js/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" type="text/css" href="js/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" type="text/css" href="js/jqwidgets/styles/jqx.energyblue.css" />

<script language='javascript' type='text/javascript'>
  var dependents = [ ['Self', 'Doe', 'John', 'M', '19941023', '100101000' ],
                     ['Spouse', '', '', '', '00000000', '000000000' ],
                     ['Child 1', '', '', '', '00000000', '000000000' ],
                     ['Child 2', '', '', '', '00000000', '000000000' ],
                     ['Child 3', '', '', '', '00000000', '000000000' ],
                     ['Child 4', '', '', '', '00000000', '000000000' ],
                     ['Child 5', '', '', '', '00000000', '000000000' ],
                     ['Child 6', '', '', '', '00000000', '000000000' ],
                     ['Child 7', '', '', '', '00000000', '000000000' ],
                     ['Child 8', '', '', '', '00000000', '000000000' ],
                     ['Child 9', '', '', '', '00000000', '000000000' ],
                     ['Legal Ward', '', '', '', '00000000', '000000000' ],
                   ];
  $(document).ready(function() {
    addSubPageEventListeners();
    createSubPageElements();
    setEmployee();
  });
  function addSubPageEventListeners() {
  }
  function createSubPageElements() {
  }
  function setEmployee() {
    var i = 0,
        parts,
        w = '';
    var data = new Array(),
        row = {};
    for (i = 0; i < dependents.length; i++) {
        row = {};
        row['a'] = dependents[i][0];
        row['b'] = dependents[i][1];
        row['c'] = dependents[i][2];
        row['d'] = (dependents[i][3] == 'M' ? 'Male' : (dependents[i][3] == 'F' ? 'Female' : ''));
        row['e'] = createJSDate(dependents[i][4]);
        row['f'] = dependents[i][5];
        row['g'] = (dependents[i][6] == 'Y');
        row['h'] = (dependents[i][7] == 'Y');
        row['i'] = (dependents[i][8] == 'Y');
        row['j'] = (dependents[i][9] == 'Y');
        data[i] = row;
    }
    var Dependents = { localdata: data,
                       datatype: 'array',
                       datafields: [ { name: 'a', type: 'string' },
                                     { name: 'b', type: 'string' },
                                     { name: 'c', type: 'string' },
                                     { name: 'd', type: 'string' },
                                     { name: 'e', type: 'date' },
                                     { name: 'f', type: 'string' }
                                   ]
    };
    var dataAdapter = new $.jqx.dataAdapter(Dependents);
    var editableCheck = function(row, datafield, columntype, value) {
                          if (row == 0) {
                             return false;
                          }
                        }
    $('#dependentsGrid').jqxGrid(
      { height: (data.length + 2) * 25,
        width: 760,
        theme: 'energyblue',
        source: dataAdapter,
        editable: true,
        altrows: true,
        selectionmode: 'singlecell',
        editmode: 'selectedcell',
        disabled: false,
        columns: [ { text: 'Relationship', datafield: 'a', columntype: 'textbox', width: 90, align: 'left', cellsalign: 'left', editable: false, pinned: true },
                   { text: 'Last Name', datafield: 'b', columntype: 'textbox', width: 230, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck, pinned: true },
                   { text: 'First Name', datafield: 'c', columntype: 'textbox', width: 170, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck, pinned: true },
                   { text: 'Sex', datafield: 'd', columntype: 'dropdownlist', width: 70, align: 'center', cellsalign: 'left', cellbeginedit: editableCheck,
                     createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                     var dataSource = [ '', 'Male', 'Female' ];
                                     editor.jqxDropDownList({ autoDropDownHeight: true, source: dataSource });
                                   }
                   },
                   { text: 'Birth Date', datafield: 'e', columntype: 'datetimeinput', width: 100, align: 'center', cellsalign: 'left', cellsformat: 'yyyy-MM-dd', cellbeginedit: editableCheck },
                   { text: 'FICA Number', datafield: 'f', columntype: 'template', width: 100, align: 'left', cellsalign: 'left', cellbeginedit: editableCheck,
                     cellsrenderer: function(row, columnfield, cellvalue, defaulthtml, columnproperties) {
                                      //console.log('cellsrenderer - cellvalue = "' + cellvalue + '", defaulthtml = "' + defaulthtml + '"');
                                      if (cellvalue == stringOf(9, '0') || cellvalue == stringOf(7, '0') || cellvalue.substr(0, 9) == '000-00-00') {
                                         return '';
                                      } else {
                                         var parts = defaulthtml.split('>'),
                                             subparts = parts[1].split('<'),
                                             w = cellvalue;
                                         if (w.indexOf('-') == -1) {
                                            w = w.substr(0, 3) + '-' + w.substr(3, 2) + '-' + w.substr(5, 4);
                                         }
                                         return parts[0] + '>' + w + '<' + subparts[1] + '>';
                                      }
                                    },
                     createeditor: function(row, cellvalue, editor, cellText, width, height) {
                                     //console.log('createeditor - cellvalue = "' + cellvalue + '", cellText = "' + cellText + '"');
                                     var inputElement = $('<input/>').prependTo(editor);
                                     inputElement.jqxMaskedInput({ width: width, height: height, theme: 'energyblue', mask: '###-##-####', value: cellvalue });
                                   },
                     initeditor: function(row, cellvalue, editor, celltext, pressedkey) {
                                   //console.log('initeditor - cellvalue = "' + cellvalue + '", celltext = "' + celltext + '"');
                                   var inputField = editor.find('input');
                                   //console.log(inputField);
                                   if (pressedkey) {
                                      inputField.val(pressedkey);
                                      //inputField.jqxMaskedInput('selectLast');
                                   } else {
                                      inputField.val(cellvalue);
                                      //inputField.jqxMaskedInput('selectAll');
                                   }
                                 },
                     geteditorvalue: function(row, cellvalue, editor) {
                                       //console.log('geteditorvalue - cellvalue = "' + cellvalue + '"');
                                       return editor.find('input').val();
                                     }
                   }
                 ]
    });
  }
  // Create a JavaScript Date item (or null) from a passed ISO-8601/RFC-3339 date value
  function createJSDate(dateValue) {
    if (dateValue.length != 8 || dateValue == '00000000') {
       return null;
    }
    return new Date(parseInt(dateValue.substr(0, 4)), (parseInt(dateValue.substr(4, 2)) - 1), parseInt(dateValue.substr(6)));
  }
  // Create a string of repeated characters  (from StackOverflow.com user disfated)
  function stringOf(count, chr) {
    if (count < 1) return '';
    var x = '';
    while (count > 1) {
          if (count & 1) x += chr;
          count >>= 1;
          chr += chr;
    }
    return x + chr;
  }
</script>

<fieldset style='position: relative; width: 770px;'>
  <legend>Dependents</legend>
  <div id='dependentsGrid'></div>
</fieldset>

[Peter StoevKeymaster]

Hi Craig Matthews,

Implementation of custom functions for editing and cells rendering is part of your development logic. The editor’s display value is the editor’s value which you set in the initeditor function implementation. Example: http://jsfiddle.net/jqwidgets/uuofscj7/ value is cleared each time the cell’s custom editor enters into edit mode.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Craig MatthewsParticipant]

Hi Peter Stoev,

I would never have suspected I needed:
inputField.jqxMaskedInput('clear');

Now if there were only a way to control cursor positioning within the jqxMaskedInput field.

Thank you for the assistance.

[Author]

Posts