Datasource in template not syncing

7 posts, 0 answers
  1. Steven
    Steven avatar
    11 posts
    Member since:
    Oct 2013

    Posted 16 Apr 2015 Link to this post

    Hi

    I need some assistance with something I'm working on. I have a kendo grid that's populated by a datasource that queries a view in a sql database. (I use a view as it contains a join between 2 tables, getting the latest status of the parent record that was added in a child table). The grid has a custom command column that launches a window that uses a template. That template contains a form that binds to another datasource that's filtered by the id of the selected row in it's parent grid. That form binds ok and the values appear as they should, but the datasource will not sync. I get a 400 bad request error when I click the save button. Could somebody please look at the code below and see if they can figure out why it won't sync. Any help would be greatly appreciated.

    Regards

     

    <body>
        <form id="form1" runat="server">
        <h2>Incidents</h2>
        <div id="grid"></div>
        <div id="details"></div>
     
        <script>
     
            var wnd;
            var detailsTemplate;
     
            $(document).ready(function () {
     
                // DECLARING DATASOURCES TO BE USED AS LOOKUPS
     
                // Request Origins
                var requestoriginsDataSource = new kendo.data.DataSource({
                    type: "odata",
                    transport: {
                        read: { url: "/DORAModelService.svc/lkupRequestOrigins", async: false }
                    },
                    serverSorting: true,
                    sort: { field: "text", dir: "asc" }
                });
                requestoriginsDataSource.read();
     
                // Request Types
                var requesttypeDataSource = new kendo.data.DataSource({
                    type: "odata",
                    transport: {
                        read: { url: "/DORAModelService.svc/lkupRequestTypes", async: false }
                    },
                    serverSorting: true,
                    sort: { field: "text", dir: "asc" }
                });
                requesttypeDataSource.read();
     
                // Incident Source Type
                var incidentsourceDataSource = new kendo.data.DataSource({
                    type: "odata",
                    transport: {
                        read: { url: "/DORAModelService.svc/lkupSources", async: false }
                    },
                    serverSorting: true,
                    sort: { field: "text", dir: "asc" }
                });
                incidentsourceDataSource.read();
     
                // Managers
                var managersDataSource = new kendo.data.DataSource({
                    type: "odata",
                    transport: {
                        read: { url: "/DORAModelService.svc/lkupUsers", async: false }
                    },
                    serverSorting: true,
                    sort: { field: "text", dir: "asc" }
                });
                managersDataSource.read();
     
                // Incident DataSource - this uses a view that joins 2 tables.
                // It's required to get the latest status of the incidents displayed
     
                var dataSource = new kendo.data.DataSource({
                    type: "odata",
                    serverFiltering: true,
                    serverSorting: true,
                    sort: { field: "IncidentID", dir: "desc" },
                    transport: {
                        read: {
                            url: "/DORAModelService.svc/Vw_Incidents", async: false
                        }
                    },
     
                    schema: {
                        model: {
                            id: "IncidentID",
                            fields: {
                                IncidentID: { type: "number" },
                            }
                        }
                    }
                });
     
                dataSource.read();
     
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    height: 550,
                    filterable: true,
                    sortable: true,
                    pageable: true,
                    editable: true,
                    toolbar: ["create", "save", "cancel"],
                    columns: [{
                        field: "IncidentID",
                        filterable: false,
                        width: 80
                    },
                        "Incident",
                        "LatestStatus",
                        { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }
                    ]
                });
     
                wnd = $("#details")
                        .kendoWindow({
                            title: "Incident Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: "98%",
                            open: function (e) {
                                this.wrapper.css({ top: 5 });
                            }
                        }).data("kendoWindow");
                detailsTemplate = kendo.template($("#detailstemplate").html());
     
                var selectedincidentDataSource
                function showDetails(e) {
                    e.preventDefault();
                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    wnd.content(detailsTemplate(dataItem));
                    wnd.center().open();
                    selectedincidentDataSource = new kendo.data.DataSource({
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "/DORAModelService.svc/TblIncidents", async: false,
                                data: {
                                    $expand: "TbIncidentStatus"
                                }
                            },
                            update: {
                                url: function (data) {
                                    return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";
                                }
                            },
                            create: {
                                url: "/DORAModelService.svc/TblIncidents"
                            },
                            destroy: {
                                url: function (data) {
                                    return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";
                                }
                            }
                        },
                        filter: {
                            logic: "and",
                            filters: [
                              { field: "IncidentID", operator: "eq", value: dataItem.IncidentID }
                            ]
                        },
                        batch: true,
                        schema: {
                            model: {
                                id: "IncidentID",
                                fields: {
                                    IncidentID: { type: "number" },
                                    Incident: { type: "string" },
                                    ManagerID: { type: "number" },
                                    LoggedDate: { type: "date", format: "{0:dd/MM/yyyy}" },
                                    IncidentDate: { type: "date", format: "{0:dd/MM/yyyy}" },
                                    SourceID: { type: "number" },
                                    IncidentsTypeID: { type: "number" },
                                    IncidentOriginID: { type: "number" },
                                    Logger: { type: "string" }
                                }
                            }
                        }
                    })
     
                    selectedincidentDataSource.read();
     
     
                    kendo.bind($("#selectedincident"), selectedincidentDataSource.view()[0]);
     
                    $("#managers").kendoDropDownList({
                        dataSource: managersDataSource,
                        dataTextField: "text",
                        dataValueField: "value"
                    }).data("kendoDropDownList")
     
                    $("#origin").kendoDropDownList({
                        dataSource: requestoriginsDataSource,
                        dataTextField: "text",
                        dataValueField: "value"
                    }).data("kendoDropDownList")
     
                    $("#type").kendoDropDownList({
                        dataSource: requesttypeDataSource,
                        dataTextField: "text",
                        dataValueField: "value"
                    }).data("kendoDropDownList")
     
                    $("#source").kendoDropDownList({
                        dataSource: incidentsourceDataSource,
                        dataTextField: "text",
                        dataValueField: "value"
                    }).data("kendoDropDownList")
     
     
                    $("#hSave").click(function () {
                        selectedincidentDataSource.sync();
                    });
     
     
                } // Finish ShowDetails
            });
     
     
        </script>
     
            <script type="text/x-kendo-template" id="detailstemplate">
            <div id="selectedincident" class="container">
                <div class="container">
                    <div class="row spacer">
                        <div class="col-md-5">
     
                            <label>ID</label><span data-bind="text: IncidentID"></span><br />
     
                            <label>Name</label><input type="text" id="incidents1" class="k-textbox w300" data-bind="value: Incident" /><br />
     
                            <label>Incident Date</label><input class="w300" type="text" id="incidentdate" data-bind="value: IncidentDate" data-role="datepicker" data-format="dd/MM/yyyy" /><br />
     
                            <label>Logged Date</label><input class="w300" type="text" id="loggeddate" data-role="datepicker" data-bind="value: LoggedDate" data-format="dd/MM/yyyy" /><br />
     
                            <label>Manager</label><input class="w300" type="text" id="managers" class="input400" data-bind="value: ManagerID" /><br />
     
                        </div>
                        <div class="col-md-5">
     
                            <label>Origin</label><input type="text" id="origin" class="w300" data-bind="value: IncidentOriginID" /><br />
     
                            <label>Type</label><input type="text" id="type" class="w300" data-bind="value: IncidentsTypeID" /><br />
     
                            <label>Source</label><input type="text" id="source" class="w300" data-bind="value: SourceID" /><br />
     
                            <a href="\\#" class="k-button" id="hSave">Save</a>
                        </div>
                    </div>
                </div>
            </div>
            </script>
        </form>
    </body>

  2. Steven
    Steven avatar
    11 posts
    Member since:
    Oct 2013

    Posted 17 Apr 2015 Link to this post

    I moved this to the datasource forum
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 20 Apr 2015 Link to this post

    Hi Steven,

    I reviewed the provided code snippets, but I am still not sure what exactly is causing this. Would you mind sharing the request details and its response? You can do that either by examining the browser's network tab or record a session with Fiddler.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Steven
    Steven avatar
    11 posts
    Member since:
    Oct 2013

    Posted 21 Apr 2015 in reply to Alexander Popov Link to this post

    Hi Alexander

    Thanks for your reply. I managed to get it to work yesterday. I took out the "batch: true" option in the 2nd datasource and the request works.

    Oddly enough, the code that works puts double quotes around the number fields in the request to update when the batch option is taken out (maybe there's a reason for that?). Here is part of the request that creates the error:

    Incident: "Bugs in rice! They were found when cooking."

    IncidentDate: "2015-03-03T17:41:17.000Z"

    IncidentID: 2517

    IncidentOriginID: 5

    IncidentsTypeID: 1

    LoggedDate: "2015-03-04T17:41:17.000Z"

    Logger: "Webster, Steven"

     And here is the request that works. Note the quotation marks around the number fields:

    Incident: "Bugs in rice! They were found when cooking."

    IncidentDate: "2015-03-04T17:41:17.000Z"

    IncidentID: "2517"

    IncidentOriginID: "5"

    IncidentsTypeID: "1"

    LoggedDate: "2015-03-04T17:41:17.000Z"

    Logger: "Webster, Steven"

  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 23 Apr 2015 Link to this post

    Hello Steven,

    The quotes might get added in case the field's type is not explicitly specified in the DataSource's schema.model option. If that is indeed the case, then the DataSource will treat those fields as strings, hence the quotes.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Steven
    Steven avatar
    11 posts
    Member since:
    Oct 2013

    Posted 23 Apr 2015 in reply to Alexander Popov Link to this post

    Hi there

    They are specified! It's simply removing the "batch" option from the datasource that adds the quotes. But the funny thing is, by adding the quotes, the requests writes to the database!

  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Apr 2015 Link to this post

    Hello Steven,

    I apologize for misleading you. In this case strings are added, because the DataSource type is OData and this is what the server would expect. Since the OData DataSource does not support batch operations out of the box, the code that adds the quotes is not executed when enabling the batch option. You can find more details and examples on that topic here.

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready