jQuery UI Widgets Forums Grid Custom field + External link

This topic contains 4 replies, has 2 voices, and was last updated by  togoenvogue 13 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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

    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

    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

    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

    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 !

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

You must be logged in to reply to this topic.