Custom field + External link - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Custum field, external link in the Grid

This topic contains 4 replies, has 2 voices, and was last updated by togoenvogue 11 years, 8 months ago.

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

Author

Custom field + External link Posts

March 23, 2012 at 5:00 pm Custom field + External link #2997

togoenvogue

Member

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

March 23, 2012 at 8:01 pm Custom field + External link #2998

Peter Stoev

Keymaster

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

March 24, 2012 at 9:14 am Custom field + External link #3009

togoenvogue

Member

Hello 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=Yoshi

and so on.

I have tried myself, but couldn’t get it work. I will be grateful if you coud help.

Thanks in advance

John

March 24, 2012 at 9:20 am Custom field + External link #3010

Peter Stoev

Keymaster

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

March 24, 2012 at 11:25 am Custom field + External link #3011

togoenvogue

Member

Wooooooooooooo ! 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 !

Author

Posts

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

You must be logged in to reply to this topic.