jQuery UI Widgets › Forums › Grid › Deleting contents of a cell
Tagged: Button, Cell, cellsrenderer, clear, delete, grid, jqxgrid, setcellvalue, value, X
This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.
-
Author
-
Hi,
Is there anyway of getting a tiny ‘X’ on the top right corner of each cell of the grid, to delete the contents of that cell?
Thanks!
Hello priyam.basu,
You can achieve this by using cellsrenderer. Here is an example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data 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 < 100; 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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { return '<div style="position: relative;"><span style="margin: 4px; margin-right: 10px; float: ' + columnproperties.cellsalign + ';">' + value + '</span><span style="position: absolute; top: 0; right: 0; cursor: pointer;" onclick="clearCell(\'' + row + '\',\'' + columnfield + '\')">x</span></div>'; } $("#jqxgrid").jqxGrid( { width: 670, source: source, pageable: true, autoheight: true, columns: [ { text: 'First Name', datafield: 'firstname', width: 100, cellsrenderer: cellsrenderer }, { text: 'Last Name', datafield: 'lastname', width: 100, cellsrenderer: cellsrenderer }, { text: 'Product', datafield: 'productname', width: 180, cellsrenderer: cellsrenderer }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellsrenderer: cellsrenderer }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsrenderer: cellsrenderer, cellsformat: 'c2' }, { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2', cellsrenderer: cellsrenderer } ] }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> <script type="text/javascript"> clearCell = function (row, columnfield) { $("#jqxgrid").jqxGrid('setcellvalue', parseInt(row), columnfield, ""); }; </script> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you!
Is it possible to use an image instead of a span to show the ‘X’?
Hi priyam.basu,
Yes, just replace the span with img, but keep the style.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.