Error on commit when deleting row in virtualmode

[OdieParticipant]

I am getting the following javascript error tying to commit(true) after a successful ajax call to delete a record on the server. I have used the same methodology numerous times in the past with success. The only difference this time is I am using virtual mode for paging.

I have also included the applicable code snippets below.

Thank you,

Doug

Error:

TypeError: j[h] is undefined                        jqx-all.js:7:1694263

b.jqx.dataview/this.loadflatrecords                 https://example.com/jqwidgets/jqx-all.js:7:1694263
b.jqx.dataview/this.updateview                      https://example.com/jqwidgets/jqx-all.js:7:1695081
b.jqx.dataview/this.reload                          https://example.com/jqwidgets/jqx-all.js:7:1693298
a.jqx.dataview.sort/this.sortby                     https://example.com/jqwidgets/jqx-all.js:7:1750603
f                                                   https://example.com/jqwidgets/jqx-all.js:7:1610252
g                                                   https://example.com/jqwidgets/jqx-all.js:7:1610445
gridDeleteRow/<                                     https://example.com/Core/marsCore.min.js:3:304
i                                                   https://example.com/jquery/jquery-base.js:2:27146
fireWith                                            https://example.com/jquery/jquery-base.js:2:27914
z                                                   https://example.com/jquery/jquery-base.js:4:12118
c/<                                                 https://example.com/jquery/jquery-base.js:4:15680

Applicable Code Snippets

  IV04Grid.prototype.setupGrid = function() {
    var daObject;
    var initrowdetails;
    var settings;

    //  Define Data Adapter source object

    this.daSource = {
      async: false,
      beforeprocessing: function (data) {
        $this.daSource.totalrecords = data[0].ttlRows;
      },
      cache: false,
      data: {
        action:   'buildGrid',
        class:    'MARS::IV::IV04',
        element:   this.grdId,
        selClt:   $('#selTabClt').val(),
        sid_cn:    sessionStorage.sidCN,
        modeGrid: 'CO'
      },
      datatype: 'json',
      datafields: [
        {
          name: 'id',
          type: 'number'
        },
        {
          name: 'itm_no',
          type: 'string'
        },
        {
          name: 'dscr',
          type: 'string'
        },
        {
          name: 'active',
          type: 'bool'
        }
      ],
      deleterow: function(rowid, commit) {
        gridDeleteRow( {
          commit:  commit,
          tbl:    'iv_itm_mst',
          val:     rowid
        } );
      },
      filter: function() {
        $($this.grdSelector).jqxGrid('updatebounddata', 'filter');
      },
      id: 'id',
      root: 'rows',
      sortcolumn: 'itm_no',
      sortdirection: 'asc',
      url: marsHandler
    };

    //  Define Data Adapter object

    daObject = marsDataAdapter(this.daSource);

    //  Define row detail grid

    initrowdetails = this.setupGridDetail();

    //  Define settings object for Item grid

    settings = {
      autoheight: true,
      columns: [
        {
          datafield: 'id',
          hidden:     true,
          text:      'ID'
        },
        {
          datafield: 'itm_no',
          text:      'Item No',
          width:      150
        },
        {
          datafield: 'dscr',
          text:      'Description',
          width:      280
        },
        {
          cellsrenderer: function (row, columnfield, value) {
            if (value == true) {
              return gridCheckMark();
            }
            else {
              return '&nbsp';
            }
          },
          datafield:  'active',
          text:       'Active',
          width:       50
        },
        {
          cellsrenderer: function () {
            return gridIcon( {
              icon:    'Edit',
              disabled: false
            } );
          },
          filterable: false,
          sortable:   false,
          text:       '',
          width:      25
        },
        {
          cellsrenderer: function () {
            return gridIcon( {
              icon:    'Clone',
              disabled: false
            } );
          },
          filterable: false,
          sortable:   false,
          text:       '',
          width:      25
        },
        {
          cellsrenderer: function () {
            return gridIcon( {
              icon:     'Delete',
              disabled:  false
            } );
          },
          filterable: false,
          sortable:   false,
          text:       '',
          width:      25
        }
      ],
      columnsresize:       false,
      initrowdetails:      initrowdetails,
      filterable:          true,
      height:              580,
      pageable:            true,
      pagesize:            15,
      pagesizeoptions:    ['10','15','20'],
      rendergridrows: function (params) {
        return params.data;
      },
      rowdetails:          true,
      rowdetailstemplate: {
        rowdetails:       "<div id='grid'></div>",
        rowdetailsheight:  117,
        rowdetailshidden:  true
      },
      selectionmode:      'singlerow',
      sortable:            true,
      source:              daObject,
      theme:              'mars',
      virtualmode:         true,
      width:               845
    };

    //  Create grid

    $(this.grdSelector).jqxGrid(settings);
  };

  IV04Grid.prototype.setupListeners = function() {
    $(this.grdSelector).on('cellclick', function(event) {
      var args  = event.args;
      var rowid = $(this).jqxGrid('getrowid', args.rowindex);

      if (args.columnindex == 7) {
        if (confirmDelete()) {
          $(this).jqxGrid('deleterow', rowid);
        }
      }
    } );
  };

[OdieParticipant]

I forgot to include the gridDeleteRow function which might be applicable.

function gridDeleteRow(obj) {
  var settings;

  settings = {
    action:  'delete',
    class:   'MARSCLASS::Web::Shared',
    element: 'record',
    sid_cn:   sessionStorage.sidCN,
    tbl:      obj.tbl,
    val:      obj.val
  };

  if (obj.dbase) { settings.dbase = obj.dbase }
  if (obj.col)   { settings.col   = obj.col }

  $.getJSON(marsHandler, settings)
   .done(function(objJSON) {
     if (objJSON.STATUS == 'OK') {
       obj.commit(true);
     }
     else {
       obj.commit(false);
       objJSON.ERRORS.reDirect = 0;
       displayError(objJSON);
     }
   } )
   .fail(function(objJSON, txtStatus, errorThrown) {
     ajaxFail(objJSON, txtStatus, errorThrown);
   } );
};

[OdieParticipant]

This is the first time I have posted to a forum. I’ve not received any responses so I am asking if I’ve not posted correctly or am I leaving something out.

Thank you.

[StanislavParticipant]

Hello Odie,

You can use a simple trick to get more information from the error you are getting, just replace jqx-all with the exact references for the widgets, that way the error will tell you exactly what is wrong.

I would like to suggest you to take a look at this example’demo’ on your site. Create, Remove, Update

Best Regards,
Stanislav

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

[JenkeNgParticipant]

I seem to have encountered the same problem, in the virtual mode deleterow, the entire page will appear blank, the error feedback location is jqxGrid.js 13765 lines of ‘j[h].value’ here. But when I turned off virtualmode, the delete works fine, but then I can’t page, it seems that there is a conflict between the two. My jqxWidgets version is v5.5.0. I have posted another post on this issue, but I have not received a valid response.

[Peter StoevKeymaster]

Hi,

In virtual mode, the data that is displayed in the Grid is the data returned by the custom code in the rendergridrows function. Deleting a row in Virtual Mode with the Grid API only calls the custom source object deleterow function and re-renders the Grid.

Best Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts