La couleur de toutes les bordures ne change pas (seules les bordures inférieure et droite changent)

Question

Lors de la validation d'un JqxGrid, je voudrais changer les bordures de cellule en couleur ROUGE si la cellule a des valeurs vides. J'ai réussi à mettre en évidence les bordures des cellules, mais seules les bordures inférieures et droites sont en ROUGE, qu'est-ce qui me manque pour mettre en évidence toutes les bordures?

Cliquez sur le bouton 'cliquez pour valider' pour voir les bordures de cellules-ed erreur dans RED

jsfiddle

$(document).ready(function() { 
 

 
    // prepare the data 
 
    var data = new Array(); 
 

 
    var row1 = {}; 
 
    row1["firstname"] = 'Andrew'; 
 
    row1["secondname"] = 'A'; 
 

 
    var row2 = {}; 
 
    row2["firstname"] = ''; 
 
    row2["secondname"] = ''; 
 

 
    var row3 = {}; 
 
    row3["firstname"] = ''; 
 
    row3["secondname"] = 'C'; 
 

 
    data.push(row1); 
 
    data.push(row2); 
 
    data.push(row3); 
 

 
    var source = { 
 
    localdata: data, 
 
    datatype: "array" 
 
    }; 
 

 
    $("#jqxgrid").jqxGrid({ 
 
    width: "100%", 
 
    source: source, 
 
    autoheight: true, 
 
    editable: true, 
 
    editmode: 'selectedcell', 
 
    selectionmode: 'singlecell', 
 
    columns: [{ 
 
     text: 'First Name', 
 
     datafield: 'firstname', 
 
     width: 150, 
 
     cellsalign: 'left' 
 
     }, 
 

 
     { 
 
     text: 'Second Name', 
 
     datafield: 'secondname', 
 
     width: 150, 
 
     cellsalign: 'left' 
 
     } 
 
    ] 
 
    }); 
 

 
    $("#btn").on('click', function() { 
 
    var columns = ['firstname', 'secondname']; 
 
    $.each(columns, function(colIndex, eachColumn) { 
 
     $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn, 
 
     'cellclassname', 
 
     function(row, columnfield, value) { 
 
      if (value == undefined || value.length == 0) { 
 
      return 'erroredcolumn'; 
 
      } 
 
     }); 
 
    }); 
 
    }); 
 

 
});

.erroredcolumn { 
 
    border-color: red!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> 
 
    <div id="jqxgrid"></div> 
 
</div> 
 
<input type="button" id="btn" value="click to validate" />

Answer 1

Essayez ci-dessous le code

 $(document).ready(function() { 
 

 
      // prepare the data 
 
      var data = new Array(); 
 
     
 
      var row1 = {}; 
 
      row1["firstname"] = 'Andrew'; 
 
      row1["secondname"] = 'A'; 
 
    \t \t \t \t \t \t 
 
      var row2 = {}; 
 
      row2["firstname"] = ''; 
 
      row2["secondname"] = ''; 
 

 
\t \t \t \t \t \t var row3 = {}; 
 
      row3["firstname"] = ''; 
 
      row3["secondname"] = 'C'; 
 
      
 
      data.push(row1); 
 
      data.push(row2); 
 
      data.push(row3); 
 

 
\t \t \t \t \t \t var source = { 
 
       localdata: data, 
 
       datatype: "array" 
 
      }; 
 
      
 
      $("#jqxgrid").jqxGrid({ 
 
       width: "100%", 
 
       source: source, 
 
       autoheight: true, 
 
       editable: true, 
 
     \t \t  \t editmode: 'selectedcell', 
 
\t \t \t \t \t  \t selectionmode: 'singlecell', 
 
       columns: [{ 
 
        text: 'First Name', 
 
        datafield: 'firstname', 
 
        width: 150, 
 
        cellsalign: 'left' 
 
       }, 
 

 
       { 
 
        text: 'Second Name', 
 
        datafield: 'secondname', 
 
        width: 150, 
 
        cellsalign: 'left' 
 
       }] 
 
      }); 
 
      
 
      $("#btn").on('click', function() { 
 
      \t var columns = ['firstname', 'secondname']; 
 
      $.each(columns, function(colIndex, eachColumn) { 
 
\t \t \t   $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn, 
 
       \t \t \t 'cellclassname', function (row, columnfield, value) { 
 
        \t if (value == undefined || value.length == 0) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t return 'erroredcolumn'; 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
       \t \t \t }); 
 
\t \t \t   }); 
 
      }); 
 

 
     });

 .erroredcolumn { 
 
      border-color: red !important; 
 
      top:1px; 
 
      border-width:1px 1px 1px 1px !important; 
 
     } 
 
     .jqx-grid-cell{ 
 
      
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> 
 
    <div id="jqxgrid"></div> 
 
</div> 
 
<input type="button" id="btn" value="click to validate" />

Answer 2

Vous utilisez position donc lorsque vous appliquez border-color il cacher la top-border parce que vous ne pas affecté positiontop si border-top caché par gris border.

Il suffit d'ajouter suivante css

Fiddle link

.erroredcolumn { 
     border: 1px solid red !important; 
     top:1px; 
    }