Kendo Grid DataSource Repeating CRUD Calls (Returning ID From Server!!)

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

    Posted 18 Jun Link to this post

    I'm having an issue with CRUD calls being repeated. It only happens if I make two CRUD calls in a row, the second one pulls in the first one's data. For example, if I have a grid that has three records on it:

    1. I hit delete on the first record which successfully deletes that record, no issues (note that I AM returning the ID of that record back to the grid)

    2. I hit delete on the second record and it uses that model's data of the first record. Entity framework of course throws an error because it can no longer find that entity since it was deleted in the first call.

    controller:

    public ActionResult CostsDestroy(string models)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        CapitalLeaseCostModel model = new CapitalLeaseCostModel();
        var CapitalLeaseCostModelArray = serializer.Deserialize<CapitalLeaseCostModel>(models);
        model = AccountingService.DeleteCapitalLeaseCost(CapitalLeaseCostModelArray);
     
        return PartialView(Json(model));
    }

     

    View:

    @model DataNet.Common.Models.CapitalLease.CapitalLeaseCostModel
     
     
    @*grid script*@
    <script>
     
        $(document).ready(function () {
     
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/CapitalLease/CostsRead",
                        dataType: "json"
                    },
                    update: {
                        url: "/CapitalLease/CostsUpdate",
                        dataType: "json",
                        type: "POST",
                        complete: function (e) {
                            var grid = $('#capitalizedCostGrid').data("kendoGrid");
                            grid.dataSource.read();
                        }
                    },
                    destroy: {
                        url: "/CapitalLease/CostsDestroy",
                        dataType: "json",
                        type: "POST",
                        complete: function (e) {
                            e.success(data);
                            var grid = $('#capitalizedCostGrid').data("kendoGrid");
                            grid.dataSource.read();
                        }
                    },
                    create: {
                        url: "/CapitalLease/CostsCreate",
                        dataType: "json",
                        type: "POST",
                        complete: function (e) {
                            e.success(data);
                            var grid = $('#capitalizedCostGrid').data("kendoGrid");
                            grid.dataSource.read();
                        }
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            options.models[0].StartDate = kendo.toString(kendo.parseDate(options.models[0].StartDate, 'yyyy-MM-dd'), 'MM/dd/yyyy');
                            options.models[0].EndDate = kendo.toString(kendo.parseDate(options.models[0].EndDate, 'yyyy-MM-dd'), 'MM/dd/yyyy');
                        }
                        if(operation === "create" && options.models){
                            options.models[0].EscalationTypeID = options.models[0].EscalationTypeID.ID;
                            options.models[0].EscalationFrequencyID = options.models[0].EscalationFrequencyID.ID;
                        }
                        if (operation === "destroy" && options.models) {
                            return { models: kendo.stringify(options.models[0]) };
                        } else {
                            return { models: kendo.stringify(options.models), keyID: 106715 };
                        }
                    }
     
     
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ID",
                        fields: {
                            ID: { editable: true, nullable: false, defaultValue: -1 },
                            Reason: { validation: { required: true } },
                            CapitalLeaseEscalationType: {
                                defaultValue: {
                                    ID: 1,
                                    EscalationType: "No Escalation"
                                }
                            },
                            CapitalLeaseEscalationFrequency: {
                                defaultValue: {
                                    ID: 1,
                                    EscalationFrequency: "Monthly"
                                }
                            },
                            EscalationTypeID: {
                                defaultValue: {
                                    ID: 1,
                                    EscalationType: "No Escalation"
                                }
                            },
                            EscalationFrequencyID: {
                                defaultValue: {
                                    ID: 1,
                                    EscalationFrequency: "Monthly"
                                }
                            }
                        }
                    }
                }
            });
     
            $("#capitalizedCostGrid").kendoGrid({
                dataSource: dataSource,
                toolbar: ["create"],
                columns: [
                {
                    field: "ID",
                    title: "ID",
                    hidden: true
     
                },
                {
                    field: "Reason",
                    title: "Reason"
                },
                {
                    field: "Amount",
                    title: "Amount",
                    format: "{0:c}"
                },
                {
                    field: "StartDate",
                    title: "Start Date",
                    type: "date",
                    format: "{0:yyyy-MM-dd}",
                    template: "#= kendo.toString(kendo.parseDate(data.StartDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    editor: dateTimeEditor
                     
                },
                {
                    field: "EndDate",
                    title: "End Date",
                    type: "date",
                    format: "{0:yyyy-MM-dd}",
                    template: "#= kendo.toString(kendo.parseDate(data.EndDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    editor: dateTimeEditor
                },
                {
                    field: "EscalationTypeID",
                    title: "Escalation Type",
                    editor: escalationTypeDropDownEditor,
                    template: "#=CapitalLeaseEscalationType.EscalationType#"
                },
                {
                    field: "EscalationFrequencyID",
                    title: "Escalation Frequency",
                    editor: frequencyTypeDropDownEditor,
                    template: "#=CapitalLeaseEscalationFrequency.EscalationFrequency#"
                },
                {
                    field: "EscalationPercentage",
                    title: "Escalation Percent",
                    template: "<div> #= kendo.toString(data.EscalationPercentage / 100, 'p0') #</div>"
                },
                {
                    field: "EscalationMonetary",
                    title: "Monetary Escalation",
                    format: "{0:c}"
                },
                {
                    command: ["edit", "destroy"], title: "Edit", width: "200px"
                }
                ],
                editable: "popup",
                edit: function (e) {
                    e.container.find(".k-edit-label:first").hide();
                    e.container.find(".k-edit-field:first").hide();
                },
                height: 200,
                autoSync: true
     
            })
     
            @*Attaches to Escalation type drop down list*@
            function escalationTypeDropDownEditor(container, options) {
            $('<input required data-text-field="EscalationType" data-value-field="ID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: true,
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "/CapitalLease/CostsEscalationTypeRead"
                        }
                    }
                });
            }
     
            @*Attaches to Escalation Frequency drop down list*@
            function frequencyTypeDropDownEditor(container, options) {
            $('<input required data-text-field="EscalationFrequency" data-value-field="ID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: true,
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "/CapitalLease/CostsEscalationFrequencyRead"
                        }
                    }
                });
            }
     
            @*Formats the date-picker in-grid*@
            function dateTimeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                    .appendTo(container)
                    .kendoDatePicker({});
            }
     
        });
     
     
    </script>
     
    <style>
        .k-grid  .k-grid-header  .k-header  .k-link {
            height: auto;
        }
       
        .k-grid  .k-grid-header  .k-header {
            white-space: normal;
        }
    </style>
     
     
    @*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>

     

    What am i missing here. 

     

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

    Posted 18 Jun in reply to Vi Le Link to this post

    I figured it out - the response back was an error instead of the correct JSON.
  3. Kendo UI is VS 2017 Ready
Back to Top