1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. When editing cell with custom TimePicker component, when property enableMask = true, when editing value, the value is lost

When editing cell with custom TimePicker component, when property enableMask = true, when editing value, the value is lost

I think i found a bug. I use 'pt-PT' localization and is EJ2 MVC Grid.

I have this column, DateTime field in BD and ViewModel, in one of my grids:

col.Field(c => c.Inicio).Type("date").Format(new { type = "date", format = "HH:mm" }).EditType("datetimepickeredit")
                                        .Edit(new { @params = new Syncfusion.EJ2.Calendars.TimePicker { ShowClearButton = false }, create = "createTimePicker", read = "readTimePicker", write = "writeTimePicker" })
                                        .TextAlign(TextAlign.Center)
                                        .Width(100)
                                        .Add();



with javascript code:

function createTimePicker(args) {
    return document.createElement('input');
}

function writeTimePicker(args) {
    let timeObj = new ej.calendars.TimePicker({
        format: args.column.edit.params?.format ?? 'HH:mm',
        value: new Date(args.rowData[args.column.field]),
        //enableMask: true,
        step: args.column.edit.params?.step ?? 30,
        showClearButton: args.column.edit.params?.showClearButton ?? true
    });
    timeObj.appendTo(args.element);
}

function readTimePicker(args) {
    return args.value;
}


If i disable the 'enableMask' property it works like it should.

If i enable it, when i try to edit a previous saved value, the value is lost. It defaults to the '00:00' value.

My goal is to use the mask function to be able to insert the time without having to go to the ':' key.

And if possible, when i click the cell, put the cursor all to the left part of the input box to start typing.

Thanks


10 Replies
BS Balaji Sekar Syncfusion Team October 18, 2021 04:35 PM UTC

Hi Emiliano, 

Greetings from the Syncfusion support. 

We are validating your query with provided information and we will update further details by tomorrow(October 19, 2021) 

Regards, 
Balaji Sekar 


BS Balaji Sekar Syncfusion Team October 20, 2021 06:20 PM UTC

Hi Emiliano, 
 
Thanks for your valuable patience, 
 
We checked the editing values is lost issue when editing custom TimePicker component with enabled the enableMask property and found that read function of cellEditTemplate as return string value instead of date object it is cause of the problem. Since we suggest you to create a TimePicker component in write function using global variable(timeObj) and you can access the selected time value in read function properly and it should return on that function then it will save to respective row properly. 
 
Please refer the below code example and sample for more information.  



@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 
    col.Field("EmployeeID").HeaderText("Employee ID").Add(); 
    col.Field("CustomerID").HeaderText("CustomerID").Add(); 
    col.Field("OrderDate").HeaderText("Order Date").Type("date").EditType("datetimepickeredit").Width("150").Format(new { type = "datetime", format = "HH:mm" }).Edit(new { @params = new Syncfusion.EJ2.Calendars.TimePicker { ShowClearButton = false }, create = "createTimePicker", read = "readTimePicker", write = "writeTimePicker", destroy="destroyTimePicker" }).Add(); 
 
}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
     
</div> 
 
<script> 
 
    var timeObj, timepicEle; 
    function createTimePicker(args) { 
        return document.createElement('input'); 
    } 
 
    function writeTimePicker(args) {         
        timeObj = new ej.calendars.TimePicker({ 
            format: args.column.edit.params?.format ?? 'HH:mm', 
            value: new Date(args.rowData[args.column.field]), 
            enableMask: true, 
            step: args.column.edit.params?.step ?? 30, 
            showClearButton: args.column.edit.params?.showClearButton ?? true 
        });         
        timeObj.appendTo(args.element); 
    } 
 
    function readTimePicker(args) {         
        return timeObj.value; 
    } 
    function destroyTimePicker() { 
        timeObj.destroy(); 
    } 


Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar 


EM Emiliano October 21, 2021 01:05 PM UTC

Some problems i detected:

  • If i have two columns with timepickers, the 'destroy' function crashes. Cause the object it's destroyed in the first cell.
  • Cant exit the cell when using tab to change fields when editing a row
  • When pressing keys to insert the time, if i put some number with the hours below 10, it will not insert the correct time. If i want to insert 01:15, it changes to 11:05. I believe that the 0 is not considered.


BS Balaji Sekar Syncfusion Team October 22, 2021 05:48 PM UTC

Hi Eddie, 

Thanks for your update. 

Query #1: If i have two columns with timepickers, the 'destroy' function crashes. Cause the object it's destroyed in the first cell. 
Before validate the reported above problem, please share the code example of Grid rendering with timepickers. 
 
Query #2: Cant exit the cell when using tab to change fields when editing a row 
      We are unable to replicate the mentioned problem so, please share the video demonstration of the mentioned problem to us that will help to validate further. 
 
Query #3: When pressing keys to insert the time, if i put some number with the hours below 10, it will not insert the correct time. If i want to insert 01:15, it changes to 11:05. I believe that the 0 is not considered. 
       Currently we are validating the reported query and we will update further details on October 25, 2021 

Until then we appreciate your valuable patience. 

Regards, 
Balaji Sekar. 


EM Emiliano October 22, 2021 06:29 PM UTC

Query1:

You can use your sample, and just need to duplicate the grid column 'OrderDate'. Check the video i send.

Sample link: https://www.syncfusion.com/downloads/support/forum/169684/ze/Grid-CellEditTemplate-220030552.zip



Attachment: errors_2842e6b1.zip


BS Balaji Sekar Syncfusion Team October 25, 2021 03:30 PM UTC

Hi Eddie, 

Thanks for your update. 

We are validating the focus-out problem when multiple timepicker component bound in Grid column using cellEditTemplate feature and we will update further details by tomorrow(Oct 25, 2021). 

Regards, 
Balaji Sekar. 


BS Balaji Sekar Syncfusion Team October 27, 2021 07:32 AM UTC

Hi Eddie, 

Thanks for your patience. 

We checked the reported problem and we are able to reproduced the cannot exit the cell when using tab to change fields when editing a row in the timepicker editing since we forwarded to concern team to validate and we will update further details on October 28, 2021 

Until then we appreciate your valuable patience. 

Regards, 
Balaji Sekar. 


BS Balaji Sekar Syncfusion Team October 28, 2021 10:06 AM UTC

Hi Meir, 

Query 1: Focus-out is not working using tab key on Tmepicker when enabled EnableMask property.  
 We were able to reproduce the reported issue. So, we will validate and update the further details in two business days (29th October 2021).  

Query 2: When pressing keys to insert the time, if i put some number with the hours below 10, it will not insert the correct time. If i want to insert 01:15, it changes to 11:05. I believe that the 0 is not considered.  
We would like to inform you that, this is not issue at our end. If the mask property enabled, then typed value will be updated based on the digit and valid value such as if the input having value as “21:30” then you have entered the new value as “5” then the timepicker will update the value as “05:30”. Else, if the input value having “02:30” then you have entered the value as “2” then it will be considered as valid value and displayed “22:30” or if you have entered “8’ and it will be replaced by “08” since there is no valid time value in the format of “28”. This is the default behavior of the mask property.  


Regards, 
Balaji Sekar. 


EM Emiliano October 28, 2021 05:05 PM UTC

Query2:

A mask property is to format the data you type in the correct places.

If i want the value "22:30", i only press the keys "2", "2", "3" and finally "0". And the value it will be "22:30".

BUT if i want the value "01:15", the default behaviour shouldn't be to press "0", "1", "1" and finally "5"?

Do you know what value it will be? "11:05". Did i type that? No. I think it's wrong.

Tell me which keys i should press to have "01:15" using only the numerical keypad.

If it's a mask property, i shouldn't need to control the cursor with diretional keys, to control what is hours and minutes, and worst, only when the hours are below 10!

Because my goal is to change input fields with tab key and only press numerical keypad to input hours and minutes, in several fields...


DR Deepak Ramakrishnan Syncfusion Team November 1, 2021 05:10 PM UTC

Hi Emiliano, 
 
 
Thanks for the update. 
 
 
We have validated the issue in our end with the provided details and found that it was a known issue and resolved  at the release version 19.3.43 .So we request you to upgrade the package to the mentioned version or the latest to avail the fix for it. 
 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon