The "..." is just our menu anchor. Click on that get our menu and then select the action you want. Edit / Remove / Etc.
Here's some code:
Table Headers HTML:
<thead>
<tr>
<th field="BankUserName" width="100" sortable="true">Bank User</th>
<th field="AccountNumber" width="90" sortable="true">Acct #</th>
<th field="Action" width="30" formatter="(function(value, row, index){ return rowAction(row); })"> </th>
<th field="CCY" width="40" sortable="true">CCY</th>
<th field="ThresholdTypeName" width="50" sortable="true">Type</th>
<th field="isInitiator" width="60" sortable="true">Initiator</th>
<th field="InitiatorThreshold" width="80" sortable="true" formatter="(function(value, row, index){ return rowNumber(value); })">Threshold</th>
<th field="isApprover" width="60" sortable="true">Approver</th>
<th field="ApproverThreshold" width="80" sortable="true" formatter="(function(value, row, index){ return rowNumber(value); })">Threshold</th>
<th field="isReleaser" width="60" sortable="true">Releaser</th>
<th field="ApprovalStatus" width="70" sortable="true">Status</th>
<th field="Niente" width="500"> </th>
</tr>
</thead>
rowAction Menu
function rowAction(row) {
return "<a href='javascript:niente();' style='text-decoration:none;' onclick='showMenu(this)'> ...</a>";
}
Menu HTML
<div id="mm" class="easyui-menu" style="width:120px;">
<div data-options="name:'edit',iconCls:'icon-edit'">Edit</div>
</div>
Menu JS
function showMenu(object) {
var pos = $(object).offset();
$('#mm').menu("show", {
left: pos.left,
top: pos.top
});
}
$('#mm').menu({
onClick: function (item) {
switch (item.name) {
case "edit":
editAccount();
break;
}
}
});
Edit Code:
function editAccount() {
var row = $('#dgAccounts').datagrid('getSelected');
$.messager.confirm('Warning', "Changes will require approval, do you wish to proceed?", function (r) {
if (r) {
<snip>
}
});
}
So we click on ".." to active the menu, choose Edit (it's our only option), and when editAcount activates, the getSelect does not alway return an object.
var row = $('#dgAccounts').datagrid('getSelected');
This only happens when we merge the cells. When we don't have any cells merged the above works perfectly.
Here's how we are merging the cells:
onLoadSuccess: function (data) {
var rowCount = 0;
var mySize = Object.size(data);
mySize = (mySize != 0 ? mySize + 1 : 0);
while (rowCount < mySize) {
$('#dg').datagrid('mergeCells', {
index: rowCount,
field: 'BankUserName',
rowspan: 3
});
$('#dg').datagrid('mergeCells', {
index: rowCount,
field: 'AccountNumber',
rowspan: 3
});
$('#dg').datagrid('mergeCells', {
index: rowCount,
field: 'Action',
rowspan: 3
});
rowCount = rowCount + 3;
}
}