jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid, jqxgtreegrid

This topic contains 5 replies, has 3 voices, and was last updated by Jupiter2007 6 years, 6 months ago.

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

Author

Change row background color on condition Posts
July 17, 2018 at 2:49 pm Change row background color on condition #101051

dke
Participant

Hi,
I would like to change the row background color base on the value of the cell.

i.e if the “Status” column has a value equal 1 I would like to change the row’s background to yellow.

Please help.
Thanks

July 18, 2018 at 6:51 am Change row background color on condition #101057

Hristo
Participant

Hello dke,

Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridcellclass.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 30, 2018 at 4:18 pm Change row background color on condition #102565

Jupiter2007
Participant

Hello,
I have the same question, but in a different condition. What I like to do is to have a alt row color for parent and child in jqxtreegrid.
Please see code below which is what I like to do. I used css for this limited data.
How can I add css class to children responding to certain parent when data is generating dynamically.

Thank you

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>01_01 Exercise – Start</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=”https://jqwidgets.com/public/jqwidgets/jqx-all.js”></script>
<link href=”https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css” rel=”stylesheet” >
<script type=”text/javascript”>
$(document).ready(function () {
var employees = [
{
“EmployeeID”: 2, “FirstName”: “Andrew”, “LastName”: “Fuller”, “Country”: “USA”, “Title”: “Vice President, Sales”, “BirthDate”: “1952-02-19 00:00:00”,
children: [
{ “EmployeeID”: 3, “FirstName”: “Janet”, “LastName”: “Leverling”, “Country”: “USA”, “Title”: “Sales Representative”, “BirthDate”: “1963-08-30 00:00:00”},
{ “EmployeeID”: 4, “FirstName”: “Margaret”, “LastName”: “Peacock”, “Country”: “USA”, “Title”: “Sales Representative”, “BirthDate”: “1937-09-19 00:00:00” },

]},
{
“EmployeeID”: 5, “FirstName”: “Steven”, “LastName”: “Buchanan”, “Country”: “UK”, “Title”: “Sales Manager”, “BirthDate”: “1955-03-04 00:00:00”,
children: [
{ “EmployeeID”: 6, “FirstName”: “Michael”, “LastName”: “Suyama”, “Country”: “UK”, “Title”: “Sales Representative”, “BirthDate”: “1963-07-02 00:00:00”},
{ “EmployeeID”: 7, “FirstName”: “Robert”, “LastName”: “King”, “Country”: “UK”, “Title”: “Sales Representative”, “BirthDate”: “1960-05-29 00:00:00”},
{ “EmployeeID”: 9, “FirstName”: “Anne”, “LastName”: “Dodsworth”, “Country”: “UK”, “Title”: “Sales Representative”, “HireDate”: “1994-11-15 00:00:00”, “BirthDate”: “1966-01-27 00:00:00” }
]
},
{ “EmployeeID”: 8, “FirstName”: “Laura”, “LastName”: “Callahan”, “Country”: “USA”, “Title”: “Inside Sales Coordinator”, “BirthDate”: “1958-01-09 00:00:00”,
children: [
{ “EmployeeID”: 1, “FirstName”: “Nancy”, “LastName”: “Davolio”, “Country”: “USA”, “Title”: “Sales Representative”, “BirthDate”: “1948-12-08 00:00:00” }]
}

];
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘EmployeeID’, type: ‘number’ },
{ name: ‘FirstName’, type: ‘string’ },
{ name: ‘LastName’, type: ‘string’ },
{ name: ‘Title’, type: ‘string’ },
{ name: ‘children’, type: ‘array’ },
{ name: ‘expanded’, type: ‘bool’ },
{ name: ‘BirthDate’, type: ‘date’ }
],
hierarchy:
{
root: ‘children’
},
id: ‘EmployeeID’,
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);

// create Tree Grid
$(“#treeGrid”).jqxTreeGrid(
{

width: 600,
source: dataAdapter,
sortable: true,
altRows:true,
ready: function ()
{// expand row with ‘EmployeeKey = 2’
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, 2);
// $(“#treeGrid”).jqxTreeGrid(‘selectRow’, 2)
$(“#treeGrid”).addClass(‘azita’);
$(‘.azita table tr[role=”row”]’).addClass(‘newColor’);
},
columns: [
{ text: ‘FirstName’, dataField: ‘FirstName’, width: 150 },
{ text: ‘LastName’, dataField: ‘LastName’, width: 120 },
{ text: ‘Title’, dataField: ‘Title’, width: 160 },
{ text: ‘Birth Date’, dataField: ‘BirthDate’, cellsFormat: ‘d’, width: 170 }

]
});
});//new
</script>
<style>
/*.azita .jqx-grid-table tr:nth-child(even) {
background-color: #bada55 !important;
}

.azita .jqx-grid-table tr:nth-child(odd) {
background-color: lightblue !important;
}
*/

.azita .jqx-grid-cell {
background-color:transparent;
}
.azita [data-key=”2″],.azita [data-key=”8″]{
background-color:plum;
}
.azita [data-key=”4″],.azita [data-key=”1″],.azita [data-key=”3″]{
background-color:rgb(235, 187, 235);
}
.azita [data-key=”5″]{
background-color: #bbf585;
}
.azita [data-key=”6″],.azita [data-key=”7″],.azita [data-key=”9″]{
background-color: #d4fcaf;
}
.newColor{
background-color: red;

}
/*.jqx-grid-cell-alt {
background:lavender;
}*/

</style>
</head>
<body>
<div id=”treeGrid”>
</div>
</body>
</html>

October 31, 2018 at 11:46 am Change row background color on condition #102570

Hristo
Participant

Hello Jupiter2007,

This is relevant to jqxTreeGrid topics.
You could use the cellsRenderer callback to set the desired style.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

November 6, 2018 at 5:29 pm Change row background color on condition #102660

Jupiter2007
Participant

Hi Hristo,
Thank you for your help.
What I am looking for is to have a alt row color for parent and child as a group in jqxtreegrid. I am not sure if you were able to see my styling.
Rendering cell can be done as you instructed, however, getting the whole background color of the row for all children.
Thank you again for your time and attention.
Jupiter2007

November 6, 2018 at 6:17 pm Change row background color on condition #102661

Jupiter2007
Participant

Hi Hristo,
That’s what I want to achieve, but dynamically. Right now it’s working of css specifics
Example
Thank you

Jupiter2007
Author

Posts

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

You must be logged in to reply to this topic.