jQuery UI Widgets Forums Grid card view with dropdown and date picker

Tagged: ,

This topic contains 3 replies, has 3 voices, and was last updated by  Yavor Dashev 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ksheer
    Participant

    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 Dashev
    Participant

    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


    dileepkumarkarrolla
    Participant

    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 Dashev
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.