Grid Read Operation Not Populating Grid With Data

3 posts, 0 answers
  1. Vi Le
    Vi Le avatar
    11 posts
    Member since:
    May 2009

    Posted 08 Jun 2016 Link to this post

    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

     

  2.
  3. Vi Le
    Vi Le avatar
    11 posts
    Member since:
    May 2009

    Posted 09 Jun 2016 Link to this post

    Bump.
  5. Vi Le
    Vi Le avatar
    11 posts
    Member since:
    May 2009

    Posted 09 Jun 2016 Link to this post

    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);
            }

     

     

     

Back to Top