We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dialog Template Editing Validation

Thread ID:

Created:

Updated:

Platform:

Replies:

132989 Oct 2,2017 10:35 AM UTC Oct 12,2017 02:50 PM UTC JavaScript 7
loading
Tags: ejGrid
Frankie Moran
Asked On October 2, 2017 10:35 AM UTC

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 [Syncfusion]
Replied On October 4, 2017 12:47 PM UTC


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. 


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
Replied On October 4, 2017 03:17 PM UTC

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 [Syncfusion]
Replied On October 5, 2017 01:41 PM UTC

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
Replied On October 6, 2017 02:08 PM UTC

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 [Syncfusion]
Replied On October 10, 2017 02:09 PM UTC

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. 


Refer the help documentation. 



Regards, 
Thavasianand S. 


Frankie Moran
Replied On October 11, 2017 06:31 AM UTC

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 [Syncfusion]
Replied On October 12, 2017 02:50 PM UTC

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. 


Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;