Why will jquery-easyui grid not display column data?

Question

I have been attempting to use the jquery-easyui datagrid from http://www.jeasyui.com/documentation/index.php. The docs state that the grid will accept json data and I have attempted to implement this however the columns never render in the grid.

The grid shows the proper number of rows with a row id for each row however all other data is omitted. Somehow, the grid is reading the json data and knows the proper number of rows, but will not render the column data.

My json looks like this ...

{"total":2,
 "rows":[
     {"id":"1",
      "name":"Employee One",
      "number":"1",
      "description":"This is the first Employee"
     },
     {"id":"2",
      "name":"Employee Two",
      "number":"2",
      "description":"This is the Second Employee"
     }
     ]
}

My html looks like this ...

 <table id="dg" title="Surveys" class="easyui-datagrid" style="width:550px;height:250px"  
    url="listJson2"  
    toolbar="#toolbar"  
    rownumbers="true" fitColumns="true" singleSelect="true">  
  <thead>  
    <tr>  
        <th field="id" width="20">Id</th>  
        <th field="name" width="50">Name</th>  
        <th field="number" width="50">Number</th>  
        <th field="description" width="50">Description</th>  
    </tr>  
  </thead>  
 </table>

I believe all references to the js and css files are correct. The grid is rendering in the browser fine. All the buttons are there and I even have the correct number of rows....just no data in the cells.

Answer 1

I was having same problem, and i found that if table's width is set to 100% by default through css, then it won't work,

i know its bit old question, but may helpfull for others.

Answer 2

Try loadData,

var list=[
            {"id":"1",
                "name":"Employee One",
                "number":"1",
                "description":"This is the first Employee"
               },
               {"id":"2",
                "name":"Employee Two",
                "number":"2",
                "description":"This is the Second Employee"
               }
               ];

$('#dg').datagrid('loadData', list);