Grid Read Operation Not Populating Grid With Data

[Vi Le]

I need help returning Json data back and populating a very simple grid, here is my code:

Model:

public class CapitalLeaseCostModel
{
    public int ID { get; set; }
    public string Reasons { get; set; }

    public CapitalLeaseCostModel()
    {

    }

}

 

View:

<script>
    $(document).ready(function () {

        var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: "/CapitalLease/Costs_Read",
                                    dataType: "json"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ID",
                                    fields: {
                                        ID: { editable: false, nullable: true },
                                        Reasons: { type: "text" }
                                    }
                                }
                            }
                        });


        $("#capitalizedCostGrid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                { field: "ID", title: "ID" },
                { field: "Reasons", title: "Reasons" }],
            editable: "inline"
        });

    });
</script>

@*Rent Information*@
<p class="title">Section Two - Lease Costs to Capitalize</p>
<div style="padding:15px;">
    <div id="costsRowOne">
        <div id="capitalizedCostGrid" class="inline-control"></div>
    </div>
</div>

 

Controller:

[AcceptVerbs(HttpVerbs.Get)]
        public JsonResult Costs_Read()
        {
            CapitalLeaseCostModel testModel = new CapitalLeaseCostModel();
            testModel.ID = 1;
            testModel.Reasons = "test reason1";
            List<CapitalLeaseCostModel> list = new List<CapitalLeaseCostModel>();
            list.Add(testModel);

            return Json(JsonConvert.SerializeObject(list), JsonRequestBehavior.AllowGet); ;
        }

 

The grid loads fine but now data. What am I missing? This is based off of the inline-editing demo for kendo-ui.

 

Thanks

 

[Vi Le]

Bump.

[Vi Le]

I figured it out, for anyone else that may come across this:

Model:

public class CapitalLeaseCostModel
    {
        public int ID { get; set; }
        public string Reason { get; set; }
        public decimal Amount { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public int EscalationTypeID { get; set; }
        public int EscalationFrequencyID { get; set; }
        public decimal EscalationPercentage { get; set; }
        public decimal EscalationMonetary { get; set; }

        public CapitalLeaseCostModel()
        {

        }

    }

 

View:

<script>

    $(document).ready(function () {

        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/CapitalLease/CostsRead",
                    dataType: "json"
                },
                update: {
                    url: "/CapitalLease/CostsRead",
                    dataType: "json"
                },
                destroy: {
                    url: "/CapitalLease/CostsRead",
                    dataType: "json"
                },
                create: {
                    url: "/CapitalLease/CostsRead",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    fields: {
                        ID: { editable: false, nullable: true },
                        Reasons: { validation: { required: true } },
                    }
                }
            }
        });

        $("#capitalizedCostGrid").kendoGrid({
            dataSource: dataSource,
            toolbar: ["create"],
            columns: [
            {
                field: "ID",
                title: "ID"
            },
            {
                field: "Reason",
                title: "Reason"
            },
            {
                field: "Amount",
                title: "Amount"
            },
            {
                field: "StartDate",
                title: "Start Date"
            },
            {
                field: "EndDate",
                title: "End Date"
            },
            {
                field: "EscalationTypeID",
                title: "Escalation Type"
            },
            {
                field: "EscalationFrequencyID",
                title: "Escalation Frequency"
            },
            {
                field: "EscalationPercentage",
                title: "Escalation Percent"
            },
            {
                field: "EscalationMonetary",
                title: "Monetary Escalation"
            },
            {
                command: ["edit", "destroy"], title: " ", width: "200px"
            }
            ],
            editable: "inline"

        })

    });

</script>

 

Controller:

public ActionResult CostsRead()
        {
            var model = new CapitalLeaseCostModel()
            {
                ID = 1,
                Reason = "Rent",
                Amount = 2000,
                StartDate = new System.DateTime(),
                EndDate = new System.DateTime(),
                EscalationTypeID = 1,
                EscalationFrequencyID = 1,
                EscalationPercentage = 3.0M,
                EscalationMonetary = 0
            };

            List<CapitalLeaseCostModel> list = new List<CapitalLeaseCostModel>();
            list.Add(model);

            string jsonRet = JsonConvert.SerializeObject(list);

            return this.Json(model, JsonRequestBehavior.AllowGet);
        }