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

Title: datagrid getSelected only works every other time, with merged cells...
Post by: 2plus2 on May 16, 2013, 10:36:28 AM

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?

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: stworthy on May 16, 2013, 06:31:15 PM

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

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: 2plus2 on May 16, 2013, 06:42:41 PM

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

            }

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: stworthy on May 16, 2013, 07:45:42 PM

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

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: 2plus2 on May 16, 2013, 08:42:59 PM

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

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: 2plus2 on May 23, 2013, 12:11:21 PM

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.

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: 2plus2 on May 24, 2013, 08:09:37 PM

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.

Title: Re: datagrid getSelected only works every other time, with merged cells...
Post by: stworthy on May 25, 2013, 06:06:50 PM

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

EasyUI Forum

General Category => Bug Report => Topic started by: 2plus2 on May 16, 2013, 10:36:28 AM