Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
sucheendarnath
540
Please let me know on how to bind the data from wcf service
posted

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>      
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script src="Infragistics/js/infragistics.loader.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $.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>    
    <table id="grid1"></table>    
</body>
</html>

 

Parents
  • 19693
    posted

    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

Reply Children