[dileepkumarkarrollaParticipant]

Hi Yavor,

I have tried the above example, But I am unable to get solutions.

All I need to edit the event listener on the Edit button and replace the existing component as you said. Unable to write event listener for edit icon.

Can You please let me where am I am wrong?

Please find my code below:

$( document ).ready( function () {
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 < 1000; 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;
row[ “testing” ] = ‘dileep’;
data[ i ] = row;
}
var source = {
localdata: data,
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter( source, {
loadComplete: function ( data ) { },
loadError: function ( xhr, status, error ) { }
} );
$( “#jqxgrid” ).jqxGrid( {
altrows: true,
width: 800,
source: dataAdapter,
editable: true,
sortable: true,
selectionmode: ‘multiplecellsadvanced’,
cardview: true,
cardviewcolumns: [
{
width: ‘auto’,
datafield: ‘firstname’
},
{
width: ‘auto’,
datafield: ‘lastname’
},
{
width: 300,
datafield: ‘productname’
}
],
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: 120,
cellsalign: ‘right’
}, {
text: ‘Unit Price’,
datafield: ‘price’,
width: 90,
cellsalign: ‘right’,
cellsformat: ‘c2’
}, {
text: ‘Total’,
datafield: ‘total’,
cellsalign: ‘right’,
cellsformat: ‘c2’
} , {
text: ‘Testing’,
datafield: ‘testing’,
cellsalign: ‘center’,
columntype: ‘dropdownlist’,
createeditor: function (row, column, editor) {
// assign a new data source to the dropdownlist.
var list = [‘Germany’, ‘Brazil’, ‘France’];
editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
}
} ]
} );

$(“#jqxbutton”).jqxButton();
$(“#jqxbutton”).on(‘click’, function() {
var cardView = $(“#jqxgrid”).jqxGrid(‘cardview’);

grid = $(“#jqxgrid”).jqxGrid({cardview: !cardView});

grid.addEventListener(‘click’, (event) =>{

alert(event.target.classList);

if(event.target.classList.contains(‘jqx-icon-edit’)){

setTimeout(() => {
let inputElement = document.querySelectorAll(“input[datafield=’productname’]”)
var source = [
“Affogato”,
“Americano”,
“Bicerin”
]

let dropdownlistDiv = document.createElement(‘div’)
dropdownlistDiv.id = ‘jqxWidget’
inputElement[0].appendChild(dropdownlistDiv)

let dropdownlist = $(“#jqxWidget”).jqxDropDownList({ source: source, placeHolder: inputElement[0].value, width: 180, height: 30});
inputElement[0].replaceWith(dropdownlistDiv)

}, 5000);

}
})

});

grid = document.getElementById(“contenttablejqxgrid”);

editIcons = document.getElementsByClassName(“jqx-icon-edit”);

alert(“working” + $(“.jqx-icon-edit”).length);

$(“.jqx-icon-edit”).on(“click”,function(){
alert(‘working’);
});

editIcons.addEventListener(‘click’, (event) =>{

alert(event.target.classList);

if(event.target.classList.contains(‘jqx-icon-edit’)){

setTimeout(() => {
let inputElement = document.querySelectorAll(“input[datafield=’productname’]”)
var source = [
“Affogato”,
“Americano”,
“Bicerin”
]

let dropdownlistDiv = document.createElement(‘div’)
dropdownlistDiv.id = ‘jqxWidget’
inputElement[0].appendChild(dropdownlistDiv)

let dropdownlist = $(“#jqxWidget”).jqxDropDownList({ source: source, placeHolder: inputElement[0].value, width: 180, height: 30});
inputElement[0].replaceWith(dropdownlistDiv)

}, 5000);

}
})

} );

[Author]

Posts