Jump to content

TUnistringgrid - highlight row and column on cell focus


rhennink

Recommended Posts

Hi,

 

Can you try to use this approach for now ?!:

 

1. UniStringGrid1 -> ClientEvents -> ExtEvents -> function cellclick:

function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts)
{
    var grid = this;
    var _lockedGrid = grid.lockedGrid;
    var _normalGrid = grid.normalGrid;
    var _lockedGridColsLength = _lockedGrid.columnManager.getColumns().length;
    var _normalGridColsLength = _normalGrid.columnManager.getColumns().length;

    if (_lockedGridColsLength > 0) {
        _lockedGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        Ext.get(_lockedGrid.getView().id + "-record-" + tr.attributes[2].value).addCls('custom-row');
    }

    if (_normalGridColsLength > 0) {
        _normalGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        Ext.get(_normalGrid.getView().id + "-record-" + tr.attributes[2].value).addCls('custom-row');
    }

    var table = Ext.get(tr).el.up('table').el;

    _lockedGrid.view.el.select('.custom-column').removeCls('custom-column');
    _normalGrid.view.el.select('.custom-column').removeCls('custom-column');

    if (table && table.id == _lockedGrid.getView().id + '-table') {
        _lockedGrid.view.el.select('.x-grid-td.x-grid-cell-headerId-' + _lockedGrid.columnManager.columns[cellIndex].id).addCls('custom-column');
    } else if (table && table.id == _normalGrid.getView().id + '-table') {
        _normalGrid.view.el.select('.x-grid-td.x-grid-cell-headerId-' + _normalGrid.columnManager.columns[cellIndex].id).addCls('custom-column');
    }
}

2. CustomCSS:

.custom-row .x-grid-cell {
    background-color: #e0e0e0;
}

.custom-column {
    background-color: #e0e0e0;
}

Result:

post-906-0-52006000-1507181787_thumb.png

 

Best regards,

Link to comment
Share on other sites

  • 9 months later...

Hi,

 

Can you try to use this approach for now ?!:

 

1. UniStringGrid1 -> ClientEvents -> ExtEvents -> function cellclick:

function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts)
{
    var grid = this;
    var _lockedGrid = grid.lockedGrid;
    var _normalGrid = grid.normalGrid;
    var _lockedGridColsLength = _lockedGrid.columnManager.getColumns().length;
    var _normalGridColsLength = _normalGrid.columnManager.getColumns().length;

    if (_lockedGridColsLength > 0) {
        _lockedGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        Ext.get(_lockedGrid.getView().id + "-record-" + tr.attributes[2].value).addCls('custom-row');
    }

    if (_normalGridColsLength > 0) {
        _normalGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        Ext.get(_normalGrid.getView().id + "-record-" + tr.attributes[2].value).addCls('custom-row');
    }

    var table = Ext.get(tr).el.up('table').el;

    _lockedGrid.view.el.select('.custom-column').removeCls('custom-column');
    _normalGrid.view.el.select('.custom-column').removeCls('custom-column');

    if (table && table.id == _lockedGrid.getView().id + '-table') {
        _lockedGrid.view.el.select('.x-grid-td.x-grid-cell-headerId-' + _lockedGrid.columnManager.columns[cellIndex].id).addCls('custom-column');
    } else if (table && table.id == _normalGrid.getView().id + '-table') {
        _normalGrid.view.el.select('.x-grid-td.x-grid-cell-headerId-' + _normalGrid.columnManager.columns[cellIndex].id).addCls('custom-column');
    }
}

2. CustomCSS:

.custom-row .x-grid-cell {
    background-color: #e0e0e0;
}

.custom-column {
    background-color: #e0e0e0;
}

Result:

attachicon.gifHighlightRowAndColumn.png

 

Best regards,

HI,

 

I have upgraded my UniGui to version 1.10.0.1472, and a lot of CSS tokens are changed, so that also this one isn't working anymore ..

I tried to solve this part, but am failing so far.

 

do you have perhaps an updated version of this code for the new version??

 

RIchard

Link to comment
Share on other sites

  • 4 weeks later...
Are you using FixedCols ?!

 

Ok, Can you try this ?!:

function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts)
{
    var grid = this;
    var _lockedGrid = grid.lockedGrid;
    var _normalGrid = grid.normalGrid;
    var _lockedGridColsLength = _lockedGrid.columnManager.getColumns().length;
    var _normalGridColsLength = _normalGrid.columnManager.getColumns().length;

    rec = record.internalId;

    if (_lockedGridColsLength > 0) {
        _lockedGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        _lockedGrid.getView().el.select('table#' + _lockedGrid.getView().id + "-record-" + rec + " .x-grid-row").addCls('custom-row');

        _lockedGrid.view.el.select('.custom-column').removeCls('custom-column');
        _lockedGrid.view.el.select('.x-grid-cell-' + td.getAttribute('data-columnid')).addCls('custom-column');
    }

    if (_normalGridColsLength > 0) {
        _normalGrid.getView().el.select('tr.custom-row').removeCls('custom-row');
        _normalGrid.getView().el.select('table#' + _normalGrid.getView().id + "-record-" + rec + " .x-grid-row").addCls('custom-row');

        _normalGrid.view.el.select('.custom-column').removeCls('custom-column');
        _normalGrid.view.el.select('.x-grid-cell-' + td.getAttribute('data-columnid')).addCls('custom-column');
    }

}
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...