error TypeError: rowData is undefined in scrollview js.

[Opan Mustopah]

hello again

i think, i've found a bug on scrollview js plugin.

here is the error message:

Code:

ypeError: rowData is undefined
	

var value = rowData[field];	// the field value

	

when i started create new row, but it's really disgusting, because sometimes when i create new row, it's isn;t thrown that error message.
it's like unstable i think.

here how i start creating new row:

Code:

function new_row(dg){
    if (state.op == "edit"){
      $.messager.alert('Warning', 'There are current record being edited. You can not editing different record in the same time.');
      return false;
    }
    
    // AJAX REQUEST
    $.get(init_url,function(data){

      var row = dg.datagrid('getSelected');
      if (row){
        var index = dg.datagrid('getRowIndex', row);
      }else{
        index = 0;
      }
        
      dg.datagrid('insertRow', {
        index: index,
        row: {
          country_id: data.val,
          status: 0
        }
      });
      state.row = "new_row";
      dg.datagrid('selectRow', index);
      dg.datagrid('beginEdit', index);
    },'json');

  }

here is event on datagrid that have a relations with that function:

Code:

onBeforeEdit: function(rowIndex, rowData){
        rowData.editing = true;
        updateActions(rowIndex, $list_data);
        loadLinkbutton(this);
        state.op = "edit";

      },
      onAfterEdit: function(rowIndex, rowData, changes){
        rowData.editing = false;        //custom 20150102
        getChange($list_data, url_crud_row, this, state, rowIndex, rowData);
        
      }, 
      onCancelEdit: function(rowIndex, rowData){
        rowData.editing = false;
        updateActions(rowIndex, $list_data);
        loadLinkbutton(this);
        state.op = "show";
      },
      

code updateactions:

Code:

function updateActions(index, dg) {
  dg.datagrid('updateRow', {
    index: index,
    row: {
    }
  });
}

function getchanges:

Code:

function getChange(dg, url_data, obj, state, rowIndex, rowData) {
  if (dg.datagrid('getChanges').length) {
    var inserted = dg.datagrid('getChanges', 'inserted');
    var updated = dg.datagrid('getChanges', 'updated');
    var deleted = dg.datagrid('getChanges', 'deleted');
    var effectRow = new Object();
    if (inserted.length) {
      effectRow['inserted'] = JSON.stringify(inserted);
    }
    if (updated.length) {
      effectRow['updated'] = JSON.stringify(updated);
    }
    if (deleted.length) {
      effectRow['deleted'] = JSON.stringify(deleted);
    }
  }
  if (effectRow == null) {
    if (state.row == 'new_row') {
      updateDataRow(rowIndex, obj);
    } else {
      updateActions(rowIndex, dg);
      loadLinkbutton(obj);
    }
    state.op = 'show';
    state.row = '';
    return false;
  }
  var data = $.ajax({
    url: url_data,
    type: 'POST',
    data: {
      row_data: effectRow
    },
    dataType: 'json'
  }).done(function (data) {
    if (data.msg == 'OK') {
      dg.datagrid('acceptChanges');
      if (state.row == 'new_row') {
        state.id = data.id
        updateDataRow(rowIndex, obj);
      } else if (state.op == 'edit'){
        state.id = data.id
        updateDataRow(rowIndex, obj);
        updateActions(rowIndex, dg);
        loadLinkbutton(obj);
      }else{
        updateActions(rowIndex, dg);
        loadLinkbutton(obj);
      }
      state.op = 'show';
      state.row = '';
    } else {
      if (state.row == 'new_row') {
        dg.datagrid('rejectChanges');
      } else if (state.op == 'edit') {
        dg.datagrid('beginEdit', rowIndex);
      } else {
        dg.datagrid('rejectChanges');
      }
      $.messager.alert('Info', data.msg, 'info');
    }
  }).fail(function (request, status, error) {
    $.messager.alert('Info', request.responseText);
  });
}

function loadlinkbutton:

Code:

function loadLinkbutton(obj) {
  $(obj).datagrid('getPanel').find('a.easyui-linkbutton').linkbutton();
}

please help me to solve this issue, it really disgusting.
nb: i already use the latest scrollview js and patch for version 1.4
many thanks for your answer.

[jarry]

Please try to update the 'datagrid-scrollview.js' file from http://www.jeasyui.com/extension/datagridview.php

[Opan Mustopah]

thanks jarry for your reponse, i'll try it again ASAP.

[Opan Mustopah]

now it's work without that error showing. i'll reporting again if something wrong happen again.
thank you very much

[Opan Mustopah]

hey jarry, i'm sorry to ask you again for this bug .

i still get that error message :

Code:

TypeError: rowData is undefined
	

var value = rowData[field];	// the field value

how to solve this issue. it's like unstable. some times it's showing up, but it's showing up every when i delete or insert a new row on datagrid. and i already use scrollview.js that i download from link you give.

thanks for your answer.

[Opan Mustopah]

i try to debug it.
i found strange behaviour.

Code:

renderRow: function(target, fields, frozen, rowIndex, rowData){
		var opts = $.data(target, 'datagrid').options;
		
		var cc = [];
		if (frozen && opts.rownumbers){
			var rownumber = rowIndex + 1;
			if (opts.pagination){
				rownumber += (opts.pageNumber-1)*opts.pageSize;
			}
			cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">'+rownumber+'</div></td>');
		}
		console.log(fields); //
		console.log(rowIndex); // -- > this value is -1 when throwing an error.
		console.log(rowData); // --> this value is undefined.
		for(var i=0; i<fields.length; i++){
			var field = fields[i];
			var col = $(target).datagrid('getColumnOption', field);
			if (col){
				var value = rowData[field];	// the field value
				var css = col.styler ? (col.styler(value, rowData, rowIndex)||'') : '';
				var classValue = '';
				var styleValue = '';
				if (typeof css == 'string'){
					styleValue = css;
				} else if (cc){
					classValue = css['class'] || '';
					styleValue = css['style'] || '';
				}
				var cls = classValue ? 'class="' + classValue + '"' : '';
				var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');
				
				cc.push('<td field="' + field + '" ' + cls + ' ' + style + '>');
				
				if (col.checkbox){
					style = '';
				} else if (col.expander){
					style = "text-align:center;height:16px;";
				} else {
					style = styleValue;
					if (col.align){style += ';text-align:' + col.align + ';'}
					if (!opts.nowrap){
						style += ';white-space:normal;height:auto;';
					} else if (opts.autoRowHeight){
						style += ';height:auto;';
					}
				}
				
				cc.push('<div style="' + style + '" ');
				if (col.checkbox){
					cc.push('class="datagrid-cell-check ');
				} else {
					cc.push('class="datagrid-cell ' + col.cellClass);
				}
				cc.push('">');
				
				if (col.checkbox){
					cc.push('<input type="checkbox" name="' + field + '" value="' + (value!=undefined ? value : '') + '">');
				} else if (col.expander) {
					//cc.push('<div style="text-align:center;width:16px;height:16px;">');
					cc.push('<span class="datagrid-row-expander datagrid-row-expand" style="display:inline-block;width:16px;height:16px;cursor:pointer;" />');
					//cc.push('</div>');
				} else if (col.formatter){
					cc.push(col.formatter(value, rowData, rowIndex));
				} else {
					cc.push(value);
				}
				
				cc.push('</div>');
				cc.push('</td>');
			}
		}
		return cc.join('');
	},

in renderRow function, when that error showing, rowIndex value is -1, as normally should 0 if there is no record in datagrid.
and i still not have idea to solve this issue

[Opan Mustopah]

i think i found a particular pattern that make error message showing.

here is step by step:
1. firstly my datagrid is empty/ no record.
2. i create a new record/new row. a then save it into database. ok
3. then i delete record that i just created before. ok
4. i try to create new record again (remember, now datagrid is empty), and then that error showing.

here is my code how i delete a record, i hope this helping you to solve this issue:



function delete_row:

Code:

function delete_row(target, dg, url_data, state) {
  var index = getRowIndex(target);
  var row = dg.datagrid('selectRow', index);
  var obj = dg;
  $.messager.confirm('Confirm', 'Are you sure want to delete data?', function (r) {
    if (r) {
      if (!isNaN(target)) {
        dg.datagrid('deleteRow', target);
      } else {
        dg.datagrid('deleteRow', index);
      }
      getChange(dg, url_data, obj, state, index, row);
    }
  });
}

caller function delete_row :

Code:

var d = '<a href="#" onclick="delete_row(this, $list_data, url_crud_row, state)" data-no-turbolink="true" id="delete" class="easyui-linkbutton" iconCls="icon-remove" title="Delete"></a>';

in delete_row, it's  just call getChange function that i already write above.

thanks