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. Image for the cookie policy date

Validation on datepicker in Grid template

Hi,
I need to set the date format based on the culture used in the login,
this is the code I use in the view:

@{
    Layout = "~/Views/Shared/_Master.cshtml";
    ViewBag.Title = PLV.Web.Resources.Contratti.TitoloPagina;
    string datePattern = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
}

col.Field("DataContratto").Format("{0:" + datePattern + "}").EditType(EditingType.DateTimePicker).Add();

if (args.requestType == "beginedit" || args.requestType == "add") {
                $("#DataContratto").ejDatePicker({
                        locale: "@CultureInfo.CurrentCulture.TextInfo.CultureName",
                        width: '100%',
                        watermarkText: "@PLV.Web.Resources.Common.Selezionare",
                        buttonText:"@PLV.Web.Resources.Common.DataCorrente"
                });

….

The problem arises in the validation of dates, because each date entered generates an validity error.
I found that the date format set on the DatePicker controls correspond to the culture used.

Luca

11 Replies

MP Manivannan Padmanaban Syncfusion Team September 27, 2019 03:30 AM

Hi Luca, 

Greetings from Syncfusion Support. 

Query: The problem arises in the validation of dates, because each date entered generates an validity error. 

From the above query, we are able to understand that you have facing an issue with applying the localization to the DateTimePicker field. After validating the issue we could see that the DateTimePicker ID is taken incorrectly. In edit mode, Grid ID followed by the field name will give you the DateTimePicker ID. Refer the below code example, 

@{ 
    ……………… 
 
    string datePattern = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern; 
} 
@(Html.EJ().Grid<object>("FlatGrid") 
                ……………. 
                .Columns(col => 
                { 
………………………………………… 
                    col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(100).Format("{0:" + datePattern + "}").EditType(EditingType.DateTimePicker).Add(); 
 
                }) 
) 
 
<script> 
    function complete(args) { 
        if (args.requestType == "beginedit" || args.requestType == "add") { 
            $("#FlatGridOrderDate").ejDatePicker({  // Grid ID followed by the field name. 
                locale: "@CultureInfo.CurrentCulture.TextInfo.CultureName", 
                width: '100%' 
            }); 
        } 
    } 
</script> 

Still facing the issue, please get back to us with the below details. 

  1. Share the Exact issue are you facing in detail.
  2. Share screenshot Or video demonstration of the issue.
  3. Share the complete Grid code example.

Regards, 
Manivannan Padmanaban. 



PL Pio Luca Valvona September 27, 2019 08:33 AM


Hi Manivannan,

If "Grid ID followed by the field name will give you the DateTimePicker ID", the Dropbox of the date disappears in the template. While debugging I verified that the DateTime control is localized correctly (it-IT) but, as you can see from the image, when inserting a date in the format dd/mm/yyyy, I get the error message. I think it's a date validation issue.
I'm attaching the code to the whole view.



Attachment: Contratti_dd928040.zip


MP Manivannan Padmanaban Syncfusion Team September 30, 2019 05:02 AM

Hi Luca, 

Thanks for the details. 

From the shared screenshot, we are able to understand that you have facing an date validation issue while entering the date in the datepicker but we are unable to reproduce the reported issue at our end. For your convenience we have created the sample based on the shared code example, kindly refer the below link for sample. 

After referred the above link, still facing the issue kindly get back to us with the below details. 

  1. Reproduce the reported issue in the shared sample Or share the issue reproducible sample.
  2. Share the Essential Studio version are you using.

Provided details will help us, to resolve the reported issue as earlier as possible. 

Regards, 
Manivannan Padmanaban. 
 



PL Pio Luca Valvona October 1, 2019 01:48 AM

Hi Manivannan,
thank you for support,

I saw the code in the example is I modified mine reporting the same changes.
But the problem recurs.
Can it be caused by using jquery.validate?
The version of Syncfusion used is: 17.2450.0.5.
The page originally worked, the problem occurred in the last builds, but they did not affect changes to the page.

Luca


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 2, 2019 07:43 AM

Hi Luca, 

We are unable to reported problem at our end even at the latest version. We need some more additional details to find the cause of the issue. Share us the following details. 

  1. If possible replicate the issue in the above sample and revert us back.
  2. Share us the video Demo to replicate the issue.
  3. Share your Layout page.

Regards, 
Farveen sulthana T 



PL Pio Luca Valvona replied to Farveen Sulthana Thameeztheen Basha October 2, 2019 09:01 AM

Hi Luca, 

We are unable to reported problem at our end even at the latest version. We need some more additional details to find the cause of the issue. Share us the following details. 

  1. If possible replicate the issue in the above sample and revert us back.
  2. Share us the video Demo to replicate the issue.
  3. Share your Layout page.

Regards, 
Farveen sulthana T 


Hi Farveen,
thank you for support,

unfortunately I can't replicate the problem, but what I can tell you with certainty is that commenting on the following two lines in the BundleConfig would seem that the problem does not occur.

                        "~/Scripts/jquery.validate.min.js",
                        "~/Scripts/jquery.validate.unobtrusive.min.js",


At this point I think that, as I indicated in the previous post, it is due to the validation of Jquery.
Do you know if you can take action to keep this validation enabled?


MP Manivannan Padmanaban Syncfusion Team October 2, 2019 10:06 PM

Hi Luca, 

Thanks for the update. 

Grid uses the jquery.validate for validating the form fields. In this case, the change in the format of the Grid column fields will be validated differently by the jquery.validate. Due to this the reported issue will occur, in order to avoid the reported issue we suggest you to return the jquery validate as mentioned below. 

 
@(Html.EJ().Grid<object>("Grid")  
………………………….. 
                .Columns(col =>  
                {  
                    ……………… 
                });  
)  
  
 
 
 
<script>  
    jQuery.validator.methods["date"function (value, element) {  
        return true;  
    }  
</script>  


Regards, 
Manivannan Padmanaban. 



PL Pio Luca Valvona replied to Manivannan Padmanaban October 3, 2019 01:22 AM

Hi Luca, 

Thanks for the update. 

Grid uses the jquery.validate for validating the form fields. In this case, the change in the format of the Grid column fields will be validated differently by the jquery.validate. Due to this the reported issue will occur, in order to avoid the reported issue we suggest you to return the jquery validate as mentioned below. 

 
@(Html.EJ().Grid<object>("Grid")  
………………………….. 
                .Columns(col =>  
                {  
                    ……………… 
                });  
)  
  
 
 
 
<script>  
    jQuery.validator.methods["date"function (value, element) {  
        return true;  
    }  
</script>  


Regards, 
Manivannan Padmanaban. 


Hi Manivannan,
thank you for support,

The code you gave me works well.
Is there a way to put it in an external file, so I don't change all views?


MP Manivannan Padmanaban Syncfusion Team October 3, 2019 10:46 PM

Hi Luca, 

As per your request, we have added the solution in the separate js file. Kindly refer the below link for js file. 

Note: Refer the above js file after the ej.web.all.min.js reference. 

Regards, 
Manivannan Padmanaban. 



PL Pio Luca Valvona replied to Manivannan Padmanaban October 16, 2019 01:05 AM

Hi Luca, 

As per your request, we have added the solution in the separate js file. Kindly refer the below link for js file. 

Note: Refer the above js file after the ej.web.all.min.js reference. 

Regards, 
Manivannan Padmanaban. 


Hi Manivannan,
thank you for support,

Now everything works well.


MP Manivannan Padmanaban Syncfusion Team October 16, 2019 02:25 AM

Hi Luca, 

Thanks for the update. 

We are pleased to hear that the reported problem has been resolved. If you need further assistance, please get back to us. 

Regards, 
Manivannan Padmanaban. 


Loader.
Live Chat Icon For mobile
Up arrow icon