js datepicker in grid not worked

[ALI]

hi

 I use JavaScript in the Grid column with Persian culture

But when I edit the dates with the datepicker selector, and click update toolbar ,the value of the columns or cells is not updated and has the same initial value

Is there a way other than a JavaScript datepicker to use Persian date in your grid or should we use this javascript datepicker?

thank you

Attachment: BlazorApp3_6946ae37.zip

[Renjith Singh Rajendran]

Hi Ali, 

Greetings from Syncfusion support. 

We suggest you to bind OnCellSave event of Grid. In this event handler, we suggest you to fetch the Date value entered in DatePicker by calling a JavaScript method using the Microsoft.JsInterop. And return the value from the JavaScript method to update in cell.  

We have modified the sample based on this scenario. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/JsDatePicker1447397192 

 

Please refer and use the codes below, 

 

<GridEvents OnBatchSave="BatchSaveHandler" OnCellSave="OnCellSave" TValue="EmployeeData"></GridEvents> 

public async Task OnCellSave(CellSaveArgs<EmployeeData> args){    if(args.ColumnObject.Field == "OrderDate")    {        var DateVal = await JSRuntime.InvokeAsync<string>("GetDateValue", args.RowData.EmployeeID);        args.Value = DateVal;    }}

[JavaScript.js] 

function GetDateValue(selector) {    var DateVal = $('#' + selector+'').MdPersianDateTimePicker('getText');    return DateVal;}

https://blazor.syncfusion.com/documentation/datagrid/events/#oncellsave 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[ALI]

Hi Renjith Singh Rajendran

Works when editing a record, 

but does not work when add new record and does not show the datepicker

how to resolve it ?

Why does the following error occur when add record with Persian culture?

Errors:

blazor.server.js:19 [2020-08-31T18:28:01.328Z] Error: System.FormatException: Input string was not in a correct format.

   at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)

   at System.Double.Parse(String s, IFormatProvider provider)

   at Syncfusion.Blazor.Inputs.SfNumericTextBox`1.focusOutHandler(FocusEventArgs args)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Syncfusion.Blazor.Inputs.Internal.SfInputBase.onBlur(FocusEventArgs args)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

We have to string the fields so that this error is not show.

 Is this a bug in your component with Persian culture?

thank you

[Renjith Singh Rajendran]

Hi Ali, 

Query 1 : but does not work when add new record and does not show the datepicker 

We have analyzed the reported scenario. We have modified the sample based on this scenario. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/JsDatePicker1950361636 

 

In the above sample, we have set the id for the corresponding input element as like the Field name value, instead of assigning dynamic id values to overcome the problem you are facing. Please refer the codes below, 

 

<EditTemplate> 

    @{ 

        var Employee = (context as EmployeeData); 

        <input type="text" id="OrderDate" class="form-control" placeholder="Gregorian Calendar"> 

 

        JSRuntime.InvokeAsync<object>("createComponent", "OrderDate"); 

    } 

</EditTemplate> 

public async Task OnCellSave(CellSaveArgs<EmployeeData> args){    if(args.ColumnObject.Field == "OrderDate")    {        var DateVal = await JSRuntime.InvokeAsync<string>("GetDateValue", "OrderDate");        args.Value = DateVal;    }}

Query 2 : Why does the following error occur when add record with Persian culture? 

We have analyzed the shared exception details and we would like to inform you that, the reported exception has been resolved with our latest Syncfusion release versions 18.2.0.55. We have prepared the above attached sample with our latest version. So kindly upgrade to our latest version to overcome the problem you are facing.  

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[ALI]

Hi Renjith Singh Rajendran

Thank you

When we change the date of several cells and return to the previous cell and select the datepicker, it has changed to the original value again

and also ,grid only accepts the decimal or double type for numeric field 

and has an errors with int type and Persian culture

in above sample when change EmployeeId to int and add new record and entry value to EmployeeId column thrown an exceptions:

blazor.server.js:19 [2020-09-01T11:38:09.321Z] Error: System.FormatException: Input string was not in a correct format.

   at System.Number.ThrowOverflowOrFormatException(ParsingStatus status, TypeCode type)

   at System.Number.ParseDecimal(ReadOnlySpan`1 value, NumberStyles styles, NumberFormatInfo info)

   at System.Decimal.Parse(String s, IFormatProvider provider)

   at Syncfusion.Blazor.Inputs.SfNumericTextBox`1.validateStep()

   .....

Is there a way to use your datepicker instead of this Persian datepicker in grid?

[Renjith Singh Rajendran]

Hi Ali, 

 

Query 1 : When we change the date of several cells and return to the previous cell and select the datepicker, it has changed to the original value again 

We have analysed this reported scenario from our side. And we could see that this behaviour occurred because of using the selectedDate property of you custom DatePicker MdPersianDateTimePicker. As the value in this property is always new Date('2018/9/30'), this same value got displayed in the DatePicker each time you edit a cell. So we suggest you to ensure to handle the value set for this property based on your requirement, to overcome this behaviour. 

 

 

$('#'+selector+'').MdPersianDateTimePicker({ 

    targetTextSelector: '#' + selector +'', 

    selectedDate: new Date('2018/9/30'),       //set the value to display

    isGregorian: false, 

    ... 

}); 

 

 

We suggest you to handle these scenario by analysing the MdPersianDateTimePicker plugin you have used. 

 

Query 2 : Is there a way to use your datepicker instead of this Persian datepicker in grid? 

As discussed in this thread 157046, we do not have support for Islamic/ Persian calender so we have considered this requirement “Need to provide support for Islamic/Persian calender” as a feature This feature is expected to be rolled out in any of our upcoming releases. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below feedback link.  

Feedback : https://www.syncfusion.com/feedback/17179/need-to-provide-islamic-calendar-support-in-blazor 

 

Query 3 : grid only accepts the decimal or double type for numeric field and has an errors with int type and Persian culture 

We have validated the reported exception. Since currently we don’t have support for native digits in our controls, the exception has occurred. We have consider this support in our upcoming Volume 3 2020 release. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through below links 

Feedback link: https://www.syncfusion.com/feedback/17612 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith Singh Rajendran 

[ALI]

Thank you for all your answers

resolved with this changes

<EditTemplate>

                @{

                    var Employee = (context as EmployeeData);

                    <input type="text" id="OrderDate" class="form-control" placeholder="Gregorian Calendar">

                    JSRuntime.InvokeAsync<object>("createComponent", "OrderDate", ToMiladi(Employee?.OrderDate));

                }

            </EditTemplate>

 public  DateTime ToMiladi( string shamsi)

    {

        if (string.IsNullOrEmpty(shamsi)) return DateTime.Now;

        var r = new Regex(@"^$|^([1۱][۰-۹ 0-9]{3}[/\/]([0 ۰][۱-۶ 1-6])[/\/]([0 ۰][۱-۹ 1-9]|[۱۲12][۰-۹ 0-9]|[3۳][01۰۱])|[1۱][۰-۹ 0-9]{3}[/\/]([۰0][۷-۹ 7-9]|[1۱][۰۱۲012])[/\/]([۰0][1-9 ۱-۹]|[12۱۲][0-9 ۰-۹]|(30|۳۰)))$");

    // var isdate= r.IsMatch(shamsi);

        var match = r.Match(shamsi);

        if (!match.Success && match.Index == 0)

            return DateTime.Now;

        for (var i = 48; i < 58; i++)

        {

            if (!string.IsNullOrEmpty(shamsi))

                shamsi = shamsi.Replace(Convert.ToChar(1728 + i), Convert.ToChar(i));

        }

        var pc = new PersianCalendar();

        var dt = Convert.ToDateTime(pc.ToDateTime(Convert.ToInt32(shamsi.Substring(0, 4)),

            Convert.ToInt32(shamsi.Substring(5, 2)),

            Convert.ToInt32(shamsi.Substring(8, 2)), 0, 0, 0, 0, PersianCalendar.PersianEra)

            );

        return dt;

    }

//javascript change

(function (global) {

    global.createComponent = (selector,current) => {

        // prepare the data

       // debugger;

       $('#' + selector + '').MdPersianDateTimePicker({

            targetTextSelector: '#' + selector +'',

            selectedDate: new Date(current),

            isGregorian: false,

            dateFormat: 'yyyy-MM-dd',

            calendarViewOnChange: function (date) {

                console.log(date);

            }

        });

    }

})(window);

[Renjith Singh Rajendran]

Hi Ali, 

Thanks for your update. 

We are glad to hear that you have achieved your requirement.  

Please get back to us if you need further assistance. 

Regards, 

Renjith R