jQuery UI Widgets › Forums › Grid › Custom field + External link
Tagged: Custum field, external link in the Grid
This topic contains 4 replies, has 2 voices, and was last updated by togoenvogue 13 years, 1 month ago.
-
Author
-
Hello guys,
This jQWidgets is really one of the best I have seen so far on the net.
I was able to get it work in 5 min, but I have the following problem.
I am rendering data from DB (PHP), which is working fine as you can see from : http://www.togoenvouge.com/jqwidgets_grid.jpg
But as you can see from the screenshots, I want to add a CUSTOM FIELD (Delete Culumn) where I could just write CLICK HERE which will be liked to a different page for the selected record deletion : http://www.togoenvogue.com/jqwidgets_grid_delete.jpg
I will appreciate any help from you.
PS : I have tried to look at this : sigmawidgets.com/products/sigma_grid2/demos/example_cell_link.html but I couldn’t get it work with my jQwidgets
Thank you for your good job one again.
John
Hi John
You can add a Custom Field by using a custom renderer function which returns an anchor tag.
For 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.7.1.min.js"></script> <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/jqxcheckbox.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.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = {}; 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" ]; var generaterow = function (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; return row; } for (var i = 0; i < 10; i++) { var row = generaterow(i); data[i] = row; } var source = { localdata: data, datatype: "local" }; // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 600, height: 350, source: source, theme: '', columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Delete', datafield: 'Delete', cellsrenderer: function (row) { return "<a href='#click" + row + "'>Click Here</a>"; } } ] }); }); </script></head><body class='default'> <div id="jqxgrid"> </div></body></html>
In the above code, I set the cellsrenderer property of the column to a callback function which returns a html string with anchor tag. The cellsrenderer function is called by the Grid when a cell needs to be rendered.
Hope this helps.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello Peter,
I am glad you replied to my post.
I helped me. I tested and worked. But I need to go a little deeper.
From the example you gave, when I check, the hypelink points to the datagrid cell’s ID.
What I rather want is to retrieve, by clicking DELETE link, a URL variable which equals a specific column value. Say something linke this :
delete.php?firstname=Andrew
delete.php?firstname=Nancy
delete.php?firstname=Yoshiand so on.
I have tried myself, but couldn’t get it work. I will be grateful if you coud help.
Thanks in advance
John
Hi John,
You can achieve this by using a code like this:
// initialize jqxGrid$("#jqxgrid").jqxGrid({ width: 600, height: 350, source: source, theme: '', columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Delete', datafield: 'Delete', cellsrenderer: function (row) { var rowdata = $("#jqxgrid").jqxGrid('getrowdata', row); var name = rowdata.firstname; var url = 'delete.php?firstname=' + name return "<a target='_blank' href='" + url + "'>Click Here</a>"; } } ]});
Hope this helps you.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comWooooooooooooo ! Worked as wanted.
I am going to buy a licence and pay you a big bottle of beer (or coffee) when I complete my project in the next few days. And I will be glad to show you the project live.
Thank you again !
-
AuthorPosts
You must be logged in to reply to this topic.