Kendo Grid - page method is called no data shows up ...

[Daniel]

My ASP.NET page method is working and data is coming back but no data is being rendered in the grid.  The grid just shows the column names and no rows.  Here is the first row of the data returned from the invocation of my ASP.NET page method.


{"d": [{"__type":"HDServer.DataDictViewModel","IndexName":"$FacilityName","FieldWidth":8,"MaximumValue":null,"MinimumValue":null,"PointType":"VAR","ProcessArea":null,"CompressionType":"LST","DataSource":null,"DataType":"A","DecimalPlaces":2,"Description":"$FacilityName","Units":null}]
}


The javascript I am using is basically from the editing-popup grid sample


 <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "Default.aspx",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/ReadDataDict",
                            contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                            type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                            dataType: "jsonp"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return kendo.stringify({ datadict: options.models });
                            }
                        }
                    },
                    batch: true,
                    pageSize: 30,
                    schema: {
                        data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                        model: {
                            id: "IndexName",
                            fields: {
                                IndexName: { type: "string", nullable: false, validation: { required: true } },
                                FieldWidth: { type: "number", validation: { required: true } },
                                MaximumValue: { type: "number" },
                                MinimumValue: { type: "number" },
                                PointType: { type: "string" },
                                ProcessArea: { type: "string" },
                                CompressionType: { type: "string" },
                                DataSource: { type: "string" },
                                DataType: { type: "string", validation: { required: true } },
                                DecimalPlaces: { type: "number", validation: { required: true } },
                                Description: { type: "string", validation: { required: true } },
                                Units: { type: "string", validation: { required: true } }
                            }
                        }
                    }
                });


                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 400,
                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        { field: "IndexName", title: "Index Name" },
                        { field: "FieldWidth", title: "Field Width", width: "150px" },
                        { field: "PointType", title: "Point Type", width: "150px" },
                        { field: "ProcessArea", title: "Process Area", width: "100px" },
                        { field: "MinimumValue", title: "Min", width: "100px" },
                        { field: "MaximumValue", title: "Max", width: "100px" },
                        { command: ["edit", "destroy"], title: "&nbsp;", width: "210px" }],
                    editable: "popup"
                });
     
            });
    </script>


The javascript console shows no errors and all scripts load successfully.  The grid does render, but with no data.  I am at a loss ...


Dan

[Mahdi]

use in this way

 <script>
 
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            //type: "odata",
//                            type: "odata",
                            transport: {
                                read: function (options) {
                                    $.ajax({
                                        type: "POST",
                                        url: "rm.aspx/getMyClass",
                                        contentType: "application/json; charset=utf-8",
                                        dataType: "json",
                                        success: function (msg) {
                                            options.success(msg.d);
                                        }
                                    });
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 5,
                            serverPaging: false,
                            serverFiltering: false,
                            serverSorting: false
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "OrderID",
                            filterable: false
                        },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 100,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 200
                            }, {
                                field: "ShipCity",
                                title: "Ship City"
                            }
                        ]
                    });
                });
            </script>

and do not forget to add script manager and adding EnablePageMethods="true" 

  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"   >


and in cs file you must have a methode like this:

  [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static List<MyClass> getMyClass()
     {
          List<MyClass> ll = new List<MyClass>();
         ll.Add(new MyClass()
                    {
                        OrderID = 1,
                        Freight = 2,
                        OrderDate = DateTime.Now,
                        ShipCity = "1",
                        ShipName = "1"
                    });


         ll.Add(new MyClass()
         {
             OrderID = 2,
             Freight = 2,
             OrderDate = DateTime.Now,
             ShipCity = "2",
             ShipName = "2"
         });


         ll.Add(new MyClass()
         {
             OrderID = 3,
             Freight = 2,
             OrderDate = DateTime.Now,
             ShipCity = "3",
             ShipName = "3"
         });


         ll.Add(new MyClass()
         {
             OrderID = 6,
             Freight = 6,
             OrderDate = DateTime.Now,
             ShipCity = "6",
             ShipName = "6"
         });


         ll.Add(new MyClass()
         {
             OrderID = 7,
             Freight = 7,
             OrderDate = DateTime.Now,
             ShipCity = "7",
             ShipName = "7"
         });


         ll.Add(new MyClass()
         {
             OrderID = 8,
             Freight = 8,
             OrderDate = DateTime.Now,
             ShipCity = "8",
             ShipName = "8"
         });
         return ll;
     }




    public class MyClass
    {
        private int _OrderID;
        private int _Freight;
        private string _ShipName;


        
        private DateTime _OrderDate;
        private string _ShipCity;


        public int OrderID
        {
            get { return _OrderID; }
            set { _OrderID = value; }
        }


        public int Freight
        {
            get { return _Freight; }
            set { _Freight = value; }
        }


        public string ShipName
        {
            get { return _ShipName; }
            set { _ShipName = value; }
        }


        public DateTime OrderDate
        {
            get { return _OrderDate; }
            set { _OrderDate = value; }
        }


        public string ShipCity
        {
            get { return _ShipCity; }
            set { _ShipCity = value; }
        }


    }