Jay Roy
asked on
keep the value in grid but hide it
hi guys
I have a grid like this
Is it possible that for each column (Product and Time)if a value appears more than once then
make the first value visible and hide the other dupilcate values in the cell (dont show it on UI)
In my code
I have a renderer like
var prodPlaceHolder = {};
function productrenderer(value, meta) {
if( !prodPlaceHolder[value] ) { // check if it already exists (return null if not)
prodPlaceHolder[value] = true;
meta.tdCls = meta.record.data.product + "-color";
//alert(meta.tdCls);
return value;
}
else {
return ''; // Instead of removing the value i want to keep it but not show it on UI, make it hide or invisible.
}
}
{header: "Product", width: 200, dataIndex: 'product', sortable: true,renderer:productrende rer},
so that finally i see
Any ideas?
Thanks
basic-dup-grid.png
basic-dup-grid.png
I have a grid like this
Is it possible that for each column (Product and Time)if a value appears more than once then
make the first value visible and hide the other dupilcate values in the cell (dont show it on UI)
In my code
I have a renderer like
var prodPlaceHolder = {};
function productrenderer(value, meta) {
if( !prodPlaceHolder[value] ) { // check if it already exists (return null if not)
prodPlaceHolder[value] = true;
meta.tdCls = meta.record.data.product + "-color";
//alert(meta.tdCls);
return value;
}
else {
return ''; // Instead of removing the value i want to keep it but not show it on UI, make it hide or invisible.
}
}
{header: "Product", width: 200, dataIndex: 'product', sortable: true,renderer:productrende
so that finally i see
Any ideas?
Thanks
basic-dup-grid.png
basic-dup-grid.png
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Can not we combine Ext.js code and jQuery code ?
After rendering all in browser, it is just simple HTML table.
and I have given you the logic to apply filter to HTML table.
It should work, if table structure is same which you provided.
If not, then please share your rendered updated HTML table structure. for this also we just need to update logic for selecting TRs and TDs.
After rendering all in browser, it is just simple HTML table.
and I have given you the logic to apply filter to HTML table.
It should work, if table structure is same which you provided.
If not, then please share your rendered updated HTML table structure. for this also we just need to update logic for selecting TRs and TDs.
ASKER
I am new to Ext-js and not sure if we can combine Ext.js and jquery code.
I am not using html anywhere, all my code is in javascript.
Here is the complete code
I am not using html anywhere, all my code is in javascript.
Here is the complete code
Ext.create('Ext.data.Store', {
storeId:'productStore',
fields:['product','time', 'sales'],
groupField: 'department',
data:[
{product:"apple", time:"april", sales:"1"},
{product:"mango", time:"may", sales:"1-5"},
{product:"pineapple", time:"june", sales:"10-15"},
{product:"grape", time:"july", sales:"15-30"},
{product:"apple", time:"dec", sales:"15-30"},
{product:"pineapple", time:"may", sales:"30-35"},
{product:"apple", time:"jan", sales:"2-5"}
]
});
var prodPlaceHolder = {};
function productrenderer(value, meta) {
if( !prodPlaceHolder[value] ) { // check if it already exists (return null if not)
prodPlaceHolder[value] = true;
meta.tdCls = meta.record.data.product + "-color";
//alert(meta.tdCls);
return value;
}
else {
return ''; // Instead of removing the value i want to keep it but not show it on UI, make it hide or invisible.
}
}
Ext.create('Ext.form.Panel',{
layout : {
type : 'hbox',
align: 'left',
pack: 'center'
},
items: [
{
id:'myGrid',
xtype : 'grid',
title: 'Product Analysis',
store: Ext.data.StoreManager.lookup('productStore'),
autoHeight: true,
columns: [
{header: "Product", width: 79, dataIndex: 'product', renderer:productrenderer},
{header: "time", width: 100, dataIndex: 'time', sortable: true },
{header: "sales", width: 100, dataIndex: 'sales', sortable: true}
],
height:410,
//width:400,
// split: true,
// region: 'south',
renderTo: Ext.getBody(),
}
]
}
Thanks
Hi royjayd,
I asked for rendered HTML table structure.
I mean this code is fine, but if you share how it looks like on browser and the layout of table after displaying on browser, it would be great help.
I asked for rendered HTML table structure.
I mean this code is fine, but if you share how it looks like on browser and the layout of table after displaying on browser, it would be great help.
ASKER
hi Mrunal-
You just have to run this code in Sencha Fiddle : https://fiddle.sencha.com/#fiddle/m0
And you will see the table created by ext-js
You just have to run this code in Sencha Fiddle : https://fiddle.sencha.com/#fiddle/m0
Code:
Ext.create('Ext.data.Store', {
storeId:'productStore',
fields:['product','time', 'sales'],
groupField: 'department',
data:[
{product:"apple", time:"april", sales:"1"},
{product:"mango", time:"may", sales:"1-5"},
{product:"pineapple", time:"june", sales:"10-15"},
{product:"grape", time:"july", sales:"15-30"},
{product:"apple", time:"dec", sales:"15-30"},
{product:"pineapple", time:"may", sales:"30-35"},
{product:"apple", time:"jan", sales:"2-5"}
]
});
var prodPlaceHolder = {};
function productrenderer(value, meta) {
if( !prodPlaceHolder[value] ) { // check if it already exists (return null if not)
prodPlaceHolder[value] = true;
meta.tdCls = meta.record.data.product + "-color";
//alert(meta.tdCls);
return value;
}
else {
return ''; // Instead of removing the value i want to keep it but not show it on UI, make it hide or invisible.
}
}
Ext.create('Ext.form.Panel',{
layout : {
type : 'hbox',
align: 'left',
pack: 'center'
},
items: [
{
id:'myGrid',
xtype : 'grid',
title: 'Product / currency/ tenor Analysis',
store: Ext.data.StoreManager.lookup('productStore'),
autoHeight: true,
columns: [
{header: "Product", width: 79, dataIndex: 'product', renderer:productrenderer},
{header: "time", width: 100, dataIndex: 'time', sortable: true },
{header: "sales", width: 100, dataIndex: 'sales', sortable: true}
],
height:410,
//width:400,
// split: true,
// region: 'south',
renderTo: Ext.getBody()
}
]
}
)
And you will see the table created by ext-js
On clicking on given link, I am getting error to execute EXT-JS code.
I am not able to see the rendered table.
I am not able to see the rendered table.
ASKER
Any clue how i can do it in Ext-js 4.2.