Access to data in a custom render

[borbirdMember]

Hi,

I am working on a problem with a JSON bound grid where I have a custom cellsrender function and I am trying to get to the data from other cells (or other JSON object attributes).  What is the best method for doing this?

Here is the current code for the grid creation method:

I assumed since the dataAdapter was declared locally I could simply access the records directly, but every now and then after a refresh I get a throw indicating the
“enteredByGU” is not defined (in the delRenderer function).  So what is the best way of accessing data in the grid/JSON object when in a cellsrender function?

Thx,

Rob

$.ajax({
            type: "POST",
            url: "TPage.aspx/LoadNotesData",
            contentType: "application/json; charset=utf-8",
            data: "{'SGU':" + JSON.stringify($("#SGU").val()) + ",'ssyGU':" + JSON.stringify(studentID) + ",'staffSchYrGU':" + JSON.stringify($("#enteredByGU").val()) + "}",
            dataType: 'json',
            async: false,
            cache: false,
            success: function (data)
            {
                var jsonArray = jQuery.parseJSON(data.d);
                console.log(jsonArray);
                var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'noteGU' },
                    { name: 'ssyGU' },
                    { name: 'txtDate' },
                    { name: 'txtTime' },
                    { name: 'txtNote' },
                    { name: 'enteredByName' },
                    { name: 'enteredByGU' },
                    { name: 'privateCB'}],
                localdata: jsonArray
            };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Grid function to control delete column rendering
                var delRenderer = function ()
                {
                    var uId = arguments[2];
                    var res = '';
                    if (dataAdapter.records[arguments[0]].enteredByGU == $("#enteredByGU").val())
                    {
                        res = '<input type="image" id="btn' + uId + '" SID="' + studentID + '" onClick="DeleteButtonClick(this)" title="Delete" class="gridButton" src="Images/TXP/delete.gif" name="image" width="20px" height="20px">'
                        + '<input type="image" id="btn' + uId + '" SID="' + studentID + '"onClick="EditButtonClick(this)" title="Edit" class="gridButton" src="Images/TXP/edit.gif" name="image" width="20px" height="20px">';
                    }
                    else
                    {
                        res = '<input type="image" id="btn' + uId + '" SID="' + studentID + '" onClick="ViewButtonClick(this)" title="View" class="gridButton" src="Images/TXP/view.gif" name="image" width="20px" height="20px">';
                    }
                    return res;
                };
                var w = Math.max(GetVisibleWidth() - 100, 650);
                $("#jqxCommentGrid").jqxGrid(
            {
                width: w,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                    { text: 'Actions', datafield: 'noteGU', cellsrenderer: delRenderer, cellsalign: 'center', width: 60, resizable: false },
                    { text: 'Date', datafield: 'txtDate', width: 85, resizable: false },
                    { text: 'Time', datafield: 'txtTime', width: 70, resizable: false },
                    { text: 'Comment', datafield: 'txtNote', width: w - 500 },
                    { text: 'Teacher', datafield: 'enteredByName', minwidth: 100 },
                    { text: 'Private', datafield: 'privateCB', columntype: 'checkbox', width: 50, resizable: false }
                ]
            });
            },
            error: function (x, e)
            {
                alert("ERROR: " + x.responseText);
            }

[Peter StoevKeymaster]

I tried to reproduce the reported behavior with the jqxDataAdapter, but without avail. The only issue that I noticed in your code is that you were not closing the INPUT tags which you return in the cellsrendering function. I also defined a ‘studentID ‘ as it was not present in the posted code.

Here’s my test code:

<!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/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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: "data.txt",
                dataType: 'json',
                async: false,
                cache: false,
                success: function (data) {
                    var jsonArray = data;
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'noteGU' },
                            { name: 'ssyGU' },
                            { name: 'txtDate' },
                            { name: 'txtTime' },
                            { name: 'txtNote' },
                            { name: 'enteredByName' },
                            { name: 'enteredByGU' },
                            { name: 'privateCB'}],
                        localdata: jsonArray
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    // Grid function to control delete column rendering
                    var delRenderer = function () {
                        var uId = arguments[2];
                        var res = '';
                        var studentID = uId;
                        if (dataAdapter.records[arguments[0]].enteredByGU == $("#enteredByGU").val()) {
                            res = '<input type="image" id="btn' + uId + '" SID="' + studentID + '" onClick="DeleteButtonClick(this)" title="Delete" class="gridButton" src="Images/TXP/delete.gif" name="image" width="20px" height="20px"/>'
                        + '<input type="image" id="btn' + uId + '" SID="' + studentID + '"onClick="EditButtonClick(this)" title="Edit" class="gridButton" src="Images/TXP/edit.gif" name="image" width="20px" height="20px"/>';
                        }
                        else {
                            res = '<input type="image" id="btn' + uId + '" SID="' + studentID + '" onClick="ViewButtonClick(this)" title="View" class="gridButton" src="Images/TXP/view.gif" name="image" width="20px" height="20px"/>';
                        }
                        return res;
                    };
                    var w = 650;
                    $("#jqxCommentGrid").jqxGrid(
                    {
                        width: w,
                        source: dataAdapter,
                        columnsresize: true,
                        columns: [
                            { text: 'Actions', datafield: 'noteGU', cellsrenderer: delRenderer, cellsalign: 'center', width: 60, resizable: false },
                            { text: 'Date', datafield: 'txtDate', width: 85, resizable: false },
                            { text: 'Time', datafield: 'txtTime', width: 70, resizable: false },
                            { text: 'Comment', datafield: 'txtNote', width: w - 500 },
                            { text: 'Teacher', datafield: 'enteredByName', minwidth: 100 },
                            { text: 'Private', datafield: 'privateCB', columntype: 'checkbox', width: 50, resizable: false }
                        ]
                    });
                },
                error: function (x, e) {
                    alert("ERROR: " + x.responseText);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxCommentGrid">
    </div>
</body>
</html>

and the data.txt containing a sample JSON data.

[{
 "noteGU": "1",
 "txtDate": "1/1/2012",
 "txtTime": "10:00",
 "txtNote": "Note 1",
 "enteredByName": "Name 1",
 "privateCB": "Privacy 1"
 },
 {
 "noteGU": "2",
 "txtDate": "1/2/2012",
 "txtTime": "10:00",
 "txtNote": "Note 2",
 "enteredByName": "Name 2",
 "privateCB": "Privacy 2"
 },
 {
 "noteGU": "3",
 "txtDate": "1/2/2012",
 "txtTime": "10:00",
 "txtNote": "Note 3",
 "enteredByName": "Name 3",
 "privateCB": "Privacy 3"
 },
 {
 "noteGU": "4",
 "txtDate": "1/1/2012",
 "txtTime": "10:00",
 "txtNote": "Note 4",
 "enteredByName": "Name 4",
 "privateCB": "Privacy 4"
 },
 {
 "noteGU": "5",
 "txtDate": "1/1/2012",
 "txtTime": "10:00",
 "txtNote": "Note 5",
 "enteredByName": "Name 5",
 "privateCB": "Privacy 5"
 },
 {
 "noteGU": "6",
 "txtDate": "1/1/2012",
 "txtTime": "10:00",
 "txtNote": "Note 6",
 "enteredByName": "Name 6",
 "privateCB": "Privacy 6"
 }
]

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts