asked on

javascript with css

hi experts
I am using Ext-js 4.2 and i am trying to hide the group title row for my grouping (in grid).
This is my css

.x-grid-group-hd-collapsible .x-grid-group-title {
/*background-image:none;*/
/*visibility: hidden;*/
display:none;
}

This works partially , the group title row is not displayed but i still see some space like attached image. I thought display:none; will remove the space but it doesnt seem to work. Any clues on how to remove the space?

thanks in advance.
blank-space.png

SSupreme

You need to look at parent layout element and see what properties creates space, as child element already not displayed.
Example or source required to say more.

Jay Roy

ASKER

hi, thanks for response, this is my grid (with grouping) and store definitions

//Grid

items: [
			        {
				xtype: 'grid',
			    id : currGroupGrid,
			    alias: 'widget.currGroupGrid',			     
			    height :  175,
			    width :  180,
			    stripeRows : false,
				columnLines: true,					
				store: 'currency.CurrencyGroupingStore',
				margin : '3 3 3 3',
			    columns: [				 
				{header: 'Currency', dataIndex: 'currencyCode', flex: 1,sortable:true,hideable:false} //this column has blank spaces
				],
				 
				features: [
				{
				ftype: 'grouping',	  
				groupHeaderTpl: '{name} {[values.rows.length > 1 ? "("+values.rows.length+")" : ""]}',  
				hideGroupedHeader: false,
				startCollapsed: false
				  }
				 ],
			   
			    viewConfig: {
				stripeRows : false,
				getRowClass: function(record, index) {
					//set appropriate css
					debugger;
					if (record.data.type == 'ADD'){
						return 'newLineItem'; //'newLineItem';
					} 
					}			
				}				 
				}

Open in new window

//Store

Ext.define('CustomerRep.store.currency.CurrencyGroupingStore', {
	id : 'currencyGroupingStore',
    extend: 'Ext.data.Store',
    model: 'CustomerRep.model.currency.CurrencyGroupingModel',   //CurrencyGroupingModel contains currencyCode and currencyGroup
    alias: 'widget.currencyGroupingStore',  
	
	autoLoad : false,
	
	 
	groupers: ['currencyGroup'], //grouping done on currencyGroup 
	
    pageSize : 500,
	 
    proxy: {
        type: 'ajax',         
        url: 'getcurrencyGroupingData.controller',
		method:'GET',
		reader: {
            type : 'json',
			root : 'data',
			totalProperty : 'total',
			successProperty: 'success'
			
        }
    }
});

Open in new window

thanks

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jay Roy

ASKER

Thanks, this works. I have posted another question. I will greatly appreciate your help.
https://www.experts-exchange.com/questions/28643646/javascript-with-css-grid-grouping.html
Thanks once again.