Jump to content

How to Activate RowSelect using UniDBTreeGrid


Servant5166

Recommended Posts

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.

post-4620-0-61080500-1515018106_thumb.png

Link to comment
Share on other sites

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:

post-906-0-73057100-1515063119_thumb.png

 

Best regards,

Link to comment
Share on other sites

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:

attachicon.gifdbtreegridRowSelect.png

 

Best regards,

 

Thank you so much.

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...