Kendo Grid not binding Using Ajax Enabled WCF

[Muhammad]

Hi,

I would like to bind Kendo Grid using Ajax enabled WCF and returning a data either in json or xml format. But the problem is that my kendo UI Grid is not binding with my web service. The webservice returns the data without any problem. Any help would be greatly appreciated.

Webservice Data :

{"d":["20417","20418","20419","20420","20421","20422","20424","20425","20426","20427","20443","20480","20489","20491","20492","20495","20497","20498"]}

[ServiceContract(Namespace = "QS")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class PSService
{
     
    [OperationContract()]
    [WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest)]
    public string[] GetJobs()
    {
        try
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("select ID from ff_job");
            string sql = sb.ToString();
            DataTable dt = Database.Instance.ExecuteQueryToDataTable(sql);
            List<string> IJobList = new List<string>();
            string sJobID;
            foreach (DataRow dr in dt.Rows)
            {
                sJobID = dr["ID"].ToString();
                IJobList.Add(sJobID);
            }
            return IJobList.ToArray();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message.ToString());
            return null;
        }
 
    }

<div id="grid">
</div>

<script type="text/javascript">

       $(document).ready(function () {

           $("#grid").kendoGrid({

               dataSource: {

                   type: "odata",

                   transport: { read: "http://localhost:3444/BootStrap/PSService.svc/getjobs" },

                   pageSize: 10

               },

               schema: {

                   model: {

                       fields: {

                           ID: { type: "number" }

 

                       }

                   }

               },

               height: 360,

               groupable: true,

               scrollable: true,

               sortable: true,

               pageable: true,

               columns: [{

                   field: "ID",

                   width: 90,

                   title: "Job No."

               }]

           });

       });

   </script>

[Nikolay Rusev]

Hello Muhammad,

The schema definition is interpreted as follow: every item in data(array of items serialized from the service) is a object which has a property named "ID". So the data should be [{"ID": some int }, {"ID": some int}...].

The response however doesn't look like the one described by the schema definition. You will have to return the data in the proper format.

Bellow you can find some runnable application with various binding scenarios:
https://github.com/telerik/kendo-examples-asp-net
https://github.com/telerik/kendo-examples-asp-net-mvc

Regards,
Nikolay Rusev
the Telerik team

[Muhammad]

Thank you so much for your quick response ... It all works now ...