How to identify the custom class of cell

[RanaParticipant]

In the below code, i am showing borders highlighted if there are any validation failure and that is working fine Is there any way to check if validation errors on Grid on clicking a button? Click the button at bottom and there i would like identify if there are any errors

http://jsfiddle.net/9KHrm/212/

[RanaParticipant]

I applied custom class for error borders.
If i can identify if class ‘erroredcolumn’ while iterating cells of grid, that would be great

[HristoParticipant]

Hello Rana,

You could create an array that will collect all cells that are wrong.
When you press the button to check for this you will turn to this array
Please, take a look at the example below:

var data = generatedata(500);
var source = {
  localdata: data,
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }, {
    name: 'productname',
    type: 'string'
  }, {
    name: 'date',
    type: 'date'
  }, {
    name: 'quantity',
    type: 'number'
  }, {
    name: 'price',
    type: 'number'
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
var listIdInvalidCellFirstname = [];
$("#jqxgrid").jqxGrid({
  width: 500,
  theme: 'energyblue',
  source: adapter,
  sortable: true,
  editable: true,
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    columngroup: 'Name',
    width: 90, 
    cellclassname: function(row, columnfield, value) {
      if (value == undefined || value.length < 4 ) {
        if(listIdInvalidCellFirstname.indexOf(row) == -1) {
        	listIdInvalidCellFirstname.push(row);
        }
        
        return 'erroredcolumn';
      }
    }
  }, {
    text: 'Last Name',
    columngroup: 'Name',
    datafield: 'lastname',
    width: 90
  }, {
    text: 'Product',
    datafield: 'productname',
    width: 170
  }, {
    text: 'Order Date',
    datafield: 'date',
    width: 160,
    cellsformat: 'dd-MMMM-yyyy'
  }, {
    text: 'Quantity',
    datafield: 'quantity',
    width: 80,
    cellsalign: 'right'
  }, {
    text: 'Unit Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2'
  }],
});

$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  height: 30
});

$('#jqxbutton').click(function () {
  console.log('Check wrong cells', listIdInvalidCellFirstname);
});

I would like to suggest you try to use options of the validation callback as in this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts