I saw the datagrid extension method from the web.
I used this extension method,
If datagrid has two cell,when I select all the MatCode cell text and loose the mouse left key,
the select text turn unselect,so I I can't copy the cell text.
May be this extension function disturbed,
when I click the Quantity cell first, and copy the MatCode cell text,it's perfectly normal.
I don't know how can I fix this problem.
If you don't understand my description I will do better description.
Thanks.
{ field: 'ma_code', title: 'MatCode', width: '110px', sortable: true },
{
field: 'qty', title: 'Quantity', width: '100px', editor: {
type: 'text', options: {
required: true
}
}
}
(function ($) {
function nav(target) {
var dg = $(target);
var opts = dg.datagrid('options');
dg.datagrid('getPanel').attr('tabindex', 1).css('outline-style', 'none').unbind('.cellediting').bind('keydown.cellediting', function (e) {
switch (e.keyCode) {
case 37: // left
gotoCell(target, 'left');
break;
case 39: // right
gotoCell(target, 'right');
break;
case 38: // up
gotoCell(target, 'up');
break;
case 40: // down
gotoCell(target, 'down');
break;
case 13: // enter
var cell = $(this).find('td.datagrid-row-selected');
if (cell.length) {
var field = cell.attr('field');
var index = cell.closest('tr.datagrid-row').attr('datagrid-row-index');
dg.datagrid('editCell', {
index: index,
field: field
});
}
break;
}
return false;
});
}
function gotoCell(target, p) {
var dg = $(target);
var opts = dg.datagrid('options');
var cell = dg.datagrid('getPanel').find('td.datagrid-row-selected');
if (typeof p == 'object') {
cell.removeClass('datagrid-row-selected');
cell = opts.finder.getTr(target, p.index).find('td[field="' + p.field + '"]');
cell.addClass('datagrid-row-selected');
return;
}
if (!cell) { return; }
var field = cell.attr('field');
var tr = cell.closest('tr.datagrid-row');
var index = parseInt(tr.attr('datagrid-row-index'));
var td = cell;
if (p == 'up' && index > 0) {
td = opts.finder.getTr(dg[0], index - 1).find('td[field="' + field + '"]');
} else if (p == 'down' && index < dg.datagrid('getRows').length - 1) {
td = opts.finder.getTr(dg[0], index + 1).find('td[field="' + field + '"]');
} else if (p == 'left') {
td = td.prev();
} else if (p == 'right') {
td = td.next();
}
if (td.length) {
dg.datagrid('scrollTo', td.closest('tr.datagrid-row').attr('datagrid-row-index'));
cell.removeClass('datagrid-row-selected');
td.addClass('datagrid-row-selected');
}
}
function editCell(target, param) {
var dg = $(target);
var opts = dg.datagrid('options');
var fields = dg.datagrid('getColumnFields', true).concat(dg.datagrid('getColumnFields'));
$.map(fields, function (field) {
var col = dg.datagrid('getColumnOption', field);
col.editor1 = col.editor;
if (field != param.field) {
col.editor = null;
}
});
dg.datagrid('endEdit', param.index);
dg.datagrid('beginEdit', param.index);
opts.editIndex = param.index;
var ed = dg.datagrid('getEditor', param);
if (ed) {
var t = $(ed.target);
if (t.hasClass('textbox-f')) {
t = t.textbox('textbox');
}
t.focus();
t.bind('keydown', function (e) {
if (e.keyCode == 13) {
dg.datagrid('endEdit', param.index);
gotoCell(target, param);
dg.datagrid('getPanel').focus();
} else if (e.keyCode == 27) {
dg.datagrid('cancelEdit', param.index);
gotoCell(target, param);
dg.datagrid('getPanel').focus();
}
e.stopPropagation();
});
}
$.map(fields, function (field) {
var col = dg.datagrid('getColumnOption', field);
col.editor = col.editor1;
});
}
function enableCellEditing(target) {
var dg = $(target);
var opts = dg.datagrid('options');
opts.oldOnClickCell = opts.onClickCell;
opts.onClickCell = function (index, field) {
if (opts.editIndex != undefined) {
if (dg.datagrid('validateRow', opts.editIndex)) {
dg.datagrid('endEdit', opts.editIndex);
opts.editIndex = undefined;
} else {
return;
}
}
dg.datagrid('selectRow', index).datagrid('editCell', {
index: index,
field: field
}).datagrid('gotoCell', {
index: index,
field: field
});
opts.oldOnClickCell.call(this, index, field);
};
opts.onBeforeSelect = function () {
//return false;
};
}
$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
editCell(this, param);
});
},
gotoCell: function (jq, param) {
return jq.each(function () {
gotoCell(this, param);
});
},
enableCellEditing: function (jq) {
return jq.each(function () {
nav(this);
enableCellEditing(this);
});
}
});
})(jQuery);
