datagrid getSelected only works every other time, with merged cells...

[2plus2]

Howdy...

Using data grid with merged cells and when I click on "..." to activate the edit menu, the getSelected method only returns data every other time. First click, works. Second click, the row object is null. Third click, works. Etc.

Code:

    function editAccount() {
        var row = $('#dgAccounts').datagrid('getSelected');
        $.messager.confirm('Warning', "Changes will require approval, do you wish to proceed?", function (r) {
           <snip>
        });
    }

Ideas?

[stworthy]

What is the '...', providing a simple example may be more appropriate.

[2plus2]

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:

Code:

   <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); })">&nbsp;</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">&nbsp;</th> 
        </tr>  
    </thead>

rowAction Menu

Code:

    function rowAction(row) {
        return "<a href='javascript:niente();' style='text-decoration:none;' onclick='showMenu(this)'> ...</a>";
    }

Menu HTML

Code:

<div id="mm" class="easyui-menu" style="width:120px;">  
    <div data-options="name:'edit',iconCls:'icon-edit'">Edit</div>  
</div>  

Menu JS

Code:

    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:

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:

Code:

            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;
                }

            }

[stworthy]

If one row is selected, calling 'getSelected' method will always return the selected record data. Please refer to this example http://jsfiddle.net/wGLFF/. It works fine.

If you want to prevent from event bubbling when clicking a menu item, try the following function.

Code:

    function rowAction(row) {
        return "<a href='#' style='text-decoration:none;' onclick='showMenu(this);event.stopPropagation();'> ...</a>";
    }

[2plus2]

Thanks, much appreciated. I'll check this out.

[2plus2]

P.S. The issue was we had singleSelect="false" on the grid where we were merging cells. This caused the row to unselect sometimes when clicking on the menu link.

[2plus2]

We are still seeing intermittent row selected problems. The row is being un-selected by "something" between activating the menu and the selection of the menu option.

This only happens when the grid has merged cells.

Not sure the best path to debug this issue. Ideas welcome.

[stworthy]

Here is the updated example http://jsfiddle.net/wGLFF/2/