Servant5166 Posted January 3, 2018 Share Posted January 3, 2018 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. Link to comment Share on other sites More sharing options...
Sherzod Posted January 4, 2018 Share Posted January 4, 2018 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, Link to comment Share on other sites More sharing options...
Servant5166 Posted January 4, 2018 Author Share Posted January 4, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now