Solved

Grid with colored columns

Posted on 2014-09-03
15
105 Views
Last Modified: 2014-09-04
hi guys

I have a requirment where i need to come up with a grid on a screen where when user selects
data on first column, the related data on other columns needs to be highlighted.

from the image
colored-grid.png
When user clicks on apple, it should be highlighted in yellow and
its corresponding data in other columns should also be highlighted in yellow.
Similarly with Mango and PineApple.

Is there any grid in Ext-js 4.2 which i can use to support this feature?

Thanks.
0
Comment
Question by:royjayd
  • 8
  • 6
15 Comments
 
LVL 2

Expert Comment

by:Priya Sudharsan
ID: 40301672
try using renderer property.
0
 

Author Comment

by:royjayd
ID: 40301679
renderer can get little complex, there are more than 100 products in my grid.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40301779
could you provide a SIMPLE and sample data? Thanks.
0
 

Author Comment

by:royjayd
ID: 40302019
Sure
we have backend in java which will return json data
so we will have something like
{
    "total": 3,
    "data": [
        {
            "product": "apple",
            "timeOfYear": "april",
            "salesAmount": ">400"           
        },
        {
            "product": "mango",
            "timeOfYear": "july",
            "salesAmount": ">150" 
        },
        {
             "product": "pineapple",
            "timeOfYear": "feb",
            "salesAmount": ">200" 
        },
       {
             "product": "grapes",
            "timeOfYear": "feb",
            "salesAmount": ">150" 
        }

    ],
    "success": true,
    "serverMessage": null
}

Open in new window


and for the above data the grid will be displayed
colored-grid1.png
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40302043
where do come from the right color?
0
 

Author Comment

by:royjayd
ID: 40302049
it can be any color (in random) but each selected product has unique color to differentiate from the rest.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40302262
so what about a renderer for each column like this one :
function rndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

Open in new window


listen for cell click for your grid :
    listeners: {
        cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
            var cells = Ext.query("."+record.data.product + "-color");
            for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = getRandomColor();
            }
        }
    }

Open in new window


and you create a function getRandomColor to return a random color
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:royjayd
ID: 40302504
tested it in fiddle by hardcoding the color to red..

Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function timeRndr(value, meta) {
        meta.tdCls = meta.record.data.timeOfYear + "-color";
        return value;
}

function salesRndr(value, meta) {
        meta.tdCls = meta.record.data.salesAmount + "-color";
        return value;
}
 

Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr,
            listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = 'red';
					}
				}
			}},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true
              

                      
			},
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr},
              
            
        ],
        

    
 
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody() //Ext.getBody()
	}

    ]
    }
           
)

Open in new window


cant seem to make it work.
Can you tell me what is wrong..
Thanks very much.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40302516
check here t osee the difference : http://jsfiddle.net/of0ntLhu/3/
0
 

Author Comment

by:royjayd
ID: 40302533
ok thanks.
I took your code and replaced 'red' with random color generator using:
'#' + Math.random().toString(16).slice(2, 8);


Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function timeRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function salesRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}


Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true },
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr}              
        ],
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody(), //Ext.getBody()
        
        
    listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);
					}
				}
			}	}
    ]
    }
           
)

Open in new window


But when i click on apple, i see 3 different colors.
Any clue
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40302542
you need to store the color somewhere for each product

var colors = {};
function getColor(product) {
    if(colors[product]) return colors[product];
    colors[product] = '#' + Math.random().toString(16).slice(2, 8);
    return colors[product];
}

Open in new window


and use :
cells[i].style.backgroundColor = getColor(record.data.product);

Open in new window

0
 

Author Comment

by:royjayd
ID: 40302637
Thanks.

What i have done now is
I have taken uniique set of products, unique set of Time, unique set of Salesamount.
so from unique set of Time, feb is eliminated
from unique set of sales amount >150 is eliminated

This is the code (tested in fiddle)
Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});



var colors = {};
function getColor(product) {//make a new color for every product and return that
    if(colors[product])
    return colors[product];
    colors[product] = '#' + Math.random().toString(16).slice(2, 8);
    return colors[product];
}


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

var maco = {};
function timeRndr(value, meta) {
    if( !maco[value] ) {  // check if it already exists (return null if not)
        maco[value] = true;
        meta.tdCls = meta.record.data.product + "-color";
        return value;
    }
    else {
        return  '';
    } 
}



var maco1 = {};
function salesRndr(value, meta) {
        if( !maco1[value] ) {  // check if it already exists (return null if not)            
        maco1[value] = true;
        meta.tdCls = meta.record.data.product + "-color";
        return value;
    }
    else {
        return  '';
    }
    
       
}


Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true },
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr}              
        ],
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody(), //Ext.getBody()
        
        
    listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				//alert(cells);
                for(i=0;i<cells.length;i++) {
                //cells[i].style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);
                cells[i].style.backgroundColor = getColor(record.data.product);

					}
				}
			}	}
    ]
    }
           
)

Open in new window


Now when apple is clicked  i see the first row selected
Now when mango is clicked i see the second row selected
Now when pineapple is clicked  i see the third row selected

When grapes is clicked
{product:"grapes", timeOfYear:"feb", salesAmount:">150"}

I want to show something like
colored-grid2.png
Is there any way i can fill a grid cell with two colors
For example
cell with 'feb' has two colors (one for pineapple and one for grapes)
cell with '>150' has two colors (one for mango and one for grapes)

Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40302640
I don't see any way to do that
0
 

Author Comment

by:royjayd
ID: 40303603
ok thanks.
0
 

Author Comment

by:royjayd
ID: 40303963
any help with my next question will be greatly appreciated
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28511714.html

Thanks.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now