I would like to replicate the whole formulabar functionality in div html tag

I would like to replicate the whole formulabar functionality in div html tag

Posted by: sathwik.kotla on 26 October 2022, 3:17 am EST

• 

  sathwik.kotla

  • Post Options:
  • Link
    Copy

  Posted 26 October 2022, 3:17 am EST

  Hi Team,
  
  As we are using formula calculations at our end(backend) we are not applying the formula on the spread js cell, if at we apply the right formula on a cell with the spread js default functionality then we cannot apply any data from our end. So we are using the concept of the tag in order to make the user view the applied formula. Now we would like to implement the formula bar that default spread js has with the tag concept.
  
  Can the team help us here in creating a custom formula bar with tags in place of formulas?

  Or Else can the team share the sample code for the formula bar?

  Thanks and regards
  
  Sathwik

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 27 October 2022, 11:24 pm EST

  Hi,

  SpreadJS currently supports the creation of Formula Text Boxes within div elements. You can see an example of this in the following demo: https://www.grapecity.com/spreadjs/demos/features/calculation/formula-textbox/basic-formula-textbox/purejs

  SpreadJS allows you to create a custom bar that displays tags instead of formulas.
  
  SpreadJS has sufficient APIs to support this. To update the contents of the custom bar, you can handle events such as SelectionChanged and SheetChanged. You can handle the events of div/input element to update the tags value.

  You can, for example, refer to the sample I created for you: https://jscodemine.grapecity.com/share/rqUT4-ccpE2_Wi5ZQG_LMA/

  API References:

  SelectionChanged Event: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#selectionchanged

  SheetChanged Event: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#sheetchanged

  Regards,

  Ankit

• 

  sathwik.kotla

  • Post Options:
  • Link
    Copy

  Posted 28 October 2022, 1:59 am EST

  Hi Ankit,
  
  Thanks for sharing the code sample it was very helpful,
  
  But we want the bar to behave exactly like the formula bar i.e the user should be able to edit the formula and apply it on the active cell and also we want the formula suggestions. In short, the custom bar should only display the tag of the cell as a formula, after editing it from the bar the formula should be applied to the cell the same as the formula bar does.
  
  Can you please share the sample for the same?
  
  Thanks and regards
  
  Sathwik

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 31 October 2022, 10:58 pm EST

  Hello, Sathwik

  All defined custom and global formulas are displayed as suggestions in the formula bar.

  In the instance of a custom bar that displays tags, the currently offered solution displays the tag of the currently active cell, which does alter when the cell selection is changed.

  Upon losing focus on the custom input element, would you kindly confirm that you wish to apply the tag on the active cell? Or is there some other prerequisite?

  Regards,
  
  Ankit

• 

  sathwik.kotla

  • Post Options:
  • Link
    Copy

  Posted 1 November 2022, 1:24 am EST

  Hi Ankit,

  The first thing is we should not set tags to cells, According to our use case if a formula is applied to a cell it doesn’t allow us to override the value in the cell, it is always replaced by the client side spread js default calculation, so in order to apply the formula and get the data from backend we are using edit ending event and capturing the formula and replacing the formula to a null or empty string and in order to view the formula that is applied on a cell we are using the tags to cell. So our clear requirement here is we need a custom formula bar that displays the tag name on the active cell but when edited and enter is clicked in the custom formula bar it should again behave as the default formula bar i.e the text in the formula bar should be applied as a formula in the active cell. In short, our custom formula bar should have only a difference in showing tags of cells instead of the formula rest of the functionality is very much similar to that of the present spread js formula bar.

  Thanks and regards
  
  Sathwik

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 2 November 2022, 2:20 am EST

  Hello Sathwik,

  Please refer to the sample below, which I have created for you based on your specifications.

  In the example, the formula text box displays tag if the active sheet has tag and operates normally when text is entered into the formula bar or when the cell is in edit mode.

  Sample: https://jscodemine.grapecity.com/share/jaR8oH0wsEGmGI0QTWD7Vg/

  In case this doesn’t satisfy your demand, do let us know.

  Regards,

  Ankit

• 

  sathwik.kotla

  • Post Options:
  • Link
    Copy

  Posted 2 November 2022, 10:03 pm EST - Updated 2 November 2022, 10:08 pm EST

  Hi Ankit,
  
  In our use case, we are not applying any formulas on the cell, so we should be able to edit the tag i.e in the sample which you have shared it is just showing the tag and as soon as we enter the edit mode in the formula bar it is changing to formula. But in our requirement, if a cell has a tag to it, it should be displayed and the same tag should be editable in the formula bar just the same as the formula it should be applied on the cell as a formula. (If a cell has a tag user should be able to edit the tag in the formula bar and it is similar to editing the formula in the formula bar).

  In simple words, we should replace the default functionality of displaying and editing formulas with tags in the formula bar.

  Regards,
  
  Sathwik

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 November 2022, 4:53 pm EST

  Hello Sathwik,

  SpreadJS does not directly support changing the ‘formula’ to ‘tag’ in the ‘FormulaBar’. To implement the customized functionality, you could make advantage of the SpreadJS APIs.

  You can leverage SpreadJS’s events like EditEnded, EditorStatusChanged, and EditStarting Event to implement the necessary functionality.

  Please refer to the sample I provided below. In the example, I set the value in the formulabar and the editor element using the EditorStatusChangedEvent.

  Sample: https://jscodemine.grapecity.com/share/paOFVljZlk_fvtFR1WWvBg/

  In the example, if a cell includes a tag and you begin editing it, the value will appear in the editor element and in the formula bar. When editing is complete, the formula is set for the cell.

  EditorStatusChanged Event: http://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#editorstatuschanged

  Events: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events

  Regards,

  Ankit