This is a migrated thread and some comments may be shown as answers.

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

1 Answer 168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 11 Jul 2012, 05:03 AM
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

1 Answer, 1 is accepted

Sort by
0
Mahdi
Top achievements
Rank 1
answered on 01 Nov 2012, 09:32 AM
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; }
        }


    }


Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Mahdi
Top achievements
Rank 1
Share this question
or