Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  admin 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Cardview Posts
  • Cardview #120989

    Vaishnavi P
    Participant

    Hi,

    I’m trying for cardview with grid edit. I want the cardview update to have checkbox, datepicker and dropdown in the edit option. In the grid I”m able to get dropdown, checkbox and datepicker, But when I switch to cardview and edit in the cardview, I get only text boxes not the dropdown, checkbox and datepicker options.

    Can You please let me know where am I am wrong?

    Please find my code below:

    <!DOCTYPE html>
    <html lang=”en”>

    <head>
    <title id=’Description’>In this example is demonstrated how to use the Grid’s CardView mode.</title>
    <link rel=”stylesheet” href=”../../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $( 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;
    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’
    } ]
    } );

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

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

    } );
    </script>
    </head>

    <body class=’default’>
    <div id=”jqxgrid”></div>
    <br/>
    <button id=”jqxbutton”>Switch CardView</button>

    </body>

    </html>

    Cardview #120993

    admin
    Keymaster

    Hi,

    The idea of the cardview is to be simplified layout for usage where a more compact data layout is required. As it is more simplified, we only have input editors in it at least in the current version. We will consider your feedback for further development about the cardview and thank you for sharing it. We also have a specific CardView component available on our other website: https://www.htmlelements.com/. You may also take a look of it if you wish.

    Best regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com/

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

You must be logged in to reply to this topic.