NestedGrid- Color cells

[kkasunpereraMember]

Hi

I’m using NestedGrid and below is my code.

1) I want to go through each child grid and compare each column’s cell values with each other column’s cell values
is there a function to get no of columns in child grid?
how to get no of cells in a column?
2) Then if particular cell value is same as a cell value in other column I want to color both with a perticuler color.
‘ e.g. if column:1 cell:2 value appears in some cell in column 2,4,5, I want to color all 4 cells with “blue” color

Is this possible, I could not find any functions to do this from the API, If this is possible please give me some hints how to do this

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.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.grouping.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="scripts/gettheme.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        // prepare the data
        var data = new Array();
  
        var documentName=["HSBC inc.","City Bank"];
      
        var sectionName =["Risk Factors","Discription of Notes","Plan of Distribution","ERISA Considerations", "Tax Considerations"];
        var sectionCatogoryID= ["0","1","2","3","4"];
 
        var docSec=new Array();
        
            // create nested arrays
             
        for(var i=0; i<sectionName.length; i++){
            docSec[i]=new Array();
            for(var j=0; j<documentName.length; j++){
                docSec[i][j]= new Array();
            }
        }
        
  
        docSec[0][0]=["Putable","Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[0][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[0][2]= ["Putable"];
        docSec[0][3]= ["Bond Pool","Bullet Bond","Cash CDO"];
        
        
        docSec[1][0]=[];
        docSec[1][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[1][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[1][3]=  ["Bond Pool","Cash CDO"];
        
      
        docSec[2][0]=["Management Style","Seniority","CDO Portfolio Manager"];
        docSec[2][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[2][2]=    [];
        docSec[2][3]=  ["Bond Pool","Cash CDO"];
        
        docSec[3][0]=["Value At Issue"];
        docSec[3][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[3][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Cash CDO"];
        docSec[3][3]=  [];
        
        docSec[4][0]=["Value At Issue"];
        docSec[4][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[4][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Value At Issue"];
        docSec[4][3]=  ["Strippable","Asset Pool Equity"];
             
            var k = 0;
            for (var i = 0; i < sectionName.length; i++) {
                var row = {};
                row["sectionname"] = sectionName[k];
                row["sectioncatogory"] = sectionCatogoryID[k];
                data[i] = row;
                k++;
            }
            var source =
                {
                localdata: data,
                datatype: "array"
            };
        
            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
            
            
                var data2 = new Array();
            
      
                for (var i = 0; i < 10; i++) {
                    var row2 = {};
                    for (var j = 0; j < documentName.length; j++) {
                        if(typeof  docSec[datarecord.sectioncatogory][j] == 'undefined') {
                            row2["doc"+j]="";
                        }
                        else{
                            row2["doc"+j] = docSec[datarecord.sectioncatogory][j][i];
                        }
                        // row2["doc1"] = docSec[datarecord.sectioncatogory][1][i];
                        // row2["doc2"]= docSec[datarecord.sectioncatogory][2][i];
                        //row2["doc3"]= docSec[datarecord.sectioncatogory][3][i];
                    }
                    data2[i] = row2;
            
                }
                var source2 =
                    {
                    localdata: data2,
                    datatype: "array"
                };
            
                //adding data to columns
                var columnsData = [];
                for (var i = 0; i < documentName.length; i++) {
                    columnsData.push({ text: documentName[i], datafield:'doc'+i , width: 150 });
                };
                if (tabsdiv != null) {
                    tabsdiv.jqxGrid({source: source2, theme: theme, width: 700, height: 200,columns:columnsData});
                }
            
            
            }
        
            //create Parent Grid and call to raw details
            $("#jqxgrid").jqxGrid(
            {
                width: 770,
                height: 450,
                source: source,
                theme: theme,
                rowdetails: true,
            
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
  
                },
                initrowdetails: initrowdetails,
                columns: [
                
             
                    { text: 'Doc Section Name', datafield: 'sectionname', width: 770}
                ]
            });
        });
</script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
  
</div>

[DimitarParticipant]

Hello kkasunperera,

1) In your case, the number of columns in the child grid is equal to the length of the documentName array (2). So, you can use documentName.length to get it. The number of cells in a column is equal to the number of rows in a grid. You can get that number with the following expression (where childGridID is the id of the current child grid):

$("#childGridID").jqxGrid('getrows').length;

2) For colouring cells you can use cellsrenderer. Find out more about it here.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kkasunpereraMember]

Hi Dimitar

In the link that you have send you, cellsrenderer is used at the time of the data initialization to columns.

How can I use cellsrenderer to color the cells after grid displays all the data, i.e in a event of button click?

     //var dataFields stores the datafileds names
   var dataFields=["firstname","lastname","productname","price","quantity","total"];
               $("#colorcellbutton").bind('click', function () {
                    //var datarow = generaterow();
                    // $("#jqxgrid").jqxGrid('addrow', null, datarow);
                    var rowcount= $("#jqxgrid").jqxGrid('getrows').length;
                    
             
                    for(var x=0; x<dataFields.length;x++){
                        for(var y=0;y<rowcount;y++){
   
                    var value = $('#jqxgrid').jqxGrid('getcellvalue', y, dataFields[x]);
                 //How can I change color of the cell here
                   
                        }
                        
                    }
                       
                }); 

[DimitarParticipant]

Hi kkasunperera,

Using setcolumnproperty when the button is clicked you can set the cellsrenderer function in a moment of time after the creation of the grid. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.
    </title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <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 dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                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' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $("#render").click(function () {
                $("#jqxgrid").jqxGrid('setcolumnproperty', 'firstname', 'cellsrenderer', function (row, columnfield, value, defaulthtml, columnproperties) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
    <button id="render">
        Click to colour the cells!</button>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kkasunpereraMember]

Hi Dimitar

Here is my complete code for coloring same like cells in child-grids, when row-details arrow is expanded.
But I have a small problem. When I shrink the row details arrow, The child grid does not disappear, whats the wrong with my code and how do I overcome this problem?

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.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.grouping.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="scripts/gettheme.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getTheme();
        // prepare the data
        var data = new Array();
        var documentName=["HSBC inc.","City Bank"];
        var sectionName =["Risk Factors","Discription of Notes","Plan of Distribution","ERISA Considerations", "Tax Considerations"];
        var sectionCatogoryID= ["0","1","2","3","4"];
        var docSec=new Array();
            // create nested arrays
        for(var i=0; i<sectionName.length; i++){
            docSec[i]=new Array();
            for(var j=0; j<documentName.length; j++){
                docSec[i][j]= new Array();
            }
        }
        docSec[0][0]=["Putable","Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[0][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[0][2]= ["Putable"];
        docSec[0][3]= ["Bond Pool","Bullet Bond","Cash CDO"];
        docSec[1][0]=[];
        docSec[1][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[1][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable"];
        docSec[1][3]=  ["Bond Pool","Cash CDO"];
        docSec[2][0]=["Management Style","Seniority","CDO Portfolio Manager"];
        docSec[2][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[2][2]=    [];
        docSec[2][3]=  ["Bond Pool","Cash CDO"];
        docSec[3][0]=["Value At Issue"];
        docSec[3][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[3][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Cash CDO"];
        docSec[3][3]=  [];
        docSec[4][0]=["Value At Issue"];
        docSec[4][1]= ["Putable","Strippable","Asset Pool Equity","Strippable"];
        docSec[4][2]=  ["Calleble","assets managed by","Asset Pool Equity","Strippable","Value At Issue"];
        docSec[4][3]=  ["Strippable","Asset Pool Equity"];
            var k = 0;
            for (var i = 0; i < sectionName.length; i++) {
                var row = {};
                row["sectionname"] = sectionName[k];
                row["sectioncatogory"] = sectionCatogoryID[k];
                data[i] = row;
                k++;
            }
            var source =
                {
                localdata: data,
                datatype: "array"
            };
            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var information = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
                var data2 = new Array();
                for (var i = 0; i < 10; i++) {
                    var row2 = {};
                    for (var j = 0; j < documentName.length; j++) {
                        if(typeof  docSec[datarecord.sectioncatogory][j] == 'undefined') {
                            row2["doc"+j]="";
                        }
                        else{
                            row2["doc"+j] = docSec[datarecord.sectioncatogory][j][i];
                        }
  
                    }
                    data2[i] = row2;
                }
                var source2 =
                    {
                    localdata: data2,
                    datatype: "array"
                };
                //adding data to columns
                var columnsData = [];
                for (var i = 0; i < documentName.length; i++) {
                    columnsData.push({ text: documentName[i], datafield:'doc'+i , width: 150 });
                };
                if (tabsdiv != null) {
                    tabsdiv.jqxGrid({source: source2, theme: theme, width: 700, height: 200,columns:columnsData});
                 /*
                  * Organizing the cell values for coloring
                  */
var rowcount= tabsdiv.jqxGrid('getrows').length;
                    
                    var celColor= new Array(); 
                   var dataFields=["doc0","doc1"]; // since size of documentName is ==2 yes this should modify
                    for(var x=0; x<dataFields.length;x++){
                        for(var y=0;y<rowcount;y++){
                
     
                     
                            var celValue =  tabsdiv.jqxGrid('getcellvalue', y, dataFields[x]);
                           
                            if(typeof  celColor[celValue] == 'undefined'){
                                celColor[celValue]= new Array();
                                celColor[celValue][0]=[dataFields[x]];
                        
                            }
                    
                            else{
                                
                                function checkContains(element, target){
                       
                                    var is_found = false;
                                    for(var i=0;i<celColor[element].length;i++){
                                        if(celColor[element][i] == target){
                                            is_found = true;
                                            break;
                                        }
                                    }
                                    return is_found;
                                }
                                if(checkContains(celValue,dataFields[x])){
                                } 
                                
                                else{
                                    var arrLenght=celColor[celValue].length;
                                    celColor[celValue][arrLenght]=[dataFields[x]];
                                   
                                }
                            }
         
                   
                        }
                        
                    }
            
            
                    //setting the highlight color for the cells
                                
                    for(var z=0; z<dataFields.length;z++){
                    
                        tabsdiv.jqxGrid('setcolumnproperty', dataFields[z], 'cellsrenderer', function (row, columnfield, value, defaulthtml, columnproperties) {
                            if (celColor[value].length==6) {
                                //bool=false;
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #CC99FF;">' + value + '</span>';
                            }
                            else if(celColor[value].length==5){
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #FF9999;">' + value + '</span>';
                            }
                            else if(celColor[value].length==4){
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #FFFF66;">' + value + '</span>';
                            }
                            else if(celColor[value].length==3){
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background:  #00FF00;">' + value + '</span>';
                            }
                       
                            else if(celColor[value].length==2){
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #CCFFFF;">' + value + '</span>';
                            }
                            else{
                                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #00FF00;">' + value + '</span>';
                            }
                        });
                    
                    }
                }
            }
            //create Parent Grid and call to raw details
            $("#jqxgrid").jqxGrid(
            {
                width: 770,
                height: 450,
                source: source,
                theme: theme,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                initrowdetails: initrowdetails,
                columns: [
                    { text: 'Doc Section Name', datafield: 'sectionname', width: 770}
                ]
            });
        });
</script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
</div>

[DimitarParticipant]

Hi kkasunperera,

The issue comes from the fact that sometimes there may be empty cells, whose value is an empty string (“”). You should check if a cell is empty before you render it, like is shown:

                    for (var z = 0; z < dataFields.length; z++) {
                        tabsdiv.jqxGrid('setcolumnproperty', dataFields[z], 'cellsrenderer', function (row, columnfield, value, defaulthtml, columnproperties) {
                            if (value != "") {
                                if (celColor[value].length == 6) {
                                    //bool=false;
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #CC99FF;">' + value + '</span>';
                                }
                                else if (celColor[value].length == 5) {
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #FF9999;">' + value + '</span>';
                                }
                                else if (celColor[value].length == 4) {
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #FFFF66;">' + value + '</span>';
                                }
                                else if (celColor[value].length == 3) {
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background:  #00FF00;">' + value + '</span>';
                                }
                                else if (celColor[value].length == 2) {
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #CCFFFF;">' + value + '</span>';
                                }
                                else {
                                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; background: #00FF00;">' + value + '</span>';
                                };
                            };
                        });
                    }

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kkasunpereraMember]

Thanks Dimitar, I was able to solve the problem, with your inputs.

Thanks again.

[Author]

Posts