jQWidgets Forums

Tagged: Button, grid, Input, jqxgrid, onclick

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years ago.

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

Author

JQuery Button in Grid Posts

February 16, 2015 at 6:28 pm JQuery Button in Grid #67199

Participant

The following function works if I just put a button somewhere on the page but does not work when the button is in a grid with a renderer function. Thanks.
`

$(function(){

$(“.grantId”).click(function() {
var id = $(this).attr(“id”);
window.alert(“help2=”+ id);
} );
});

// this part doe not work
var NoteRenderer = function(row, column, value)
{
editrow = row;
var dataRecord = $(“#ffrGrid”).jqxGrid(‘getrowdata’, editrow);
var idx = dataRecord.reportdueindex;
var ffrTitle = dataRecord.grantid;

var html = “<input type=’button’ class=’grantId’ id=’55’ value=’Note’>”;
return html;
}

February 17, 2015 at 8:39 am JQuery Button in Grid #67220

Nadezhda

Participant

Hello smithgr@jhmi.edu,

Here is an example which shows how to use input type button in ‘cellsrenderer’ function in jqxGrid. Please, note that in the following example is used JavaScript ‘onclick’ event and script in grid.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.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/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/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.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/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                }
            };
            var NoteRenderer = function (row, datafield, value) {
                editrow = row;
                var dataRecord = $("#ffrGrid").jqxGrid('getrowdata', editrow);
                var idx = dataRecord.reportdueindex;
                var ffrTitle = dataRecord.grantid;
                var html = "<input type='button' class='grantId' id='55' value='Note' onclick='customFunction()'/>";
                return html;
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#ffrGrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200 },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Note', datafield: 'Note', cellsrenderer: NoteRenderer }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="ffrGrid">
        <script type="text/javascript">
            var customFunction = function () {
                var id = $(".grantId").attr("id");
                window.alert("help2=" + id);
            };
        </script>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.