How to Activate RowSelect using UniDBTreeGrid

[Servant5166]

Hi,

 

I would like to use row selection using the UniDBTreeGrid component. I see an option for it, but I can't set it to True.

I've attached an example a sample for reference.

 

Also, can you show me how to change row selection color based on a condition?

 

Thanks.

[Sherzod]

Hi,

 

One possible solution, can you try this approach too ?!:

 

1. CustomCSS:

.custom-row .x-grid-cell {
    background-color: #B299CC !important;
}

.custom-row .x-grid-cell-selected  {
    background-color: greenyellow !important;
}

2. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function select:

function select(sender, record, index, eOpts)
{
    
    if (record.id !== '_root') {
        var grid = this;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + record.id);
        if (record) {
            record.addCls('custom-row');
        }
    };
}

3. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function itemexpand:

function itemexpand(sender, eOpts)
{
    if (sender.id !== '_root') {
        var grid = sender.store.grid;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + sender.id);
        if (record) {
            record.addCls('custom-row');
        }        
    };
}

4. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function itemcollapse:

function itemcollapse(sender, eOpts)
{
    if (sender.id !== '_root') {
        var grid = sender.store.grid;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + sender.id);
        if (record) {
            record.addCls('custom-row');
        }        
    };
}

Result:

 

Best regards,

[Servant5166]

Hi,

 

One possible solution, can you try this approach too ?!:

 

1. CustomCSS:

.custom-row .x-grid-cell {
    background-color: #B299CC !important;
}

.custom-row .x-grid-cell-selected  {
    background-color: greenyellow !important;
}

2. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function select:

function select(sender, record, index, eOpts)
{
    
    if (record.id !== '_root') {
        var grid = this;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + record.id);
        if (record) {
            record.addCls('custom-row');
        }
    };
}

3. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function itemexpand:

function itemexpand(sender, eOpts)
{
    if (sender.id !== '_root') {
        var grid = sender.store.grid;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + sender.id);
        if (record) {
            record.addCls('custom-row');
        }        
    };
}

4. UniDBTreeGrid1 -> ClientEvents -> ExtEvents -> function itemcollapse:

function itemcollapse(sender, eOpts)
{
    if (sender.id !== '_root') {
        var grid = sender.store.grid;
        grid.getView().el.select('tr.custom-row').removeCls('custom-row');
        var record = Ext.get(grid.getView().id + "-record" + sender.id);
        if (record) {
            record.addCls('custom-row');
        }        
    };
}

Result:

dbtreegridRowSelect.png

 

Best regards,

 

Thank you so much.