propertygrid combobox editor throws error on new selection

[BCottle]

I have a propertygrid that starts with 3 rows. The third row should use a combobox to select a particular "validator", and when that selection occurs I want to fill out the rest of the propertygrid (rows 4 - x).

I have something kind of working, but at some point after selection it throws an error in the jQuery EasyUI library. The error occurs when getting a hidden text input and trying to access its panel property.

As best I can summarize, here is the code to build the widgets, followed by the "filler outer" function.

        createEditForm : function (api, validatorIdx) {
          $("#validatorDlg").remove();
          var apiValidator = api.validators[validatorIdx];
          var validator = getValidatorByName(vald.name);
          // build propertygrid data structure with 3 initial rows
          var rows = [
            { name : "HTTP Method", value : api.method, group : "API Settings", editor : null },
            { name : "API Path", value : api.uri, group : "API Settings", editor : null },
            {name : "Name", value : apiValidator.name, group : "API Validator Settings",
              editor : {
                type    : "combobox",
                options : {
                  valueField : "name",
                  textField  : "displayName",
                  data       : MyScript.data.validators,
                  onSelect : function (record) {
                    $("#validatorForm").propertygrid("endEdit", 2);
                  }
                }
              }
            }
          ];

          var form = $("<table></table>", {id : "validatorForm", class : "easyui-propertygrid"});

          var dialog = $("<div></div>", { id : "validatorDlg", class : "easyui-dialog" });
          dialog.append(form);
          dialog.dialog({
            title : 'Validator Assignment to API',
            width : 400, height : 400,
            closed : false,
            cache : false,
            modal : true,
            resizable : true
          });
          form.propertygrid({
            showGroup : true,
            data      : {
              rows  : rows,
              total : rows.length
            },
            onEndEdit   : function (rowIndex, rowData, changes) {
              if (rowIndex == 2 && !!changes.value) {
                var validator = getValidatorByName(rowData.value);
                if (!!validator) {
                  validatorSelected(api, validator);
                }
              }
            }
          });
        }

...

          validatorSelected : function (api, validator) {
            var apiValidator = getApiValidatorByName(validator.name);
            var form = $("#validatorForm");
            var newData = form.propertygrid("getData");
            // remove any existing validator fields (and display name)
            newData.rows.splice(3);
            // add back correct display name
            var row = {
              name   : "Display Name",
              value  : validator.displayName,
              group  : "API Validator Settings",
              editor : null
            };
            newData.rows.push(row);

            // now add validator fields appropriate to this validator
            for (var f = 0, field; (field = validator.fields[f++]) !== undefined;) {
              row = {
                name : field.name,
                description : field.description,
                value : null,
                group : "Validator Fields",
                editor : "text"
              };
              newData.rows.push(row);
            }
            newData.total = newData.rows.length;

            form.propertygrid("loadData", newData);
            return false;
          }

Hopefully that is enough but not too much information. When I click the field in row 3, the combobox appears and lets me select a validator. Then the 4th and subsequent rows fill out as desired and an error is thrown.

What is the correct way to do this? Am I on the right track, or is there a better way? What is wrong?

Thanks.

[BCottle]

I tried disabling the code that modifies the propertygrid and just put some console log messages (method name: some-value) in various event handlers. Here is what I get:

onChange: alphaNumericValidator ... prodmgr.js (line 580)
onSelect: alphaNumericValidator ... prodmgr.js (line 574)
onEndEdit: alphaNumericValidator ... prodmgr.js (line 649)
onAfterEdit: alphaNumericValidator ... prodmgr.js (line 640)
TypeError: $.data(...) is undefined ... jquery.easyui.all.js (Line 14911)

onChange and onSelect are part of the combobox options.
onEndEdit and onAfterEdit are part of the propertygrid options.

onSelect logs its name and then calls this function:

Code:

                    $("#validatorForm").propertygrid("endEdit", 2);

I have to call that method to force the combobox to stop editing. If I don't call it, the two edit functions are not called.

It really seems like calling endEdit is triggering this problem. When I place that call in a timeout, it does not throw that error!

Code:

setTimeout(function(){ $("#validatorForm").propertygrid("endEdit", 2); }, 1);

Surely this is not the standard way of listening for editing events?!