jQWidgets Forums

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

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

Author

Problem with showfilterrow Posts

May 27, 2016 at 5:18 pm Problem with showfilterrow #84709

Participant

Hi All,

I have not yet been able to reproduce this problem in a modified sample, so I’m looking for ideas about what might be happening.

If I set the property ‘showfilterrow’ to true, I am getting the following error when the data is loaded:

0x800a138f – JavaScript runtime error: Unable to get property ‘datafields’ of undefined or null reference

If ‘showfilterrow’ is false, there is no error, and the data displays correctly. I need the filter row.

The ‘source’ grid property is not set initially. A ‘ready’ function is set that loads the data, and sets the source on the grid. I know this is all working because it works fine with ‘showfilterrow’ false.

When I get the error, the line of code is: this.source._source.datafields = …

The ‘this.source’ is properly set, and ‘this.source.datafields’ is set and contains the data I expect. However, ‘this.source._source’ is undefined, so ‘this.source._source.datafields’ is obviously a bad reference.

Any ideas what might be happening?

May 27, 2016 at 6:37 pm Problem with showfilterrow #84712

Peter Stoev

Keymaster

Hi StanLogan,

Most probably you don’t create the Grid as shown in the demos or don’t use the dataAdapter for data binding. We use dataAdapter for data source in jqxGrid since 2012.

Best Regards,
Peter Stoev

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

May 31, 2016 at 2:53 pm Problem with showfilterrow #84770

StanLogan

Participant

Hi Peter,

Thanks for the response. I am trying to use the grid exactly as in the demos. I now have a reproducible case, which I include below. I had to chop up our code quite a bit, so there may be some loose ends, but hopefully at least you will see the issue.

<!DOCTYPE html>
<html class="fill-window">
    <head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
        
    <title>E2 Mobile Shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/Content/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />

    <script src="/Content/assets/js/jquery-2.1.4.js" charset="UTF-8"></script>

    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcore.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdata.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxbuttons.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxscrollbar.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxlistbox.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdropdownlist.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxmenu.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.pager.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.filter.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.sort.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.selection.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxgrid.columnsresize.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxlistbox.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxpanel.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcalendar.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxdatetimeinput.js" charset="UTF-8"></script>
    <script type="text/javascript" src="/Content/Scripts/jqwidgets/jqxcheckbox.js" charset="UTF-8"></script>

    <style type="text/css">
        .jqx-grid-cell {
            margin-top: -2px;
            font-size: 18px;
        }

        .jqx-grid-column-header {
            font-size: 18px;
            font-weight: bold;
        }
    </style>

<script type="text/javascript">

    var ST = {};
    ST.ClientData = {};
    ST.Application = {};

var SearchGrid_properties = {
        width: "100%",
        height: 590,
        pageable: true,
        sortable: true,
        filterable: true,
        showfilterrow: true,
        selectionmode: "multiplerows",
        altrows: true,
        rowsheight: 50,
        filterrowheight: 50,
        columnsresize: true,
        columnsheight: 50,
        columns: ""
    };

var SearchGrid_columns = [
                                  { text: 'Name', datafield: 'name', width: 250 },
                                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                                  { text: 'Calories', datafield: 'calories', width: 180 },
                                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
];
var SearchGrid_datafields = [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
];
var SearchGrid_datasource = {localdata:"",datatype:"array",datafields:""};
var SearchGrid_data = [];
SearchGrid_properties.source = SearchGrid_datasource;
SearchGrid_properties.columns = SearchGrid_columns;

SearchGrid_properties.ready = getData('SearchGrid');

SearchGrid_datasource.localdata = SearchGrid_data;
SearchGrid_datasource.datafields = SearchGrid_datafields;

$(document).ready(function () {
    var SearchGrid_adapter = new $.jqx.dataAdapter(SearchGrid_datasource);
    $('#SearchGrid_div').jqxGrid(SearchGrid_properties);
    $('#SearchGrid_div').jqxGrid('showloadelement');
})

function getData(gridname) {

    var data = {};

    var context = {};

    callPageMethod("GetGridData",
                    data,
                    context,
                    function (data) {

                        window[gridname + "_datasource"].localdata = data;

                        $("#" + gridname + "_div").jqxGrid({ source: window[gridname + "_datasource"] });
                    }
                );
}

    function callPageMethod (methodName, data, context, onSuccess, onFailure, synchronous) {
        var retVal;

        if (typeof synchronous == "undefined")
            synchronous = false;

        $.ajax({
            type: "GET",
            cache: false,
            async: !synchronous,
            url: "/sampledata/beverages.txt",
            contentType: "application/json; charset=utf-8",
            dataType: "msjson",
            converters: {
                "text msjson": function (jsonString) {
                    return (new Function("return " + jsonString.replace(/\"\\\/Date\((-?\d+)\)\\\/\"/g, "new Date($1)")))();
                }
            },
            success: function (data, textStatus, jqXHR) {
                retVal = data;

                if (typeof onSuccess == "function")
                    onSuccess(retVal, context, data);

            },
            error: function (jqXHR, textStatus, errorThrown) {
                var msg = "";
                try {
                    var response = JSON.parse(jqXHR.responseText);
                    msg = errorThrown + "\rMessage: " + response.Message + "\r" + response.StackTrace;
                }
                catch (e) {
                }
                if (typeof onFailure == "function")
                    onFailure(msg, context);
                else
                    alert(msg);

                retVal = false;

            }
        });

        return retVal;
    }

</script>
        

    </head>
    <body class="">
        

<div class="main-container" id="main-container" style="height: inherit;">
    <!-- page content -->
    
    <div data-role="page">

        <div id="GeneralRow" class="row " style="">
            <div class="col-xs-1 form-horizontal">
            </div>
            <div class="col-xs-10 form-horizontal vertical-fill">
                <div class="row vertical-fill" >
                    <div id="SearchGrid_div"></div>
                </div>
            </div>
            <div class="col-md-1 form-horizontal">
            </div>
        </div>

    </div><!-- /content -->

</div>

    </body>
</html>

May 31, 2016 at 6:06 pm Problem with showfilterrow #84772

StanLogan

Participant

Oops! Never mind – I figured it out. You were correct, I was not setting the dataadapter correctly.

A lot of this code is being created on the server in our app, which helped confuse the issue. Even after paring down the code, I missed that I was using the original source instead of the adapter.

Thanks for listening

Author

Posts

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

You must be logged in to reply to this topic.