2

I am having an issue with Kendo grid pop up editor not sending date data to the server side.

Please see the code below:

JavaScript:

$(document).ready(function () {
        var serviceBaseUrl = "@Request.Url.ToString()",
            lostPropertyDataSource = new kendo.data.DataSource({
                transport: {
                    create: {
                        url: serviceBaseUrl + "/AddLostProperty",
                        type: "POST",
                        dataType: "json",
                    },
                    read: {
                        url: serviceBaseUrl + "/GetLostProperties",
                        type: "GET",
                        dataType: "json",
                        contentType: 'application/json; charset=utf-8',
                    },
                    update: {
                        url: serviceBaseUrl + "/UpdateLostProperty",
                        type: "POST",
                        dataType: "json"
                    },
                    destroy: {
                        url: serviceBaseUrl + "/DeleteLostProperty",
                        type: "DELETE",
                        dataType: "json"
                    },
                },
                requestEnd: onRequestEnd,
                pageSize: 20,
                schema: {
                    model: {
                        id: "PropertyId",
                        fields: {
                            //PropertyId: { type: "number", nullable: true },
                            PropertyName: { type: "string", editable: true, validation: { required: true } },
                            CategoryName: { type: "string", editable: true, validation: { required: true } },
                            PropertyDescription: { validation: { required: false } },
                            //Image: { validation: { required: false } },
                            FoundDate: { type: "date", format: '0:dd-MM-yyyy' },
                            FoundLocation: { editable: true, validation: { required: false } }
                        }
                    }
                },
            });


        $("#manageLostPropertiesGrid").kendoGrid({
            dataSource: lostPropertyDataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [
                //{ command: { text: "View Photo", click: showPhoto }, title: " ", width: "180px" },
                { field: "PropertyName", title: "Property Name", width: "150px" },
                { field: "CategoryName", title: "Category", editor: propertyCategoryList, width: "150px"},
                { field: "PropertyDescription", title: "Description", width: "200px" },
                { field: "FoundDate", type: "date", title: "Found Date", format: "dd/MM/yyyy", template: "#= kendo.toString(kendo.parseDate(FoundDate, 'dd-MM-yyyy'), 'dd/MM/yyyy') #",  width: "130px" },
                { field: "FoundLocation", title: "Found Location", width: "120px" },
                { command: ["edit", "destroy"], title: " ", width: "250px" }],
            editable: "popup"
        }).data("kendoGrid");

        function onRequestEnd(e) {
            if (e.type != "read") {
                e.sender.read();
            }
        }

        function propertyCategoryList(container, options) {
            $('<input name="' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: true,
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryName",
                    valuePrimitive: false,
                    autoBind: true,
                    dataSource: {
                        transport: {
                            read: serviceBaseUrl + "/GetPropertyCategories",
                        }
                    }
                });
          }
    });

The view model has got other data but the date is getting a null value even a date is entered in the grid.

enter image description here

And the data posted from the client side can be seen from the browser:

enter image description here

The question is how to send the date to the server side from Kendo Grid?

1 Answer 1

2

Try posting the date in another format. You can use parameterMap to change the format:

transport: {
    // ...
    parameterMap: function (data, type) {
        if (type != "read") {
            data.FoundDate = kendo.toString(data.FoundDate, "dd/MM/yyyy");
        }
        return data; 
    }
}
2
  • The data type of FoundDate in the ViewModel is DateTime?. Commented Mar 27, 2019 at 22:57
  • Yes the data type of FoundDate in the view model should be DateTime?.
    – Martin D.
    Commented Mar 28, 2019 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.