DataGrid as editor for large datasets

[anton.dutov]

Intro:
We have datasets whitch contains 200-500 records and we will allow users edit two fields in each record.
We can't separate data, it will break application logic (looks like MS Excel Worksheet)

For example we have folowing table:

Code:

  var tbl = $('#tbl_data_balance_data');
  tbl.datagrid({
    method:'get',
    columns:[[
      {field:'code',title:'Code',width:80},
      {field:'name',title:'Account',width:400},
      {field:'value_a',title:'Active',width:80,align:'right',editor:{type:'validatebox',options:{precision:2}}},
      {field:'value_p',title:'Passive',width:80,align:'right',editor:{type:'validatebox',options:{precision:2}}}
    ]]
  });

And table have about 200 rows. And when we enabling inline editing for all rows:

Code:

    var rows = tbl.datagrid('getRows').length;
    for(var i = 0; i < rows; ++i){
      tbl.datagrid('beginEdit', i);
    }

This code will freeze browser and after 30 sec browser says.

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Wath i'm doing wrong? or datagrid('beginEdit', i) to slow anyway? or i forget magic passes?
I need write own component to provide editing large datasets? and DataGrid unusable in this case?

[stworthy]

Why editing all rows at a time? It will lose performance. To solve this issue, editing some rows while required. Or use the formatter function for colomns to display text box.

Code:

tbl.datagrid({
columns:[[
field:'code',title:'Title',formatter:function(){
return '<input.../>’;
}
]]
});

[anton.dutov]

Users need fill form form (about 200-500 rows with two fields) at one time.
This data will edit as  one transaction, enabling data editing line by line
causes additional inconvenience of data input.

user open grid - set focus on first inputbox -
type value <tab> (to get focus on next inputbox)
type value <tab>
type value <tab>
etc.

I tested few variants

1. formater returns '<input class="easyui-numberbox">'
and DataGrid 
onLoadSuccess; fuction() { $('easyui-numberbox').numberbox( ... );
}

that variant slower too.

2. formater returns input with my functions (code bellow)

Code:

  var precision = 2;
  var mode_edit = false;
  var changes   = {};
  var cur_value = null;

  var edit_fmt_a   = function(val, data, row) {
    var v = parseFloat(val).toFixed(precision);
    var a = 'value="' + v + '" row="row' + row + '" rid="' + data.id + '" aid="' + data.account_id + '" rtype="a"';
    return !mode_edit ? v : '<input type="text" ' + a + ' onkeydown="return num_filter(event, this)" onfocus="account_data_edit_focus(this)" onblur="account_data_edit_blur(this)" />';
  }

this variant is faster, but i need write own fuctions to control numeric input

Code:

function num_filter(e/*event*/, o/*object*/) {
  var o = $(o);
  var v = o.val();
  var keyCode = ('which' in e) ? e.which : e.keyCode;
  if ($.inArray(keyCode, [8, 9, 35, 36, 37, 38, 39, 40, 45, 46]) != -1) // Special keys
    return true;
  if (keyCode == 190) { // Dot
    if (v.indexOf('.') == -1) {
      if (v == '')
        o.val('0');
      return true;
    }
    return false;
  }
  isNumeric = (keyCode >= 48 /* 0 */       && keyCode <= 57  /* 9 */) ||
              (keyCode >= 96 /* NUMPAD0 */ && keyCode <= 105 /* NUMPAD9 */);
  modifiers = (e.altKey || e.ctrlKey || e.shiftKey);
  return isNumeric || modifiers;
}

and functions to check changed fields

Code:

  window.account_data_edit_focus = function(obj) {
    cur_value = parseFloat($(obj).val());
  }
  window.account_data_edit_blur  = function(obj) {
    var o = $(obj);
    var n = parseFloat(o.val());
    o.val(n.toFixed(precision));
    var aid   = o.attr('aid');

    if (cur_value != n) {
      var val_a = parseFloat($('input[row=' + o.attr('row') + '][rtype=a]').val());
      var val_p = parseFloat($('input[row=' + o.attr('row') + '][rtype=p]').val());

      changes[aid] = {aid:aid, rid:o.attr('rid'), a:val_a, p:val_p};
    }
  }

 

that all makes code unreadable.

3. I planed test third variant - setup table keydown handler and when <tab> is pressed and edit mode is enabled -  enter next row to edit mode.

[stworthy]

Hi anton,dutov,
As you say in your posted topic:
enabling data editing line by line causes additional inconvenience of data input.

Writing some code and carefully control the editing row may be a better way to solve your issue, it can also make a good user experience.
Please refer to http://jsfiddle.net/e9CC6/.

Double click a row will begin editing a row and the first editor will automatic get focus. When press 'tab' key on first editor, the second editor will get editing focus. When press 'tab' key on second editor, the current row will finish editing and the next row will automatic become editable, etc.

[anton.dutov]

Thanks for code sample.  U realised my idea about tabs.
After less midifications - code will work fine.
http://jsfiddle.net/e9CC6/6/