Unable to close popup editor window Kendo UI v2017.1.118

[Cory]

Following this example https://dojo.telerik.com/iFUcISIc I am unable to get the popup editor window to close.

I am calling a local service that consumes and responds with JSON.

I am using Kendo UI v2017.1.118

 

When I attempt to close a popup editor window for the grid I get the following errors:

Uncaught TypeError: Cannot read property 'children' of null
    at init._items (kendo.all.min.js:48)
    at init.items (kendo.all.min.js:48)
    at init._editCancelClick (kendo.all.min.js:49)
    at HTMLAnchorElement.d (jquery-1.12.3.min.js:2)
    at HTMLDivElement.dispatch (jquery-1.12.3.min.js:3)
    at HTMLDivElement.r.handle (jquery-1.12.3.min.js:3)
_items @ kendo.all.min.js:48
items @ kendo.all.min.js:48
_editCancelClick @ kendo.all.min.js:49
d @ jquery-1.12.3.min.js:2
dispatch @ jquery-1.12.3.min.js:3
r.handle @ jquery-1.12.3.min.js:3

see also KendoUIGridPopupEditorError.png

 

Also when hitting the update button, the update/insert works but the windows does not close after it completes and I am 

unable to cancel or exit out of the window.

 

This is what my script imports look like:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        $.fn.addBack = function (selector) {
            return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
        }
    </script>
    <script type="text/javascript" src="../Scripts/angular.js"></script>
    <script type="text/javascript" src="../Scripts/angular-resource.min.js"></script>
    <script type="text/javascript" src="../Scripts/kendo.all.min.js"></script>

 

 

 

 

 

[Alex Hajigeorgieva]

Hello, Cory,

Thank you for giving Kendo UI a test run, although I would recommend downloading the latest version.

The described behaviour sounds like an invalid response may have been sent to the client.

Could you share the data source configuration as well as a screenshot of the server response? In most cases, the response should be exactly like the read operation response (e.g. an array of the affected records).

The CRUD operation article may be of assistance: https://docs.telerik.com/kendo-ui/framework/datasource/crud

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Cory]

Hi Alex,

My data source configuration:

var datasource = new kendo.data.DataSource({
        transport: {
            read: {
                url: baseApiURL + companyID,
                type: "get",
                dataType: 'json'
            },
            update: {
                url: baseApiURL,
                type: "put",
                dataType: 'json',
                contentType: "application/json"
            },
            create: {
                url: baseApiURL,
                type: "post",
                dataType: 'json',
                contentType: "application/json"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options) {
                    var loptions = [];
                    loptions[0] = options; // place json object in array to meet requirements of API
                    if (operation == "update") {
                        return JSON.stringify(loptions);
                    }
                    if (operation == "create") {
                        return JSON.stringify(loptions);
                    }
                    if (operation == "destroy") {
                        return JSON.stringify(loptions);
                    }
                }

            }
        },
        schema: {
            data: "objResultList",
            model: {
                id: "QualificationID",
                fields: {
                    QualificationID: {},
                    CompanyID: { defaultValue: companyID },
                    QualificationCode: {},
                    QualificationDescription: {},
                    OutsideCode: {},
                    IsActive: {}
                }
            }
        }
    });

[Cory]

Woops looks like I cannot update the reply so the data source is incorrect for the create

it should be 

if (operation == "create") {
                        return JSON.stringify(options);
                    }

[Alex Hajigeorgieva]

Hello, Cory,

Thank you for updating the thread.

It looks like you have found the answer.

Before closing the thread, I wanted to let you know that you may use the Kendo UI styles to style the custom form I believe I see in the screenshots:

<div class="k-edit-label">
    <label>Name:</label>
</div>
<div class="k-edit-field">
    <input class="k-textbox" name="name" />
</div>

https://dojo.telerik.com/@bubblemaster/eqirIMag

Let me know in case further questions arise.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Cory]

Hello Alex,

 

No I have not found a solution to the problem. Sorry if I was unclear, but even after changing the update methods repsonse

on the API to conform to kendo ui's requirements it still is not working. I still get the same error messages and I am unable to close the update/create window.

 

Thank you,

 

Cory

[Alex Hajigeorgieva]

Hi, Cory,

I am sorry for the misunderstanding.

The screenshots and snippet which were provided previously have some conflicts and I am not sure what is the current response from the server and the schema definition on the client.

If the response is an array of the items, the schema should be defined as follows:

schema: {
   model: {
       id: "QualificationID",
       fields: {
           QualificationID: { type: "number", editable: false },
           CompanyID: { defaultValue: companyID },
           IsActive: {  type: "boolean" }
       }
   }
 }

I removed schema.data: "objResultList" because that would indicate the response looks like this for all operations - create, update, destroy and read: 

{ "objResultList" : [{ "QualificationID": 1, "QualificationCode": "test"}] }

I created a runnable example for you with a very similar data source using PUT & POST type requests so you can compare it with your application.

Finally, the only time the popup did not close was when the service was returning invalid response - in my case that was 404 because the server was not configured to accept PUT requests. After fixing that part in the web config, it works without issues.

I suggest you inspect the project and then modify it to mimic the server side as best as you can and send it back so I can give you a concrete suggestion.

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik