Datepicker in wijmo flexgrid - React/Redux

Datepicker in wijmo flexgrid - React/Redux

Posted by: mothydharan on 22 October 2017, 8:44 pm EST

• 

  mothydharan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 October 2017, 8:44 pm EST

  Hi,

  When wijmo flexgrid enters into edited mode, i would like to display datepicker inside a column ‘Date of Birth’. How can we implement the same using the below two approaches in react-redux?

  1. using WjInput.InputDate
  2. Using a datePicker Component (custom component which uses the plugin material-ui/DatePicker)

  Hoping to get a reply soon.

  Thank you

  Thank you

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 October 2017, 10:00 pm EST

  Hi Mothy,
  
  Currently, wjFlexGridCellTemplate is not available for FlexGrid in React framework. Hence, you need to create a custom editor for FlexGrid. Please refer to the fiddle
  
  http://jsfiddle.net/Wijmo5/1w9hr82h/ that shows how custom editor can be placed in FlexGrid using PureJs.

  You need to handle initialized event for adding custom editor.

  ~Manish

• 

  mothydharan

  • Post Options:
  • Link
    Copy

  Posted 24 October 2017, 4:30 pm EST

  Thank you Manish for your reply.

  1. For the InputDate, how can we pass a date array so that only the dates present in the array is enabled in the date picker and the rest dates are disabled?

  2. Also when user types on the date cell and the entered date is disabled in the datepicker how can we handle such scenarios?

  3. how can you make the date cell as null?In our case, either the date cell has a value or it will be null. User can even go and edit the cell to be null.

  Kindly let me know your inputs on the above mentioned queries

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 October 2017, 9:15 pm EST

  Hi,
  
  Here are the answers to your queries:

  1. You need to handle beginningEdit event and get the InputDate control and apply required logic.

  2. You need to check the value of control in valueChanged event for InputDate and if date is disabled, set the original date back to the Control.

  3. You need to set isRequired property to false for both the column and InputDate control.

  Hope it clear!

  Please refer to the updated fiddle for the same.
  
  http://jsfiddle.net/mkgupta911/1w9hr82h/10/

  ~Manish

• 

  mothydharan

  • Post Options:
  • Link
    Copy

  Posted 30 October 2017, 4:05 pm EST

  Thank you manish…your fiddle helped me a lot !!