DataSource not firing .net WCF Service but jQuery .ajax does work.

[steve]

Hi,

I am new to this forum and Kendo UI.  I have a WCF service that has JSON support running.  I can us jQuery to call the web service and the breakpoints get hit.  I know it works via jQuery.   I wrote the following for the auto-complete and it doesn't fire off the request to the local service.   The aspx page and the service are in the same domain.  I have pasted in the code below.   I have tried jsonp, json, xml and nothing seems to want to hit the service.  The commented out code : WCFJSON() function calls the service and the breakpoint gets hit.  Any ideas?

  $(document).ready(function () {

            // WCFJSON();

            // $("#input").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);

            // return;

             $("#input").kendoAutoComplete({

                 minLength: 10,

                 dataTextField: "Cusip",

                 dataSource: new kendo.data.DataSource({

                     transport: {

                         read: {

                                    url: "Service.svc/GetUsers",

                                     dataType: "jsonp"

                                }

                     }

                  }

                 ),

                     change: function () {

                        //alert("test");

                         this.dataSource.read();

                     }

                    

             });

         });

Thanks,

Steve

[Nikolay Rusev]

Hello Steve,

If the service is in the same domain you do not need to use JSONP. The following setup of the AutoComplete should be working properly:

$("#input").kendoAutoComplete({
                minLength: 3,
                dataTextField: "Text",
                dataValueField: "ID",
                dataSource: {
                    transport: {
                        read: {
                            url: "Service.svc/GetData"
                        }
                    },
                    schema: {
                        data: "d"
                    }
                }
            });

For your convenience I am attaching sample app.

Best wishes,
Nikolay Rusev
the Telerik team

[steve]

perfect!  thanks.

I had several problems, however I got working!  Very cool.

-Steve

[Sovan]

I've attached a wcf project with kendoAutoComplete. The json object is formed but not showing in the autoComplete dropdown. When checked by firebug, I got an error is occurred in line no 1040 of kendo.data.js file. I made GetEmployees method. And I used GetData for testing purpose. Please check.
Thanks,
Sovan

[pmessina]

The problem is your setup.

change where you have type:json to dataType:jsonp and then get rid of the schema since you do not have a property called d with an array. The schema is only there to point it to a property of an object.

[Sovan]

Hello pmessina,
Thanks a lot for your suggestion. It's working for the GetData. :)
I am a newbie in this field. Sorry for the silly mistakes..

Ok,one more problem. In the GetEmployees() method, the json object is formed. But in the autocomplete dropdownlist,all the values are showing undefined. Please help.
I've changed the query like:
public string GetEmployees(string start)
        {
            var employees = from c in ContextObject.sd_emp where c.userName.StartsWith(start.ToLower()) orderby c.userName select c;
            //.........
        }
Please tell where to change for the parameterized method.

Thanks,
-Sovan

[pmessina]

No problem at all. If the only thing you changed was the LINQ query in your code you still need to change the parameters used in the auto complete textbox.

This is whats in your code now but these are not properties of Employee
dataTextField: "Name",
dataValueField: "Id",

This is what you could put there to get a response
dataTextField: "firstName",
dataValueField: "firstName",

Remember JavaScript is different then other languages if a property does not exist it will not error out it just display undefined. 

[Sovan]

Well, I've changed the code according to your suggestion. But this gives me an error that "endpoint not found".
Changes made:

1. IService1.cs
[OperationContract]
[WebGet(UriTemplate = "GetEmployeeNames/{start}", ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json)]
List<Data> GetEmployees(string start);

2. The Data class contains only one property Name.

3. Service1.svc.cs
public List<Data> GetEmployees(string start)
        {
            List<Data> lstData = new List<Data>();
            var employees = from c in ContextObject.sd_emp where c.userName.StartsWith(start.ToLower()) orderby c.userName select c;
            foreach (var employee in employees)
            {
                Data data = new Data();
                data.Name = employee.firstName;
                lstData.Add(data);
            }
            return lstData;
        }

4. AutoComplete.htm
$("#titles").kendoAutoComplete({
                    minLength: 1,
                    dataTextField: "Name",
                    dataValueField: "Name",
                    dataSource: {
                        dataType: "jsonp",
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 5,
                        transport: {
                            read: {
                                url: "http://localhost:51292/Service1.svc/GetEmployeeNames"
//...
});

I keep the web.config same as it was.
But this is not working.. Firebug shows "endpoint not found".
Please mention whether i need to change anything in the web.config.
Thanks.
Waiting for your reply..

[Nikolay Rusev]

Hello Sovan Kumar,

Please check the attached application. It is tweaked version of the one you've posted few posts ago.

Regards,
Nikolay Rusev
the Telerik team

[pmessina]

Sovan to get this working the code is below. I couldn't get your model working quick enough so I made the connection work and you should be good from there. Also, you will need to change the return from get employees from string to IEnumerable<Employee>

the js code is

<script type="text/javascript">
                $("#titles").kendoAutoComplete({
                    minLength: 1,
                    dataTextField: "firstName",
                    dataValueField: "firstName",
                    dataSource: {
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 5,
                        transport: {
                            read: {
                                url: "Service1.svc/GetEmployeeNames",
                                data: {
                                    start: function () {
                                        var ac = $("#titles").data("kendoAutoComplete");
                                        return ac.value();
                                    }
                                }
                            }
                        },
                        schema: {
                            data: ""
                        }
                    }
                });


            </script>

IService
[OperationContract]
        [WebGet(UriTemplate = "GetEmployeeNames?start={start}", ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json)]
        string GetEmployees(string start);

Service
public string GetEmployees(string start)

[Sovan]

Thanks a lot pmessina.
It is working.. :)
I'm using kendo for my application. It will be pleasure to get your help further.
Thanx again....

[Sovan]

Well,for the datasource example (remote-data.html) i've created same structure as previous one.

[WebGet(UriTemplate = "GetData?q={q}", ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json)]

List<Data> Search(string q);

//.......
url: "ServiceSearch.svc/GetData",

     dataType: "jsonp",

     data: {

                q: function () {

                     return $("#searchfor").val();

                 }

      }
//............
schema:{
        data:""
}
//....

Now I want to fetch data from Data class properties(profileImageUrl,userName etc..), like
<img width="48" height="48" src="#= profileImageUrl #" alt="#= userName #" />

Problem is that, the response is formed. But not populated into the template. I tried using a json file directly,like,
url: "test.json"
 it is also displaying the same problem.
Please Help.