How Do I Get Grid Values For Processing?

[viperbyteMember]

Hi everybody.

Can someone please tell/show me how to get the values of a selected row in a grid so that I can do something with them? I plan to open a new aspx page which will have a details form that will have the values from the selected row for an update. This is what I have so far but I don’t know how to get the values in a form that I can use and I’m not sure if i’m going about this correcty or not. Can somone please give me a hand with this?

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var selectedRowIndex = event.args.rowindex;
});

$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘ORG_ID’);
$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘Organization_Name’);
$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘address_street’);
$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘address_number’);
$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘address_city’);
$(‘#grid’).jqxGrid(‘selectcell’, selectedRowIndex, ‘address_state’);

[Peter StoevKeymaster]

Hi viperbyte,

To get the values of a row, use the Grid’s getrowdata method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[viperbyteMember]

Thanks Peter.

I have it like this now but nothing happens when I click on a row now. Earlier with this code the alert function would work but now I don’t know why it will not work. Any ideas?

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var row = event.args.rowindex;
var datarow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
alert(‘booboo’);
});

[Peter StoevKeymaster]

Hi viperbyte,

‘getrowdata’ depending on a row index is implemented in this sample: popupediting.htm. Take a look at the code in the buttonclick event handler. The row’s data is used to populate the popup window with data from the clicked row. The row’s index is passed as argument to the getrowdata method.

 buttonclick: function (row) {
                     // open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                     // get the clicked row's data and initialize the input fields.
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                     $("#firstName").val(dataRecord.firstname);
                     $("#lastName").val(dataRecord.lastname);
                     $("#product").val(dataRecord.productname);
                     $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                     $("#price").jqxNumberInput({ decimal: dataRecord.price });
                     // show the popup window.
                     $("#popupWindow").jqxWindow('show');
                 }

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[viperbyteMember]

Thanks Peter.

I’m closer now than before because of your help. I took the sample you provided and had it somewhat working the way I need. I won’t be using a jqWindow, I’ll be using an aspx page but what was mentioned in the code showed me how to get to the values in a row of a grid. My problem now though is how do I get the row? The code fragment you supplied already had the row value selected and passed in to the code block in the variable “row”. I’ve tried to get the selected row with the below code and it doesnt’ work. When I click on my Edit button a call to a function named test3 is supposed to display one of the grids values but it doesn’t. When I click the Edit button the only thing that happens is that the grid is reloaded. When I hard code a 3 in the call to innerFunction and uncomment the call to innerFunction then information does display. For what it’s worth. But hard coding it is no good of course. How do I get the row index? Please.

function test3() {

$(“#jqxgrid”).bind(‘rowselect’, function (event) {
var selectedRowIndex = event.args.rowindex;

innerFunction(selectedRowIndex);

});
//innerFunction(3);
}

function innerFunction(myIndex) {

editrow = myIndex;

var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

alert(dataRecord.Organization_Name);

}

[Peter StoevKeymaster]

Hi viperbyte,

Here’s a working sample with the ‘getrowdata’ method:

<!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.2.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" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                columns: [
                  { text: 'Id', datafield: 'id', width: 50 },
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            // display selected row index.
            $("#jqxgrid").bind('rowselect', function (event) {
                var row = $("#jqxgrid").jqxGrid('getrowdata', event.args.rowindex);
                alert(row.firstname + " " + row.lastname);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
        </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[viperbyteMember]

Hello Peter,

By any chance can you provide the generatedata javascript function mentioned in the above code?

-Juan

[Peter StoevKeymaster]

Hi Juan,

You can find it in the jqxGrid’s demos in the download package.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[viperbyteMember]

Thank you so much Peter.
I can breath easier now. I didn’t know I had all that code available to me in the demos folder, good to know. Hopefully I’ll be able to put this little project together finally relativley soon.

Thanks.

[Author]

Posts