CODEWITHSUNDEEP
javascriptjqueryjsonslickgridpopulate
Prem
Prem

Reputation: 652

Slickgrid does not render or populate the JSON data in table / Grid

below is the columns object i have using

 columns =[
      {id: "id", name: "ID", field: "id"},
      {id: "rt_assignee", name: "rt_assignee", field: "root_task_assignee"},
      {id: "root_task_id", name: "root_task_id", field: "root_task_id"},
      {id: "root_task_status", name: "root_task_status", field: "root_task_status"},
      {id: "root_task_tracker", name: "root_task_tracker", field: "root_task_tracker"},
      {id: "rt_category", name: "rt_category", field: "rt_category"},
      {id: "rt_priority", name: "rt_priority", field: "rt_priority"},
      {id: "rt_subject", name: "rt_subject", field: "rt_subject"},
      {id: "task_assignee", name: "task_assignee", field: "task_assignee"},
      {id: "task_category", name: "task_category", field: "task_category"},
      {id: "task_id", name: "task_id", field: "task_id"},
      {id: "task_priority", name: "task_priority", field: "task_priority"},
      {id: "task_status", name: "task_status", field: "task_status"},
      {id: "task_subject", name: "task_subject", field: "task_subject"},
      {id: "task_tracker", name: "task_tracker", field: "task_tracker"}
]

and this is function loadData() with the sample JSON data which I tried to populate in the grid

function loadData() {
    data = [{   
          "id", "issue_0", 
          "root_task_assignee": "reneym",
          "root_task_id": 123808,
          "root_task_status": "New",
          "root_task_tracker": "Task",
          "rt_category": "PPQA",
          "rt_priority": "Normal",
          "rt_subject": "95-00 Perform PPQA",
          "task_assignee": "reneym",
          "task_category": "PPQA",
          "task_id": 123808,
          "task_priority": "Normal",
          "task_status": "New",
          "task_subject": "95-00 Perform PPQA",
          "task_tracker": "Task"    
      }];
dataView.setItems(data);
}

but there is no output the grid is simply blank(but the header appears). And there is no error message.

Code

loadData(); 
dataView.setGrouping([]); 
dataView.endUpdate(); 
$("#gridContainer").resizable();

Upvotes: 2

Views: 571

Answers (1)

kayess
kayess

Reputation: 3394

I have quickly crafted you a JSFiddle with the setup you mentioned in your question.

The small and overlooked problem you had is that, when you are creating a JavaScript object you need to use : as separator when you descibe your key value pairs.

So use : instead of , you had in your id field declaration.

As an example you had:

data = [{   
    "id", "issue_0",
    ...
}];

Instead you need:

data = [{   
    "id": "issue_0",
    ...
}];

Upvotes: 2

Related Questions