JavaScript error in dialog edit popup validation

[Ajay]

Hi,

I'm using the latest version of Syncfusion controls. I've a grid with dialog edit template with field validations. When i try to update a required field with empty value, it displays the validation error as expected but it also throws a javascript exception in console and the validation error message doesn't hide after typing the content again in that field.

Additional Info:

I've included the jquery v2.1.4 and jquery validation v1.14 plugins.

Error Message:

ej.grid.min.js Uncaught TypeError: Cannot read property 'top' of undefined 

Occurs in grid.js line 28809:

 _renderValidator: function(i, r) {

            var l, w, v, d, g, nt;

            if (r.is(":hidden") && (r = r.siblings("input:visible")),

            r.length) {

                var f = r.closest(".e-rowcell")

                  , e = n(i).addClass("e-error")

                  , y = t.buildTag("div.e-errortail e-toparrow")

                  , u = t.isNullOrUndefined(this.getContent().data("ejScroller")) ? null : this.getScrollObject()

                  , p = 0;

                f = f.length ? f : f = r.closest("td");

                f.find(".e-error").remove();

                r.parent().hasClass("e-in-wrap") ? e.insertAfter(r.closest(".e-widget")) : e.insertAfter(r);

                l = this.model.scrollSettings.frozenRows > 0 && this._currentTrIndex >= this.model.scrollSettings.frozenRows ? !0 : !1;

                w = l ? "append" : "prepend";

                e[w](y);

                this.model.allowScrolling && (u && u._hScrollbar || u._vScrollbar) ? (f.addClass("e-validError"),

                p = u._hScrollbar ? u._hScrollbar.element[0].offsetTop : 0) : f.removeClass("e-validError");

                var o = f.offset().top + f[0].offsetHeight + i[0].offsetHeight

                  , a = !1

                  , b = u && u._hScrollbar ? u._hScrollbar.model.height : 0;

                if ((u && u.isHScroll() && o > p || o > this.getContent()[0].offsetTop + this.getContent().find(".e-content").height()) && (a = !0),

                this.model.enableRTL ? this.model.editSettings.editMode != "dialog" && e.offset({

                    top: r.offset().top + r.height()

                }) : this.model.editSettings.editMode != "dialog" && e.offset({

                    left: r.offset().left,

                    top: 

Regards,

Ajay

[Seeni Sakthi Kumar Seeni Raj]

Hi Ajay, 

We are unable to reproduce the issue at our end. 

We have prepared a sample and referred ej Scripts from 14.2.0.32 and jquery as v2.1.4 along with the jquery.validate as v1.1.4 that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/125714/ze/F125714-150192728.zip 

Please provide the following information to analyze the issue and provide you solution as early as possible. 

1)      Code example of Grid and Customized scripts (if any) or code which renders the controls for the dialog template 

2)      Name of the browser and its version 

3)      Screenshot/video explaining the issue 

4)      If possible, modify the attached sample and replicate the issue. 

Regards, 

Seeni Sakthi Kumar S. 

[gojobu]

I also get this sane error "Cannot read property 'top' of undefined" when trying to insert an item to grid

I click save and this pops up

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'top' of undefined

    at Object._renderValidator (http://localhost:58955/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:2778288)

    at Object.endEdit (http://localhost:58955/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:2702920)

    at jQuery.fn.init.n.fn.(anonymous function) [as ejGrid] (http://localhost:58955/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:22534)

    at Object._buttonClick (http://localhost:58955/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:2689719)

    at HTMLInputElement.<anonymous> (http://localhost:58955/lib/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js:10:25858)

    at HTMLDivElement.dispatch (http://localhost:58955/lib/jquery/dist/jquery.js:4430:9)

    at HTMLDivElement.elemData.handle (http://localhost:58955/lib/jquery/dist/jquery.js:4116:28)

There seems to be no error handling in this platform. Even that this is most likely an error on my end, I have no way to know what I'm doing wrong because I'm not getting a meaningful error message.

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer, 

 

We are able to reproduce the reported problem only if the Dialog template doesn’t have no input elements. On calling the endEdit method externally or clicking the save button while inserting the new records, the reported problem occurred. But we there is no input element in template given to the form which is the cause of the problem. So we suggest to ensure whether the input elements were present in the given template. Refer to the following code example. 

 

    <input type="button" id="btn"> 

    <div id="Grid"></div> 

    <div id="template" style="display: none"> 

    </div> 

    <script type="text/javascript"> 

        $(function () { 

            $("#btn").ejButton({ 

                text: "endEdit", 

                click: function (args) { 

                    $("#Grid").ejGrid("instance").endEdit() 

                } 

            }) 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

                enablelAltRow: true, 

                actionComplete: "complete", 

                editSettings: { 

                    allowEditing: true, allowAdding: true, allowDeleting: true, 

                    editMode: "dialogtemplate", dialogEditorTemplateID: "#template" 

                }, 

            }); 

        }); 

    </script> 

  

In the above code example, there is no input element in the template element. Therefore, on calling the endEdit method followed by inserting record, throws an error. 

 

If we are facing different issue, please share the following details to analyze the problem at our end. 

 

1)      Code example of the Grid 

2)      Screenshot with replication procedure or video demo 

3)      Confirm the edit mode of the Grid 

 

Regards, 

Seeni Sakthi Kumar S.