Solved

keep the value in grid but hide it

Posted on 2014-09-04
8
118 Views
Last Modified: 2014-09-17
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
0
Comment
Question by:royjayd
  • 4
  • 3
8 Comments
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 40304981
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
 
LVL 22

Accepted Solution

by:
Mrunal earned 250 total points
ID: 40305573
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
 

Author Comment

by:royjayd
ID: 40305624
thanks..but i am using Ext-Js 4.2
Any clue how i can do it in Ext-js 4.2.
0
 
LVL 22

Expert Comment

by:Mrunal
ID: 40305643
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
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: 40305697
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
 
LVL 22

Expert Comment

by:Mrunal
ID: 40305724
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
 

Author Comment

by:royjayd
ID: 40306891
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
 
LVL 22

Expert Comment

by:Mrunal
ID: 40309495
On clicking on given link, I am getting error to execute EXT-JS code.

I am not able to see the rendered table.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

706 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

16 Experts available now in Live!

Get 1:1 Help Now