jQuery UI Widgets › Forums › Getting Started › Cardview
Tagged: cardview
This topic contains 1 reply, has 2 voices, and was last updated by admin 3 years, 6 months ago.
-
AuthorCardview Posts
-
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>
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 StoevjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.