keep the value in grid but hide it

hi guys
I have a grid like this
basic-dup-grid.png
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:productrenderer},

 so that finally i see
basic-dup-grid-result.png
Any ideas?
 Thanks
basic-dup-grid.png
basic-dup-grid.png
royjaydAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
If you use jQuery there are two methods you can apply to the objects.  You can use hide() and that will remove the element from the DOM.  Or you can use fade() and that will render the element invisible, but keep its placeholder, not changing the alignment of the other elements.  Based on your example, it looks like fade() would be the choice you want.

Please post the HTML markup that renders your grid and I'll be glad to show you the jQuery that can be applied to an event to cause the fade() to occur.
0
MrunalCommented:
Hi Here is your solution:

<table id="tbl1" width="200px" border="1">
<tr>
    <th>PRODUCT
    </th>
    <th>TIME
    </th>
    <tr>
        <td>Mango
        </td>
        <td>May
        </td>
    </tr>
    <tr>
        <td>Mango
        </td>
        <td>Jun
        </td>
    </tr>
    <tr>
        <td>Pineapple
        </td>
        <td>Aug
        </td>
    </tr>
    <tr>
        <td>Grape
        </td>
        <td>Dec
        </td>
    </tr>
    <tr>
        <td>Apple
        </td>
        <td>Jan
        </td>
    </tr>
    <tr>
        <td>Pineapple
        </td>
        <td>Jan
        </td>
    </tr>
    <tr>
        <td>Mango
        </td>
        <td>Jun
        </td>
    </tr>
</tr>    
</table>

<br/>
<input type="button" id="btnFilter" value="Filter records" />

Open in new window


And your jquery function is:

$(function(){
    $('#btnFilter').click(function(){       
        $('#tbl1').find('tr').find('td:first').each(function(index){
            if(index > 0)
            {
                for(var c = index -1; c >= 0; c --)
                {                    
                    if($(this).html() == $('#tbl1').find('tr').find('td:first').eq(c).html())
                    {
                        $(this).css('color', 'red');                        
                    }
                }
            }
        });        
    });
});

Open in new window


You can use any jquery function for functionality. Hope this solves your query.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
royjaydAuthor Commented:
thanks..but i am using Ext-Js 4.2
Any clue how i can do it in Ext-js 4.2.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MrunalCommented:
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.
0
royjaydAuthor Commented:
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
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(), 
        
        
    	}
    ]
    }

Open in new window

Thanks
0
MrunalCommented:
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.
0
royjaydAuthor Commented:
hi Mrunal-

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()
        
        
    	}
    ]
    }
)

Open in new window


And you will see the table created by ext-js
0
MrunalCommented:
On clicking on given link, I am getting error to execute EXT-JS code.

I am not able to see the rendered table.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.