Filling a DataGrid with JSON data

[zamubal]

I am trying to set up a datagrid which will display data from the server but the datagrid is not displaying the data from the server.  The data is a JSON string.   See below for the string and for the datagrid setup.  Using FireBug I can see that the data is request from the server and the JSON string is returned but the datagrid does not display anything.  I get a JavaScript error saying "data is null" or "_438 is null".

I validated the JSON string online and it was shown as been valid according to http://jsonlint.com/.  I am using the latest version of JEasyUI.

JSON Data String

Code:

[{"id":1,"userId":1,"fieldName":"FIELD_1","fieldValue":"20006683","operator":"=","openPar":"(","closePar":")","andOr":"AND"},{"id":2,"userId":1,"fieldName":"FIRST_NAME","fieldValue":"JOHN","operator":"=","openPar":"(","closePar":")","andOr":"AND"}]

DataGrid setup

Code:

<table id="filterTable" title="Filter Options" class="easyui-datagrid" 
                style="width:550px;height:250px"
                url="get_filters.html"
                toolbar="#filterToolbar"
                singleSelect="true">
            <thead>
                <tr>
                    <th field="id" hidden="true">ID</th>
                    <th field="userId" hidden="true">UserID</th>
                    <th field="openPar" width="50">'('</th>
                    <th field="fieldName" width="100">Data Field</th>
                    <th field="operator" width="100">Operator</th>
                    <th field="fieldValue" width="150">Value</th>
                    <th field="closePar" width="50">')'</th>
                    <th field="andOr" width="70">AND/OR</th>
                </tr>
            </thead>
        </table>
        <div id="filterToolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newFilter()">New Filter</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editFilter()">Edit Filter</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeFilter()">Remove Filter</a>
        </div>

[fcodebue]

do you have javascript istructions like these?

Code:

  $(document).ready(function() {
    $('#filterTablei').datagrid();
  });

[zamubal]

Thank you for the response.  I did find out the problem.

I was automatically initializing the datagrid by using class="easyui-datagrid" in the table tag.  I also had the JavaScript call $('#filterTable').datagrid(); in one of my JavaScript files.  Because the JavaScript call did not have any attributes defined, no data was been added to the datagrid.

[fcodebue]

Thank you for the response.  I did find out the problem.

I was automatically initializing the datagrid by using class="easyui-datagrid" in the table tag.  I also had the JavaScript call $('#filterTable').datagrid(); in one of my JavaScript files.  Because the JavaScript call did not have any attributes defined, no data was been added to the datagrid.

Usually I use to specify all properties into javascript code and so there are no problems.
Try it...