Different type of input to same column in flexgrid/flexsheet

Different type of input to same column in flexgrid/flexsheet

Posted by: yashobanta.majhi on 20 June 2018, 8:09 pm EST

• 

  yashobanta.majhi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 June 2018, 8:09 pm EST

  Hi,
  
  I am using flexgrid to populate data from a rest end point. The received JSON is in below format:
  
  [{ “name”:“abc”, "dataType:“Number”,“response”:“Test Response” },
  
  {“name”:“def”, "dataType:“Date”,“response”:“2/2/2018”},
  
  {“name”:“def”, "dataType:“Dropdown”,“response”:“Yes”}
  
  {“name”:“ghi”, "dataType:“TextArea”,“response”:“Test Response”}]

  I want to populate the response column based on the dataType column. I tried with ng template, but it didn’t work.

  Any direction will be helpful.

  Thanks,
  
  Yashobanta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 June 2018, 11:02 pm EST

  Hi,
  
  If we understand correctly then you want to have different kinds of editor for response column based on some value of dataType column. If so then you handle the prepareCellForEdit event and generate the required editor.

  Please refer to the following post which addresses the same problem:-
  
  https://www.grapecity.com/en/forums/wijmo/how-to-custom-cell-edit-wi

  If you had a different requirement then please let us know.

  ~Manish

• 

  yashobanta.majhi

  • Post Options:
  • Link
    Copy

  Posted 27 June 2018, 1:48 am EST

  Hi Manish,
  
  I followed the example shared by you. It is working for Dropdown, numbers and date, but not working for textarea. For Date the calendar is showing inside the cell. Before following this method I am able to add input to the String type cell in the column, But after adding the below I am getting some error in console:

  ConditionFlag–String
  
  ERROR TypeError: Object doesn’t support this action

  TypeScript code:

  var control;
  
  var responseCellType = s.rows[e.row].dataItem[“cellDataType”];
  
  console.log(“ConditionFlag–”+responseCellType);
  
  if (responseCellType==‘Number’) {
  
  control = new wjInput.InputNumber(rootEl, {step: 5 });
  
  control.value = Number(s.getCellData(e.row, e.col, false));
  
  }
  
  else if(responseCellType==‘DropDown’){
  
  control = new wjInput.ComboBox(rootEl, {
  
  itemsSource: ‘Yes,No’.split(‘,’)
  
  });
  
  control.selectedValue = s.getCellData(e.row, e.col, false);
  
  } else if (responseCellType==‘Date’) {
  
  control = new wjInput.Calendar(rootEl);
  
  control.value = (s.getCellData(e.row, e.col, false));
  
  }else{
  
  control = new HTMLTextAreaElement();
  
  control.value = s.getCellData(e.row, e.col, false);
  
  }

  var cellEditEndHandler = (s, args) => {
  
  s.cellEditEnding.removeHandler(cellEditEndHandler);
  
  if (!args.cancel) {
  
  args.cancel = true;
  
  if (responseCellType==‘Number’) {
  
  s.setCellData(args.row, args.col, control.value, false);
  
  } else if(responseCellType==‘DropDown’) {
  
  s.setCellData(args.row, args.col, control.selectedValue, false);
  
  }
  
  else if(responseCellType==‘TextArea’) {
  
  s.setCellData(args.row, args.col, control.value, false);
  
  }else{
  
  s.setCellData(args.row, args.col);
  
  }
  
  control.dispose();
  
  }
  
  }
  
  s.cellEditEnding.addHandler(cellEditEndHandler);
  
  });

  Thanks,
  
  Yashobanta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 June 2018, 10:18 pm EST

  Hi,
  
  Instead of using TextArea for string types, the best way solution would be to use default editor instead, for multiline inputs same as excel, you may set the multiLine property of column to true which allows editing in multiLine within FlexGrid.
  
  However if you are interested in using TextArea instead then please use document.createElement() method to get instance of textArea.
  
  new HTMLTextAreaElement() is not the right way to generate new TextArea object.

  Please refer to following code snippet

  control=document.createElement('TextArea');
  control.value=s.getCellData(e.row,e.col,false);
  rootEl.appendChild(control);
  
  

  Here is an example which implements the same:- https://stackblitz.com/edit/js-3iesr9-uv5wmp?file=index.js

  P.S. If you want to try default editor with multiline for string type then comment string case(line 44-47) in the above sample.

  ~Manish

• 

  yashobanta.majhi

  • Post Options:
  • Link
    Copy

  Posted 29 June 2018, 2:06 am EST

  Thanks Manish for the quick reply.
  
  I have used your sample. It is working for number, textarea, string, dropdown. If I am using InputDate , then getting error as Date expected, but if I am using Calendar, then the calendar pop is showing inside the cell. I am using angular 5.

  Thanks,
  
  yashobanta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 July 2018, 7:53 pm EST

  Hi,
  
  Please make sure that you are assigning a valid date in case of InputDate.

  The calendar is showing inside the cell only as it is part of the design. Wijmo controls are designed to stay inside their parent container except in case of drop-downs which can be shown over other control. Since Calendar is not the drop down type it is rendered inside the cell.

  ~Manish