Dialog Template Editing Validation

[Frankie Moran]

Good morning, 

I have an issue when I have applied the validation to the Dialog Template Form of the grid. 

There is validation on the Contact Name, Contact Telephone and Contact Type as these are the required fields. The error messages appears, however, when text is entered in the input box the error message is not disappearing and it is blocking the other input boxes. I have attached a screenshot of this to show exactly what I mean. 

I notice that there is a code segment to insert, however, I have placed this a couple of different places and it doesn't seem to work. I have attached my code for the Dialog Form Template for my grid and would fully appreciate if you could have a look and see where the issue lies. 

Thanks,
Frankie

Attachment: CodeSegment_cff65e9a.zip

[Thavasianand Sankaranarayanan]

Hi Frankie, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that validation message is shown after the value has been entered in the input box. But we are unable to reproduce the reported issue from our end. 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132989/ze/SyncfusionMvcApplication111116350049.zip 

Please provide the following details for better assistance. 

1. Share the stack trace details, if you face any script errors in console.
2. Share the Essential Studio version details.
3. Share your referred JQuery version details.
4. If possible reproduce the issue in the attached sample.

Regards, 

Thavasianand S. 

[Frankie Moran]

Hi Thavasianand S. 

When I first load up the dialog template box there is no data in any of the fields. If I clicked submit the validation messages appear, if I then go and populate the fields with data the validation messages do not disappear once they are populated. 

Its like the validation messages are stuck when they are visible and won't disappear which is subsequently blocking the view of other input boxes. We need the validation messages to disappear once the input box has been populated or filled in.

Thanks,

Frankie

[Thavasianand Sankaranarayanan]

Hi Frankie, 

We have analyzed your query but we are unable to reproduce the reported issue from our end. 

Please provide the following details for better assistance. 

1. Share the stack trace details, if you face any script errors in console.
2. Share the Essential Studio version details.
3. Share your referred JQuery version details.
4. If possible reproduce the issue in the previously attached sample.

Regards, 

Thavasianand S. 

[Frankie Moran]

1. Stack trace:

2. Upgraded to the latest Syncfusion MVC (15.3.0.33)

3. Upgraded to the latest jQuery (3.2.1)

[Thavasianand Sankaranarayanan]

Hi Frankie, 

Sorry for the inconvenience caused. 

Query 1: “Cannot read property ‘settings’ of undefined” 

The reported issue is occurred due to that you have render the template inside the form element. We would like to let you know that we have used HTML form for editing grid records and hence placing the template inside a form will results in nested form elements(which is not a valid HTML markup and also the cause of the issue). So, we suggest you to remove the form element from the template. 

Find the code example. 

<script id="CreateNewContact" type="text/template"> 

    <form id="ContactForm"> 

 

       ----    

 

    </form> 

</script> 

  

Query 2: “Cannot read property ‘offsetTop’ of undefined” 

We can reproduce the mentioned issue in our sample with your code example. To avoid this issue, we need to define the ‘e-rowcell’ class for the div element in template.  

Find the code example. 

<script id="CreateNewContact" type="text/template"> 

     

    <div class="container"> 

        <div class="row"> 

            <div class="e-rowcell"> 

                --- 

           </div> 

        </div> 

        <div class="row"> 

            <div class="e-rowcell"> 

                --- 

           </div> 

        </div> 

        <div class="row"> 

            <div class="e-rowcell"> 

                --- 

           </div> 

        </div> 

        <div class="row"> 

            <div class="e-rowcell"> 

                --- 

           </div> 

        </div> 

 

    </div> 

</script> 

Query 3: Validation message is shown after editing the fields in template. 

We have analyzed your query and we suspect that you want to remove the validation message after the value gets edited or changed. So, we suggest you to set display none in the change event of ejMaskEdit control 

For an example, we have done it for “OrderID” column in Grid. 

Refer the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

             

          --- 

 

        .AllowPaging() 

         .Columns(col => 

          { 

             

           --- 

 

         }) 

         .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

       ) 

</div> 

 

<script type="text/javascript"> 

    function complete(args) { 

        if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "dialogtemplate") { 

            

            if (args.requestType == "add" || args.requestType == "beginedit") { 

 

                //Set Syncfusion Inputs 

                $("#OrderID").ejMaskEdit({ 

                    width: "100%", height: "42px", htmlAttributes: { name: "OrderID" }, 

                    change: function validatemsgRemove(e) { 

                         

                        this.wrapper.next().css('display', 'none'); // remove the validation message 

                    } 

                }); 

                 

               ---- 

 

   } 

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132989/ze/SyncfusionMvcApplication11873539131.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejmaskedit#events 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

Regards, 

Thavasianand S. 

[Frankie Moran]

Hi Thavasianand S. 

Thanks for that! The validation messages are disappearing now when I input text into the input boxes.

One last question, you seem to have solved all but 1 of the console errors. I am still getting this one:

Any ideas how to solve this one?

Much appreciated

Thanks,
Frankie

[Thavasianand Sankaranarayanan]

Hi Frankie, 

Query : “Unable to get property ‘executeQuery’ of undefined or null reference” 

For above issue we have checked the stack trace details which you have shared in last update. 

 

 

Depend upon the stackrace the mentioned issue is reproduce when the dataSource  property is not defined in ejGrid control.  

Find the code example:  

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

 

       // .Datasource((IEnumerable<object>)ViewBag.datasource) // if we comment the dataSource property then we able to reproduce your reported issue 

 

                    --- 

 

         .Columns(col => 

          { 

             

          -- 

 

          }) 

          

       ) 

 

 

 

But in your previously given code example you have define the dataSource property in ejGrid control.  

So, we need some more clarification on this issue for better assistance. 

1. Do you face above issue in initial rendering or while saving the data in Grid?
2. Share exact scenario or proper replication procedure to reproduce the issue.
3. If possible share the sample or reproduce the issue in the attached sample.

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132989/ze/SyncfusionMvcApplication11-1156847926.zip 

Regards, 

Thavasianand S.