Wj-input-date gets disappear after cell selection in wijmo flex grid

Wj-input-date gets disappear after cell selection in wijmo flex grid

Posted by: mayank.topiwala on 25 July 2019, 8:53 am EST

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 July 2019, 8:53 am EST

  Hi,
  
  We have a licensed version of wijmo flex grid and we have one requirement in which we need to let user to select date from date-time-picker from the cell in wijmo flex grid. Initially there is no data available in grid and we are allowing user to enter the data manually. I have tried below approach to select date from date-time-picker but when I select the date, it doesn’t gets bind into cell and I have got the exception in console: * “Assertion failed in Wijmo: Date expected.”
  
  . Can you please look into this issue ?

   <wj-flex-grid-column header="Addition Date" binding="additionDate" width="*" [minWidth]="minColumnWidth">
          <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
            <wj-input-date [(value)]="cell.value"></wj-input-date>
          </ng-template>
        </wj-flex-grid-column>
  

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 25 July 2019, 12:46 pm EST

  hi Team, any update on this issue ?

  –
  
  Thanks,
  
  Mayank

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 12:28 am EST

  Hi Mayank,

  Sorry for the delayed response.

  To edit the date in FlexGrid’s cell using InputDate, you will need to use a custom grid editor. Please refer to the link below:

  https://www.grapecity.com/wijmo/demos/Grid/Editing/CustomEditors/purejs

  Regards,
  
  Ashwin

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 12:16 pm EST - Updated 3 October 2022, 3:26 pm EST

  Thanks Ashwin, I can able to bind date using this Custom-grid-editor. However, I have few questions:

  1. Can we make user to select date-time-picker by directly click on the cell (just like we have dataMap: down-arrow icon) instead of double-click-on it and put the cell in edit mode.
  2. How to format the date to ‘dd/MM/yyyy’ format ?
  3. The date gets re-positioned from its cell while doing editing. How to make the correct alignment ? I have attached the screenshot for your reference.

  Many thanks for your help.

  

  1085×249 9.45 KB

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 12:17 pm EST - Updated 3 October 2022, 3:26 pm EST

  Thanks Ashwin, I can able to bind date using this Custom-grid-editor. However, I have few questions:

  1. Can we make user to select date-time-picker by directly click on the cell (just like we have dataMap: down-arrow icon) instead of double-click-on it and put the cell in edit mode.
  2. How to format the date to ‘dd/MM/yyyy’ format ?
  3. The date gets re-positioned from its cell while doing editing. How to make the correct alignment ? I have attached the screenshot for your reference.

  Many thanks for your help.

  

  1085×249 9.45 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2019, 1:52 am EST

  Hi Mayank,

  1. We are sorry but due to the design of CustomGridEditor, we cannot show a drop-down icon for editing. But, we can start editing the grid on a single click by handling the FlexGrid’s click event and calling the startEditing method on the current row and column. Refer to the code snippet below:

  grid.hostElement.addEventListener('click', function(e) {
  			var hti = grid.hitTest(e);
  			if(hti.cellType == wjcGrid.CellType.Cell) {
  				grid.startEditing(true, hti.row, hti.col);
  			}
  		})
  

  2. All of the input controls used as a custom grid editor can be customized as per requirement. So, to format the date in the provided format, you need to set the format property. Please refer to the code snippet below:

  new CustomGridEditor(grid, 'date', wjcInput.InputDate, {
  			format: 'dd/MM/yyyy'
  		});
  

  3. We were able to replicate the issue at our end so we have forwarded the issue to the concerned team for further investigation with internal tracking id 392016. We will give you an update on the issue as soon as we hear from them. In the meantime, you can use the CustomGridEditor class provided in the sample attached.

  FlexGrid_CustomGridEditor.zip

  Regards,
  
  Ashwin

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 29 July 2019, 6:31 am EST - Updated 3 October 2022, 1:26 pm EST

  Thanks Ashwin, issue 1 and 2 gets fixed with this approach and even the mis-alignment of date-time-picker somehow also gets fixed with the click event handler of the grid until the website is not responsive. Once I change the layout of website; the date-time-picker control gets misaligned. So I am looking forward for the fix from your support team.
  
  I also have one more requirement in which user can select only year and values may be future year, so validation should not restrict this. So can we handle this requirement from the input-date coz I don’t want user to select complete date (day/month). Looking forward for your response.

  Many Thanks,
  
  Mayank

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 29 July 2019, 1:15 pm EST

  Hi Ashwin- Any update on this issue ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 30 July 2019, 12:28 am EST

  Hi Mayank,

  We are sorry but currently, it is not possible to select year only in InputDate. But we have added an enhancement request for the same with internal tracking id 392149. We will give you an update as soon as this feature is implemented.

  Also, the CustomGridEditor class is not in the official build of wijmo, so you can customize it as per requirement. Therefore, you can change the position of the InputDate control as you wish.

  Regards,
  
  Ashwin

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 30 July 2019, 11:44 am EST

  Hi Mayank,

  The misalignment issue was in the sample itself. Please try using the CustomGridEditor class from the updated sample attached.

  Let us know if this solves the issue for the responsive webpages.

  Custom Editor updated.zip

  ~regards

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 1 August 2019, 6:32 am EST - Updated 3 October 2022, 1:26 pm EST

  Ok let me check this.

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 1 August 2019, 8:07 am EST

  Yes Ashwin, it is working as expected now. Thank you. Please let me know if you find any relevant control for the year.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 August 2019, 12:38 am EST

  Hi Mayank,

  You can simply use a ComboBox as a year picker. Please refer to the updated sample attached.

  ~regards

  FlexGrid_ComboBox_YearPicker.zip

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 2 August 2019, 6:46 am EST - Updated 3 October 2022, 1:26 pm EST

  Ok pls let me check.

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 2 August 2019, 8:44 am EST

  Thank you Ashwin. The year control works like a charm

  I have opened another thread on the portal but I didn’t get any response. Please can you look into this when you get a chance ?

  https://www.grapecity.com/forums/wijmo/how-to-bind-data-from-the-#hi-team--any-update-on-thi

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 August 2019, 12:30 am EST

  Hi Mayank,

  I have replied to your forum post. Please go through the link below:

  https://www.grapecity.com/forums/wijmo/how-to-bind-data-from-the-

  Also, I have an update on the year picker control. We are sorry but this enhancement is currently not in our roadmap. The dev team has suggested you use the ComboBox or the InputNumber control.

  ~regards

• 

  mabu999999999

  • Post Options:
  • Link
    Copy

  Posted 10 October 2020, 6:52 am EST

  Hi
  
  I have a ComboBox containing a list of years. When changing ComboBox, I want to set minimum and maximum value of InputDate by year of ComboBox.
  
  I tried to reset it using a customEditor variable. However, when I scrolled, the InputDate didn’t disappear.
  
  Can you help me, please ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 October 2020, 7:20 am EST

  Hi,

  We are sorry but we were unable to replicate the issue at our end. Please refer to the sample attached below that we used to replicate the issue.

  Can you let us know whether we are missing something in order to replicate the issue?

  Regards,
  
  Ashwin

  date editor.zip