Validation on datepicker in Grid template

[Pio Luca Valvona]

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

[Manivannan Padmanaban]

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. 

[Pio Luca Valvona]

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

[Manivannan Padmanaban]

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. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplicationold-1653588904.zip  

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. 

 

[Pio Luca Valvona]

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

[Farveen Sulthana Thameeztheen Basha]

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 

[Pio Luca Valvona]

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?

[Manivannan Padmanaban]

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. 

[Pio Luca Valvona]

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?

[Manivannan Padmanaban]

Hi Luca, 

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

https://www.syncfusion.com/downloads/support/directtrac/general/ze/script1920984098.zip  

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

Regards, 

Manivannan Padmanaban. 

[Pio Luca Valvona]

Hi Luca, 

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

https://www.syncfusion.com/downloads/support/directtrac/general/ze/script1920984098.zip  

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.

[Manivannan Padmanaban]

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.