Thanks for the reply. The issue us that there are 8-9 editable fields which interact with each other. It would take quite a bit of extra processing to keep the two DOM elements in sync.

I have looked into creating a subgrid to handle the overflow and creating hidden datagrid fields to store the values but it sure would be a lot easier to handle everything within a single datagrid element.

Perhaps a feature improvement in a future release. This would seem to me to be something other users would request. When you try to view a datagrid on a mobile device, many would prefer to wrap a row versus scrolling horizontally to view the all grid columns and scrolling vertically for all the rows. A single vertical scroll with wrapped rows would make mobile browsing much more user friendly.

Dave

I have an editable datagrid that has a large number of columns (~12) and does not easily fit on the screen in a single row. I need to know if there is a way to wrap (continue) the columns into the next row in the datagrid. Will it still be considered a single row for indexing and retrieving data purposes? When viewing the edatagrid on a mobile device, the issue becomes worse and the columns become so small that it is hard to enter data.

Index:0 Field 1	|	Index:0 Field 2	|	Index:0 Field 3
Index:0 Field 4	|	Index:0 Field 5	|	Index:0 Field 6
Index:1 Field 1	|	Index:1 Field 2	|	Index:1 Field 3
Index:1 Field 4	|	Index:1 Field 5	|	Index:1 Field 6

Thanks in advance for your help.

You are exactly correct. I bought a cheap barcode scanner and the default was to send the CR character at the end of the barcode. Once I disabled the termination character, everything worked as expected. Funny as I had a Symbol barcode scanner and they don not send the CR character, everything work as expected out of the box.

Thanks for your help.

I have a form with an editable datagrid (edatagrid) that uses a combogrid as an editor. I can type from my keyboard into the combogrid but when I enter data through a barcode scanner, there is no response.

I can successfully read the barcode input through a datagrid editor of type text on the same row but not for the combogrid. I also tried a combogrid outside the editable datagrid with no luck. Regular, non-easyui, fields in the form also work properly. I'm thinking the combo is looking for a keypress event that it may not be receiving from the barcode scanner. What I'm trying to do is automatically fill the datagrid row resulting from a scan of a product barcode.

Any ideas?

In the datagrid documentation it states that the getChecked method "Return all rows where the checkbox has been checked. This method is available since version 1.3."

I have a datagrid with 3 rows checked (the number doesn't matter, just an illustration) and getData returns an object with .total = 3 and .rows = array of length 3. getChecked method only returns the last checked row (array of length 1 with data as object). My onCheckAll event iterates through each row and calls the checkRow method (which triggers the onCheckRow event). In this case only the first row is returned for getChecked as each row is selected.

Is this how it is suppose to work? If so, how can I get all rows that have been checked? I'm totaling a column from the datagrid, only if the row is checked, in a separate field in the form.

Thanks for your help.

I have attached the code I am using. I have added a trash can icon to both the toolbar and each row to try different methods. I add several rows and then press an earlier row (while still in edit mode) and both trash cans work, the row is removed. Then I can select any row (not in edit mode but highlighted) and when I press the trash can icon, the destroy message is displayed but the row is not destroyed. If I double click any row (to re-enter edit mode) and then either trash can icon, the row is removed. Also, in all cases, I don't see the alert message I set for the on Destroy event. It is not firing.

Code:

<!-- Datagrid -->
<div id="itemBar" style="padding:5px;height:auto">
  <div>
<img name="newItem" src="themes/default/icons/16x16/actions/list-add.png" type="img" height="16" id="newItem" onclick="$('#item_main').edatagrid('addRow');" style="cursor:pointer" title="Add" />
<img name="removeItem" src="themes/default/icons/16x16/places/user-trash.png" type="img" height="16" id="removeItem" onclick="alert('toolbar destroyRow'); $('#item_main').edatagrid('destroyRow');" style="cursor:pointer" title="Trash" />
  </div>
</div>
<script type="text/javascript">
function item_mainFormatter(value, row, index) {
    var text = '<img type="img" src="themes/default/icons/16x16/places/user-trash.png" height="16" onclick="$(\'#item_main\').edatagrid(\'destroyRow\');" style="cursor:pointer" title="Delete" />&nbsp;';
  return text;
}
</script>

<div style="clear:both">
<table title="" toolbar="#itemBar" fitColumns="true" idField="id" singleSelect="true" name="item_main" id="item_main" class="easyui-datagrid">
  <thead>
    <tr>
<th hidden="true" editor="text" field="id"></th>
<th width="50" formatter="item_mainFormatter" align="center" field="action">Action</th>
<th width="40" editor="{type:'numberbox',options:{precision:4}}" resizable="true" align="center" field="qty">Quantity</th>
<th width="80" sortable="true" resizable="true" align="center" editor="{type:'combogrid',options:{onShowPanel:function(){ itemInit(this, 'none'); }}}" field="sku">SKU</th>
<th width="160" editor="text" resizable="true" field="description">Description</th>
<th width="60" editor="text" resizable="true" align="right" field="price">Price</th>
<th width="80" editor="text" resizable="true" align="right" field="total" style="text-align:right">Total</th>
    </tr>
  </thead>
</table>
</div>
<script type="text/javascript">
$('#item_main').edatagrid({ 
  onDestroy:function(rowIndex, row) { alert('onDestroy row'); },
  onAdd:function(rowIndex, row) { alert('onAdd row'); lastIndex=rowIndex; rowAutoAdd=true; },
  onEdit:function(rowIndex, row) { alert('onEdit row'); lastIndex=rowIndex; }
 });
</script>

Ultimately, I would like to be able to press the trash can icon on a given row (no matter is it is selected or not), have it selected and then destroyed followed by a function to total the remaining rows.

Thanks for your help on this one. I'm pulling out what little hair I have left trying to get this to work.

Dave

I tired that, same result.

I believe that the problem is the OnDestroy event is acted upon once the destroyRow method is called. The destroyRow method asks for confirmation to destroy the row but before I can confirm (perhaps since the messager doesn't hold the script until a confirmation is returned). The onDestroy event is started so the updateTotal() function is run while the messager is waiting for confirmation PRIOR to the row being deleted. Thus the total is from the column BEFORE the row is deleted and not after. The updateTotal function does get executed using the onDestroy event but before I confirm the destroy, once I confirm, the row is removed. This results in the updateTotal returning the wrong result.

I have a edatagrid set up where I want to call a function AFTER the row is destroyed. I have tried several variations of calling a function after the row is destroyed but it seems that the destroyRow method shows the dialog box and continues the script executing the function totalUpdate() BEFORE the dialog is confirmed. What I'm looking for is an onAfterDestroy event to trigger another javascript function. The code looks like:

Code:

deleteRow = true;
function orderItemEdit(rowIndex) {
        $('#item_main').edatagrid('editRow', rowIndex);
        if (deleteRow) {
                deleteRow = false;
                $('#item_main').edatagrid('unselectAll');
                $('#item_main').edatagrid('selectRow', rowIndex);
                $('#item_main').edatagrid('destroyRow');
                totalUpdate(); // fires too soon
        }
}

The function is called with the onClickRow method and the totalUpdate function is executed immediately after the destroyRow method shows the messager window. This leads to the deleted row being used in the calculation of the 'total' column and then being deleted later resulting in an erroneous total. Once the messager is confirmed, the row is deleted as expecetd but I then need the totalUpdate function to be called.

Also, why doesn't the messager hold the script until confirmed? If I'm redirecting but have an error (and show in a messager), the messager displays briefly and the redirect happens anyway. Can the behavior of the messager be configured to behave like the alert() function?

Thanks in advance for you help.