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

12 posts, 0 answers
  1. steve
    steve avatar
    2 posts
    Member since:
    Mar 2009

    Posted 29 Sep 2011 Link to this post

    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
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 30 Sep 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. steve
    steve avatar
    2 posts
    Member since:
    Mar 2009

    Posted 30 Sep 2011 Link to this post

    perfect!  thanks.

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

    -Steve
  5. Sovan
    Sovan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 08 Dec 2011 Link to this post

    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
  6. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 08 Dec 2011 Link to this post

    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.
  7. Sovan
    Sovan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 09 Dec 2011 Link to this post

    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
  8. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 09 Dec 2011 Link to this post

    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. 
  9. Sovan
    Sovan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 12 Dec 2011 Link to this post

    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..
  10. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 13 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. pmessina
    pmessina avatar
    13 posts
    Member since:
    Feb 2007

    Posted 13 Dec 2011 Link to this post

    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)
  12. Sovan
    Sovan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 13 Dec 2011 Link to this post

    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....
  13. Sovan
    Sovan avatar
    8 posts
    Member since:
    Dec 2011

    Posted 20 Dec 2011 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready