Not Binding Gris from Data Which Comes from JSON Reposnse

[ramdasbhosaleParticipant]

Hi,

I am trying to bind JSON Reposnse Data to Grid but shows Empty grid.

Have a look jsFiddle Link once.

http://jsfiddle.net/usuznxku/16/

Is am doing wrong Something.

Sample Code is :

 var source =
            {
                //localdata: parsedData,
                datatype: "jsonp",
                root: 'HolidayRule',
                //id: 'holidayid',
                datafields: [
                               { name: "holidayid", type: 'int' },
                               { name: 'holidayname', type: 'string' },
                               { name: 'holidaydates', type: 'string' },
                               { name: 'holidayremark', type: 'string' },
                               { name: 'holidaycreated_date', type: 'string' },
                               { name: 'holidayupdated_date', type: 'string' }
                ],
                url: "http://localhost:8015/PostGresTestDB/rest/db/get"
               
            };
        var mi_DA = new $.jqx.dataAdapter(source);
        $("#lblstatus").text(mi_DA);
        //var dataAdapter = new $.jqx.dataAdapter(source);
        // initialize divHolidayruleData
        $("#divHolidayruleData").jqxGrid(
        {
            width: 850,
            source: mi_DA,
            pageable: true,
            autoheight: true,
            sortable: true,
            altrows: true,
            columns: [
              { text: 'HID', datafield: "holidayid", type: 'String', width: 70 },
              { text: 'Rule Name', datafield: 'holidayname', type: 'String', width: 200 },
              { text: 'Holiday Dates', datafield: 'holidaydates', type: 'String', width: 200 },
              { text: 'Remark', datafield: 'holidayremark', type: 'String', width: 150 },
              { text: 'Created Date', datafield: 'holidaycreated_date', type: 'String', width: 100 },
              { text: 'Updated Date', datafield: 'holidayupdated_date', type: 'String', width: 130 }
            ]
        });

Reponse from Server Side is :

[“{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 09:59:57.44\”,\”holidaycreated_date\”:\”2015-02-10 09:59:57.44\”,\”holidayremark\”:\”MyRuleRemark\”,\”holidayid\”:263,\”holidayname\”:\”MyRuleName\”}”,”{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 11:08:52.489\”,\”holidaycreated_date\”:\”2015-02-10 11:08:52.489\”,\”holidayremark\”:\”ggfgf\”,\”holidayid\”:264,\”holidayname\”:\”gfd\”}”,”{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 15:22:11.69\”,\”holidaycreated_date\”:\”2015-02-10 15:22:11.69\”,\”holidayremark\”:\”ghhghhghhg\”,\”holidayid\”:265,\”holidayname\”:\”fggg\”}”,”{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 15:22:26.133\”,\”holidaycreated_date\”:\”2015-02-10 15:22:26.133\”,\”holidayremark\”:\”df\”,\”holidayid\”:266,\”holidayname\”:\”gfggf\”}”,”{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 15:41:22.527\”,\”holidaycreated_date\”:\”2015-02-10 15:41:22.527\”,\”holidayremark\”:\”hghhghgh\”,\”holidayid\”:267,\”holidayname\”:\”33232\”}”,”{\”holidaydates\”:\”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\”,\”holidayupdated_date\”:\”2015-02-10 16:23:37.855\”,\”holidaycreated_date\”:\”2015-02-10 16:23:37.855\”,\”holidayremark\”:\”dfdfdfdfd\”,\”holidayid\”:268,\”holidayname\”:\”sdffddf\”}”,”{\”holidaydates\”:\”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, 01/19/2015, 01/20/2015\”,\”holidayupdated_date\”:\”2015-02-12 13:38:19.636\”,\”holidaycreated_date\”:\”2015-02-12 13:38:19.636\”,\”holidayremark\”:\”fsffsfsdfsd\”,\”holidayid\”:269,\”holidayname\”:\”sdffs\”}”]

[Peter StoevKeymaster]

Hi ramdasbhosale,

Solution below:

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
        }]
    });
});

In addition, you should probably use “json”, not “jsonp”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts