CODEWITHSUNDEEP
jqueryajaxjsonjqwidget
Jankya
Jankya

Reputation: 958

jqwidgets fails to load data from JSON

I am trying to load jqwidgets grid from JSON Response. Grid Loads with empty data without any error. Below is Json response and jquery code. Please tell me is i miss something here?

JSON DATA : 

 {"holidayrule":["{\"hid\":\"263\",\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}","{\"hid\":\"264\",\"hdates\":\"05/08/2015, 05/09/2015, 05/10/2015, 05/11/2015, 05/12/2015, 05/13/2015, 05/14/2015, 05/15/2015, 05/16/2015, 05/17/2015, 05/18/2015, 05/19/2015\",\"hremark\":\"ggfgf\",\"created_date\":\"2015-02-10 11:08:52.489\",\"updated_date\":\"2015-02-10 11:08:52.489\",\"hname\":\"gfd\"}","{\"hid\":\"265\",\"hdates\":\"01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015, 01/27/2015, 01/28/2015, 01/29/2015, 01/30/2015, 01/31/2015, 02/01/2015, 02/02/2015, 02/03/2015\",\"hremark\":\"ghhghhghhg\",\"created_date\":\"2015-02-10 15:22:11.69\",\"updated_date\":\"2015-02-10 15:22:11.69\",\"hname\":\"fggg\"}","{\"hid\":\"266\",\"hdates\":\"02/25/2015, 02/26/2015, 02/27/2015, 02/28/2015, 03/01/2015, 03/02/2015, 03/03/2015, 03/04/2015, 03/05/2015, 03/06/2015, 03/07/2015, 03/08/2015\",\"hremark\":\"df\",\"created_date\":\"2015-02-10 15:22:26.133\",\"updated_date\":\"2015-02-10 15:22:26.133\",\"hname\":\"gfggf\"}","{\"hid\":\"267\",\"hdates\":\"01/07/2015, 01/08/2015, 01/09/2015, 01/10/2015, 01/11/2015, 01/12/2015, 01/13/2015, 01/14/2015, 01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015\",\"hremark\":\"hghhghgh\",\"created_date\":\"2015-02-10 15:41:22.527\",\"updated_date\":\"2015-02-10 15:41:22.527\",\"hname\":\"33232\"}","{\"hid\":\"268\",\"hdates\":\"01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015, 01/19/2015, 01/20/2015, 01/21/2015, 01/22/2015, 01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015\",\"hremark\":\"dfdfdfdfd\",\"created_date\":\"2015-02-10 16:23:37.855\",\"updated_date\":\"2015-02-10 16:23:37.855\",\"hname\":\"sdffddf\"}"]}

JQUERY :

var parsedData = JSON.stringify(data.holidayrule);
var source =
        {
            localdata: parsedData,
            datatype: "json"
        }
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize divHolidayruleData
$("#divHolidayruleData").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    columns: [
      { text: 'HID', datafield: 'hid', align: 'center', cellsalign: 'center', width: 70 },
      { text: 'Rule Name', datafield: 'hname', cellsalign: 'center', align: 'center', width: 200 },
      { text: 'Holiday Dates', datafield: 'hdates', align: 'center', cellsalign: 'center', width: 200 },
      { text: 'Remark', datafield: 'hremark', align: 'center', cellsalign: 'center', width: 150 },
      { text: 'Created Date', datafield: 'created_date', align: 'center', cellsalign: 'center', width: 100 },
      { text: 'Updated Date', datafield: 'updated_date', align: 'center', cellsalign: 'center', width: 130 }
    ]
});

Am i missing something here?

EDIT : 

 ["{\"hid\":263,\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}","{\"hid\":264,\"hdates\":\"05/08/2015, 05/09/2015, 05/10/2015, 05/11/2015, 05/12/2015, 05/13/2015, 05/14/2015, 05/15/2015, 05/16/2015, 05/17/2015, 05/18/2015, 05/19/2015\",\"hremark\":\"ggfgf\",\"created_date\":\"2015-02-10 11:08:52.489\",\"updated_date\":\"2015-02-10 11:08:52.489\",\"hname\":\"gfd\"}","{\"hid\":265,\"hdates\":\"01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015, 01/27/2015, 01/28/2015, 01/29/2015, 01/30/2015, 01/31/2015, 02/01/2015, 02/02/2015, 02/03/2015\",\"hremark\":\"ghhghhghhg\",\"created_date\":\"2015-02-10 15:22:11.69\",\"updated_date\":\"2015-02-10 15:22:11.69\",\"hname\":\"fggg\"}","{\"hid\":266,\"hdates\":\"02/25/2015, 02/26/2015, 02/27/2015, 02/28/2015, 03/01/2015, 03/02/2015, 03/03/2015, 03/04/2015, 03/05/2015, 03/06/2015, 03/07/2015, 03/08/2015\",\"hremark\":\"df\",\"created_date\":\"2015-02-10 15:22:26.133\",\"updated_date\":\"2015-02-10 15:22:26.133\",\"hname\":\"gfggf\"}","{\"hid\":267,\"hdates\":\"01/07/2015, 01/08/2015, 01/09/2015, 01/10/2015, 01/11/2015, 01/12/2015, 01/13/2015, 01/14/2015, 01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015\",\"hremark\":\"hghhghgh\",\"created_date\":\"2015-02-10 15:41:22.527\",\"updated_date\":\"2015-02-10 15:41:22.527\",\"hname\":\"33232\"}","{\"hid\":268,\"hdates\":\"01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015, 01/19/2015, 01/20/2015, 01/21/2015, 01/22/2015, 01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015\",\"hremark\":\"dfdfdfdfd\",\"created_date\":\"2015-02-10 16:23:37.855\",\"updated_date\":\"2015-02-10 16:23:37.855\",\"hname\":\"sdffddf\"}"]

Same problem with above JSON

EDIT 2:

jsFiddleDemo

Upvotes: 0

Views: 599

Answers (1)

scripto
scripto

Reputation: 2297

You have missed one of the most basic concepts in the Data Binding through Data Apdater - datafields array is undefined in your code. Each datafield should have "name" and "type". Your data is also within "holidayrule" which means that you'll have to set the source object's "root" property, too.

Updated:

  var data = "[" +

"{\"hid\":263,\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}" + "]"; var source = { localdata: data, datafields: [{ name: 'hname', type: 'string' }], datatype: "json" };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgridTest").jqxGrid({
        width: 670,
        source: dataAdapter,
        altrows: true,
        selectionmode: 'multiplecellsextended',
        columns: [{
            text: 'HID',
            datafield: 'hid',
            width: 70
        }, {
            text: 'Rule Name',
            datafield: 'hname',
            width: 70
        }, {
            text: 'Holiday Dates',
            datafield: 'hdates',
            width: 70
        }, {
            text: 'Remark',
            datafield: 'hremark',
            width: 70
        }, {
            text: 'Created Date',
            datafield: 'created_date',
            width: 70
        }, {
            text: 'Updated Date',
            datafield: 'updated_date',
            width: 70
        }]
    });
});

Upvotes: 1

Related Questions