jQWidgets Forums

Tagged: custom renderer, grid, hover style in grid

This topic contains 9 replies, has 4 voices, and was last updated by Peter Stoev 10 years, 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Custom cellrender affects grid hover style Posts

January 9, 2013 at 10:37 pm Custom cellrender affects grid hover style #13400

alexx

Member

I created a grid in which I had to update row style, particularly background color, based on value in record of the grid. Unfortunately, this affects the grid’s hover and selected styles; classes jqx-fill-state-hover and jqx-fill-state-pressed no longer have effects on rows that I have changed background color.

Is there a way for me to change background color of a row based on value in that record and maintain styles that occurs when mouse hover a record or a record is selected?

January 10, 2013 at 4:44 am Custom cellrender affects grid hover style #13403

Peter Stoev

Keymaster

Hi alexx,

The priority of the inline CSS is usually higher and I suppose that’s the reason. Could youp post an example of your scenario?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2013 at 2:34 pm Custom cellrender affects grid hover style #13640

alexx

Member

Thanks for the prompt respond. Your response is just as I thought about style precedence. Is there any way I could still have selection/hover style? Is there a way to access jqwidgets hover/select event handlers?
I have recreated this by tweaking your Grid Cells Rendering Sample. See code below.

<!DOCTYPE html>
<html lang="en">    
    <head>
        <title id='Description'>Grid with custom cells rendering.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
        <style type="text/css">
	        .samplebgcolor{
				overflow: hidden;
				width: 100%;
				height:100%;
				background-color: #FFDDAA !important;
			}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
            	// prepare the data
            	var data = new Array();
            	var firstNames =
            		[
            		 "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            		 ];
            	var lastNames =
            		[
            		 "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            		 ];
            	var productNames =
            		[
            		 "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            		 ];
            	var priceValues =
            		[
            		 "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            		 ];
            	for (var i = 0; i < 100; i++) {
            		var row = {};
            		var productindex = Math.floor(Math.random() * productNames.length);
            		var price = parseFloat(priceValues[productindex]);
            		var quantity = 1 + Math.round(Math.random() * 10);
            		row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
            		row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
            		row["productname"] = productNames[productindex];
            		row["price"] = price;
            		row["quantity"] = quantity;
            		row["total"] = price * quantity;
            		data[i] = row;
            	}
            	
            	var source =
            	{
            			localdata: data,
            			datatype: "array"
            	};
            	
            	var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
           			if (value < 20) {
           				return '<div class="samplebgcolor"><span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span></div>';
                        //return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
               		}
               		else {
               			return '<div><span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span></div>';
                        //return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
               		}
            	}
            	
            	$("#jqxgrid").jqxGrid(
            			{
            				width: 670,
            				source: source,
            				pageable: true,
            				autoheight: true,
            				columns: [
            				          { text: 'First Name', datafield: 'firstname', width: 100 },
            				          { text: 'Last Name', datafield: 'lastname', width: 100 },
            				          { text: 'Product', datafield: 'productname', width: 180 },
            				          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer },
            				          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' },
            				          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
            				         ]
            			});
            	});
        </script>
    </head>
    
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
</html>

January 22, 2013 at 3:02 am Custom cellrender affects grid hover style #14019

cloudsurfer

Member

Peter,

I have two queries.

1) Is it possible to display popup/alert “onclick” of any item in the grid? If so how and also tell us how it can be used in nested grids also?

2) How to render html in rowdetails? Does javascript functionalities(like onclick etc.,) work after rendering the html?

January 22, 2013 at 5:32 am Custom cellrender affects grid hover style #14023

Peter Stoev

Keymaster

Hi cloudsurfer,

– You can find the list of supported events in the Grid’s API Documentation: jquery-grid-api.htm.
– For Row Details, see this sample: rowdetails.htm. You can put anything in the details area.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 22, 2013 at 6:10 am Custom cellrender affects grid hover style #14029

cloudsurfer

Member

var initrowdetails = function (index, parentElement, gridElement) {      
				var row = index;;
				var id = $("#list2").jqxGrid('getrowdata', row)['id'];
				var emaildetail = $("#list2").jqxGrid('getrowdata', row)['email1'];
				
			    var grid = $($(parentElement).children()[0]);
			    var url = "index.php?module=Users&action=getSentScheduledCampaignList";
				
				$.post(url,data,function(msg){
					jQuery("#"+id).html(msg);					
					$('.downloadCSV').click(downloadCSV);
				});            
					
			};

I have given an ajax call but it is not loading the html in my subgrid.

January 22, 2013 at 5:44 pm Custom cellrender affects grid hover style #14065

alexx

Member

Cloudsurfer, Peter,
Can you please put cloudsurfer’s two queries along with the responses in a separate thread; I am afraid we may lose track of my original question. Peter has requested sample code which I provided in my last post. Thanks.

Peter, do you have any suggestions based on the sample I posted?

January 22, 2013 at 7:49 pm Custom cellrender affects grid hover style #14068

Peter Stoev

Keymaster

Hi alexx,

You can specify a CSS class in the returned HTML string instead of returning inline CSS which is with higher priority. The Grid widget already have ‘select’ events like ‘rowselect’, ‘rowunselect’, ‘cellselect’ and ‘cellunselect’. However, it does not have hover event. We will consider adding a callback function instead of a hover event in the future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 11, 2015 at 8:10 pm Custom cellrender affects grid hover style #66947

korell

Participant

Peter,

Have you added a callback function or found another workaround for this problem within the last two years? If not, can you elaborate on the option that you mentioned in your last post (“specify a CSS class in the returned HTML string”)?
I have the same problem as certain rows in my grid are color coded depending on certain conditions/statuses, yet it would still be nice to have different row/cell background colors for hovering.

I’m sure alexx and I are not the only ones that are faced with this as color-coding/highlighting rows is fairly common.

Thanks,
Sacha

February 12, 2015 at 7:38 am Custom cellrender affects grid hover style #66979

Peter Stoev

Keymaster

Hi Sacha,

The higlight color comes from the theme, not based on some condition.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.