1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. ejs-for

ejs-for

Hi support, i would like to use the js2 datepicker but for now i have e problem with the ejs-for option.

When i try to set the ejs-for ( like i as do with the ej-for js1 option ) to a model field, the content is empty. The model field is filled with the correct vaue coming from the db,

This is my declaration:

"ejs-datepicker id="birthDate" ejs-for="People.BirthDate" format="dd/MM/yyyy" locale="it" placeholder="Selezionare una data" created="birthDateCreate">

I'e use a string and a datetime definition for the model field and the result is the same

when i use the javascript creation for this field, the content is showed correctly.

At the moment to bypass the problem i've used the created event of the darepicker

Thanks for help
Stefano

10 Replies
PK Prem Kumar Madhan Raj Syncfusion Team July 3, 2018 12:59 PM UTC

Hi Stefano, 

Sorry for the inconvenience. 

The reported issue “DatePicker value becomes null when model value is binded” is already a known issue at our end and also we have fixed this issue with our patch release been released today (3rd July 2018). So, please make use of the update scripts (CSS and Source files) to resolve this issue at your end.  

Also please make sure to add the name attribute to the DatePicker component as same as that of the model variable name in order obtain the value on post back as shown below. 

<ejs-datepicker id ="birthDate" name="BirthDate" ejs-for="People.BirthDate" format ="dd/MM/yyyy" locale ="it" placeholder ="Selezionare una data" created ="birthDateCreate" ></ejs-datepicker> 

Please let us know if you need any further assistance. 

Regards, 

Prem Kumar M 


SC Stefano Capobianco July 4, 2018 05:57 AM UTC

Thanks Prem, but today 4/7 i can't find the patch inside the nuget package ( released date is 28/6) where is it ?

Thanks
Stefano

CF Cristian Filipe Fernandes July 4, 2018 06:13 PM UTC

Hi,

I'm with the same problem and when I use Globalization/Localization on the datepicker I had the error below.

In the Grid the globalization is ok.
Regards,
Cristian Filipe


SC Stefano Capobianco July 4, 2018 07:00 PM UTC

Try the following:
1) in layout add the following code
"
    <script type="text/javascript" id="loadCultureFiles">
        function loadCultureFiles(name) {
            var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

            var loader = ej.base.loadCldr;

            var loadCulture = function (prop) {
                var val, ajax;

                ajax = new ej.base.Ajax(location.origin + '/lib/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

                ajax.onSuccess = function (value) {
                    val = value;
                };
                ajax.send();
                loader(JSON.parse(val));
            };
            for (var prop = 0; prop < files.length; prop++) {
                loadCulture(prop);
            }

            ej.base.setCulture(name);
            ej.base.setCurrencyCode('EUR');
        }

    </script>

    <script type="text/javascript">
        loadCultureFiles('it')
    </script>
"
2) install cldr-data package (i use bower) 
3) add the main directory under cldr-data (for my in the wwwroot/lib)
4) add language code inside main folfer ( so for me is wwwroot/lib/cldr-data/it )
5) download the file listed in index.json (i've downloaded only ca-generic, ca-gregorian, currencies, numbers, timeZoneNames) 
6) in your page the followin js code
"
    ej.base.L10n.load({
        "it": {
            "datepicker": {
                "today": "Oggi",
            },
        }
    });

"
I hope that can you help
Stefano


PK Prem Kumar Madhan Raj Syncfusion Team July 5, 2018 01:13 PM UTC

Hi Jonas,    
    
Query1: I'm with the same problem and when I use Globalization/Localization on the datepicker I had the error below 
    
Answer: We have looked into your query and sorted-out the root cause for the issue. The cause for the issue is loading the culture files after the page content is loaded and defining the locale property of the Date Picker component initially, which causes the error while parsing the value with respect to the locale value at script level. So, we suggest you to assign the locale property of the Date Picker component after the culture files are loaded instead of defining initially and load the required files initially on document load function as shown in the below code snippet. 
 
< @using (Html.BeginForm()) 
{ 
    <ejs-datepicker id='BirthDate' ejs-for="@Model.BirthDate" placeholder="Selezionare una data"></ejs-datepicker> 
} 
 
 
<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        datepicker = document.getElementById('BirthDate').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'it': { 
                'datepicker': { 
                    today: "Oggi", 
                } 
            } 
        }); 
        loadCultureFiles('it'); 
 
    }); 
 
 
    function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            debugger; 
            ajax = new ej.base.Ajax(location.origin + location.pathname + './scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);  
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
        ej.base.setCulture(name); 
        ej.base.setCurrencyCode('EUR'); 
    } 
 
</script> 
 
Please ensure that the required JSON files are available in the specified location. 

Query2: i can't find the patch inside the nuget package ( released date is 28/6) where is it ? 
 
Answer: The fix has been included with script file ej2.min.js and not with the nuget packages. So please ensure to refer the updated script file (ej2.min.js (CDN will be preferred)) in your application to resolve this issue at your end. 

Foy your convenience, we have also attached a sample in the below link. Please check it. 


Regards, 

Prem Kumar M

CF Cristian Filipe Fernandes July 5, 2018 03:16 PM UTC

Hi,

I already did this steps of the Query1 and it work for almost all components, but it only work if I use without "ejs-for" in datepicker case. 

The image below show in what point of the JS the error happen



This is my CLDR Configuration.



This is the datepicker working without the "ejs-for"


Thanks,
Cristian Filipe






SC Stefano Capobianco July 5, 2018 04:45 PM UTC

Thanks Prem Kumar M, the solution work very well but i need to convert the filed in a string and formatted as dd/MM/yyyy. When i use directly a datetime i have a problem.


As you can see in the print screen, the BirthDate (Data di nascita) is ok but the PatientFrom (Paziente dal) is format with hh:mm:ss.
I've used the cdn in my _Layout and i think the script is updated.

This is the css
        <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/bootstrap.css" />

This is the Js
        <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

It's possible to have locally this script like the JS1 ?

Thanks 
Stefano

PK Prem Kumar Madhan Raj Syncfusion Team July 6, 2018 03:03 PM UTC

Hi Stefano, 

Thanks for the update. 

Query1: It's possible to have locally this script like the JS1 ? 
 
Answer: Yes, you can find the script file locally in the build installed location, but we suggest you to make use of the CDN link because only the CDN source file will be updated for each patch release that is being released every week (fixes moved every week will be included).  

Query2: but i need to convert the filed in a string and formatted as dd/MM/yyyy. When i use directly a datetime i have a problem 
 
Answer: We suspect that the patient from DatePicker may have been provided with a specific date format to display the date along with the time value, if so then please make sure that the format is specifies properly as per your requiement. Also, please check for the sample in the previous update where we have assigned a model value of type DateTime to update the value to DatePicker component.  

If this is not your case, then please get back to us with more information along with code blocks of DatePicker initialization and model binding so that we can provide an exact solution for your requirement. 

Regards, 

Prem Kumar M 


FL Flavio May 23, 2019 01:06 PM UTC

Hello Support,
Could you please let me know if for the ejs-datepicker component for ASP.NET Core, if it is possible to have a OnChange Server side event so I could retrieve data from the DB using the date selected by the user?

I understand that for Razor OnGetEventA() handler is necessary for the c# code processing in the cshtml.cs file. However, I'm struggling to find a solution for the following scenario:
1) User selects a date:
2) Right after selecting a date, that is, changing the date entered in the datepicker control, I would like to update my form controls with values from the database, using the date entered. I guess AJAX would be a solution for that.

How can I do that in ASP.NET Core - Razor (not MVC)?

Thanks,
Flavio

AB Ashokkumar Balasubramanian Syncfusion Team June 4, 2019 12:17 PM UTC

Hi Flavio 
 
Currently, ASP.NET Core platform doesn’t have the support for server-side events, so we were unable to provide this support for our Syncfusion DatePicker component. For this case, we suggest use the AJAX call to save the data in server side. 
 
Please let us know, if you have any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon