Please let me know on how to bind the data from wcf service

540

sucheendarnath posted over 12 years ago

I need to bind the datasource for JQuery grid from WCF service. The WCF service returns list. The WCF service is as follows.

I am receiving the below error:

Microsoft JScript runtime error: The remote request to fetch data has failed: (parsererror) There was an error parsing the JSON data and applying the defined data schema: 'length' is null or not an object

Please let me know on how to bind the data from wcf service.

Below is the code for WCF service

namespace InfraApplication

{

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "SampleService" in code, svc and config file together.

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class SampleService : ISampleService

{

public void DoWork()

{

}

public List<CustomerViewModel> GetSortedCustomers()

{

List<CustomerViewModel> cvml = new List<CustomerViewModel>();

CustomerViewModel cvm = new CustomerViewModel();

cvm.CompanyName = "ABC Company";

cvm.ContactName = "Krishna";

cvml.Add(cvm);

return cvml;

}

public class CustomerViewModel

{

public string ContactName { get; set; }

public string CompanyName { get; set; }

}

The WCF service uses webHttpBinding.

In the client side the code is as below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="InfraApplication.index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$.ig.loader({

scriptPath: "/Infragistics/js/",

cssPath: "/Infragistics/css/",

resources: "igGrid.*"

});

$.ig.loader(function () {

$("#grid1").igGrid({

height: 500,

columns: [

{ headerText: "Company Name", key: "CompanyName", dataType: "string" },

{ headerText: "Contact Name", key: "ContactName", dataType: "string" },

autoGenerateColumns: false,

dataSource: "/SampleService.svc/GetSortedCustomers",

responseDataKey: "d",

features: [

{

name: "Paging",

type: "local",

pageSize: 10

{

name: "Filtering",

allowFiltering: true,

type: "local"

}

]

});

</script>

</head>

<body>

</body>

</html>

19693

[Infragistics] Tsvetelina Georgieva posted over 12 years ago in reply to sucheendarnath

Hello ,

Thank you for your update.
As I've mentioned before it all depends on the implementation of your WCF service and the structure of JSON.
There is sample attached in the article below:

http://help.infragistics.com/NetAdvantage/jquery/2012.1?page=igGrid_Getting_Started_With_igGrid_oData_and_WCF_Data_Services.html

which you may use as starting point

http://dl.infragistics.com/community/jquery/codesamples/aaronm/2011-07-28/igGridOData.zip

Hope this helps
Cancel
Reply

Cancel
540

sucheendarnath posted over 12 years ago in reply to [Infragistics] Tsvetelina Georgieva

On removing responseDataKey: "d", the code was working fine. But when i try to bind the same using the list from the database, I am getting the below error

Microsoft JScript runtime error: The remote request to fetch data has failed: (parsererror) There was an error parsing the JSON data and applying the defined data schema: 'length' is null or not an object
Cancel
Reply

Cancel

19693

[Infragistics] Tsvetelina Georgieva posted over 12 years ago

Hello,

By looking the code snippet I can guess that the issue in your case is the missing JSON format at the end

dataSource: "/SamplesBrowser/Services/WCFCustomerService.svc/GetSortedCustomers?$format=json",

But it depends on the realization of ISampleService interface.

For example in our sample browser we have similar one

http://samples.infragistics.local/jquery/grid/binding-to-wcf-service

In your scenario I noticed that you are using similar to our WCFCustomerService.svc which is implementing

  public interface IWCFCustomerService
    {
        [OperationContract]
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        List<CustomerViewModel> GetSortedCustomers();
    }

Using it as datasource I didn't have to set responseDataKey in my HTML sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="/SamplesBrowser/Scripts/modernizr.min.js"></script>
    <script type="text/javascript" src="/SamplesBrowser/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/SamplesBrowser/Scripts/jquery-ui.min.js"></script>
    <script src="http://localhost/ig_ui/js/infragistics.loader.js"></script>
    <script type="text/javascript">
        $.ig.loader({
            scriptPath: "http://localhost/ig_ui/js/",
            cssPath: "http://localhost/ig_ui/css/",
            resources: "igGrid.*"
        });

        $.ig.loader(function () {
            $("#grid1").igGrid({
                height: 500,
                columns: [
                       { headerText: "Company Name", key: "CompanyName", dataType: "string" },
                       { headerText: "Contact Name", key: "ContactName", dataType: "string" },
                   ],
                autoGenerateColumns: false,
                dataSource: "/SamplesBrowser/Services/WCFCustomerService.svc/GetSortedCustomers?$format=json",
                // responseDataKey: "d",
                features: [
                   {
                       name: "Paging",
                       type: "local",
                       pageSize: 10
                   },
                    {
                        name: "Filtering",
                        allowFiltering: true,
                        type: "local"
                    }
                ]
            });
        });      
    </script>
    <style type="text/css">
        #selection_list
        {
            border: 1px soild;
            width: 600px;
            height: 200px;
            overflow-y: scroll;
            background-color: #EBEBEB;
        }
    </style>
</head>
<body>
    <br />
    <table id="grid1">
    </table>
</body>
</html>

I recommend you using the Developer Tools of IE9 or Firebug to check what is the structure of JSON .

Also you may find this article as helpful:

http://help.infragistics.com/NetAdvantage/jquery/2012.1?page=igGrid_Getting_Started_With_igGrid_oData_and_WCF_Data_Services.html

Let us know if you need further assistance