Suppression Ligne

Invoke the Deleterow method of the jqxGrid. Author: http://jqwidgets.com

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Delete Selected Row" />

JavaScript

buttonclick = function(event) {
console.log(event.target);
  var idEvent = event.target.id;

  var iIndex = $("#jqxgrid").jqxGrid('getselectedrowindex');
  var iID = $("#jqxgrid").jqxGrid('getcellvalue',iIndex,"id");
 alert("idEvent " + idEvent + " - iIndex " + iIndex + " - iID " + iID);
   $("#jqxgrid").jqxGrid('deleteRow', iID);
}

var aData = new Array();
for (var nIndex = 0; nIndex < 6; nIndex++) {
  var aRow = [];
  aRow["name"] = "Name " + nIndex;
  aRow["firstname"] = "Firstname " + nIndex;
  aRow["id"] = 100 + nIndex;
  aRow["idPourBouton"] = 100 + nIndex;
  aData.push(aRow);
}

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

var renderer = function(row, columnfield, value, defaulthtml, columnproperties) {
var sLigne = '<input type="button" onClick="buttonclick(event)" class="gridButton" id="' + value + '" value="Delete Row"/>';
console.log(row + " - " + columnfield + " - " + value + " - " + defaulthtml + " - " + columnproperties);
  return sLigne;
}

// initialize jqxGrid
$("#jqxgrid").jqxGrid({
  width: 650,
  source: source,
  theme: 'shinyblack',
  autoheight: true,
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    width: 100
  }, {
    text: 'Last Name',
    datafield: 'name',
    width: 100
  }, {
    text: 'ID',
    datafield: 'id',
    width: 100
  }, {
    text: 'Delete Row',
    datafield: 'idPourBouton',
    width: 100,
    cellsrenderer: renderer
  }]
});

$('#jqxbutton').click(function() {
  var iIndex = $("#jqxgrid").jqxGrid('getselectedrowindex');
  var iID = $("#jqxgrid").jqxGrid('getcellvalue',iIndex,"id");
 alert("iIndex " + iIndex + " - iID " + iID);
   $("#jqxgrid").jqxGrid('deleteRow', iID);
});