card view with dropdown and date picker

[ksheerParticipant]

Dear Jqwidgets,

we are trying for cardview with grid edit exampke.

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cellediting.htm

I want the cardview update to have datepicker and drowpdown in the edit option.

Please give me the example. It will be of great help.

Regards
ksheer

[Yavor DashevParticipant]

Hi ksheer,

Thank you for contacting us!

I have created a code snippet that shows you how to achieve this kind of functionality (when you open the window for editing the card to have dropDownList instead)
I have used this demo for base:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/cardview.htm

And the code snippet:

                grid.addEventListener('click', (event) =>{

                    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)
                           
                        }, 10);
                     
                    }
                })

With this code we replace the input for the product name with a dropdownlist but this can be applied to different inputs and to be replaced with different components such as DateTimePicker for example.

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[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);

}
})

} );

[Yavor DashevParticipant]

Hi dileepkumarkarrolla,

Because of some change in the latest release made to the jqxGrid, unfortunately the click event is not bindable to the jqx-icon-edit element.
Instead you can use pointerdown event like so:

           grid.addEventListener('pointerdown', function (event) {

               console.log(event.target.outerHTML)

                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)

                }, 800);

                }
            })

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts