Range Selector issues

Range Selector issues

Posted by: lior.sharabi on 20 July 2022, 10:13 pm EST

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 20 July 2022, 10:13 pm EST - Updated 3 October 2022, 12:11 am EST

  Hello

  I’m trying to use the Range Selector.
  
  https://www.grapecity.com/spreadjs/demos/features/calculation/formula-textbox/range-select#demo_source_name

  I got into some issues i hope you could help me with.

  1. Look at the range selector demo, click on the button for start selecting, now click outside the sheet, even though the “select mode” is off, the button showing like it’s still on:

  

  707×306 14.1 KB

  
  
  is this a bug?

  Can i somehow open and close this edit mode from the SpreadJs API?

  2. I am looking for an event that will be triggered when the range selector is changed. Is there something like this in the API?

  thanks

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 21 July 2022, 9:32 pm EST

  Hi,

  For this, you may use use endSelectionMode method. Please refer to the following code snippet and let me know if you face any issues.

  
  let fb = GC.Spread.Sheets.FormulaTextBox.findControl(host);
  fb.endSelectMode()
  /*for starting selection mode:
  fb.startSelectMode()
  
  */
  
  

  regards,
  
  Avinash

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 23 July 2022, 7:59 pm EST

  Thank you for the answer.

  Can i somehow sign to an event that will be triggered when the selection is changed?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 24 July 2022, 5:54 pm EST

  Hi,

  For this, you may use mutation observer on the formulatTextBox Host. Please refer to the following code snippet and let me know if you face any issues.

  
  
  let target= document.querySelector("div[gcuielement=gcAttachedFormulaTextBox");
  
  // Create an observer instance.
  var observer = new MutationObserver(function(mutations) {
    console.log(target.innerText);   
  });
  
  observer.observe(target, {
    attributes:    true,
    childList:     true,
    characterData: true
  });
  
  

  Regards,
  
  Avinash

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 28 February 2024, 1:32 am EST

  Hi Avinash

  is there a way to know if my current sheet is in Select Mode?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 28 February 2024, 5:55 pm EST

  Hi,

  As per my understanding, you wish to know if formula box is in select mode or not for current active sheet.

  There isn’t a direct API available to fulfill this requirement. However, you can use the “startSelectMode” and “endSelectMode” methods to determine whether the formula box is in select mode for the active sheet. By overriding these methods, you can detect whether the select mode is active or not. Refer below snippet and sample.

  const fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById('formulaBar'), { rangeSelectMode: true });
  
      // override startSelectMode
      const oldStartSelectModeFunc = fbx.startSelectMode;
      const oldEndSelectModeFunc = fbx.endSelectMode;
      fbx.startSelectMode = function () {
          let result = oldStartSelectModeFunc.apply(this, arguments);
          console.log("start");
          document.getElementById("selectModeText").textContent = "formula box select mode: start";
          return result;
      }
      fbx.endSelectMode = function () {
          let result = oldEndSelectModeFunc.apply(this, arguments)
          console.log("end");
          document.getElementById("selectModeText").textContent = "formula box select mode: end";
          return result;
      }
      fbx.workbook(spread);

  Sample: https://jscodemine.mescius.io/share/6aJLkEqy_E2onxdkUtO-pg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"%2C"%2Fstyle.css"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  If there is any difference in the understanding of the requested requirement, could you please provide further clarification or details to ensure better understanding? This will help us to assist you better.

  Regards,

  Priyam

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 28 February 2024, 11:41 pm EST - Updated 28 February 2024, 11:46 pm EST

  Hi

  Thank you for the answer.
  
  In your demo, I noticed that clicking on the “selection mode” button triggers the “start” indication in the console, indicating the start of the selection mode. However, after i am in select mode, when clicking outside the spreadsheet, the selection mode disappears, but there’s no “end” indication in the console.

  Here’s an image demonstrating the behavior:

  

  1359×630 27.6 KB

  In my scenario, we have a ribbon where you can switch the active sheet from it.
  
  When the formula editor is in “select mode” and I switch the active sheet from our ribbon, the select mode turn off once I click outside the spreadsheet area.

  I’d like to maintain the select mode even if you click outside the spreadsheet.

  this is how it looks when the “select mode” is on:
  
  

  Thank you
  
  Lior

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 29 February 2024, 10:41 pm EST - Updated 3 March 2024, 11:06 pm EST

  Hi,

  I can observe the behavior in my end.

  When clicking outside the spreadsheet, the formula box does not exit select mode but remains unfocused. This means that another element gains focus instead. Please refer to the attached video for a demonstration.

  Video: formulaBox.zip

  This behavior is expected and SpreadJS does not support maintaining focus on the formula box when clicking outside the spreadsheet.

  My suggestion is that when switching the active sheet or clicking outside the spreadsheet and then wanting to use the formula box, you may click on the formula box again to bring it into focus mode. This will allow you to use its functionality as intended.

  Regards,

  Priyam

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 4 March 2024, 10:35 pm EST - Updated 4 March 2024, 10:48 pm EST

  Hi

  I created a video that shows the problem i’m having using your example.
  
  As you can see in the video when i’m in select mode and select the div outside the spreadsheet area, the select mode is turning off.

  example_editor_mode_off.zip

  I want the select mode to stay on, want the user to be able to change sheets from my ribbon but still select cells from the other sheet while he is in select mode.

  Thank you
  
  hope you can help.

• 

  lior.sharabi

  • Post Options:
  • Link
    Copy

  Posted 4 March 2024, 10:47 pm EST - Updated 4 March 2024, 10:48 pm EST

  Hi

  I created a video that shows the problem i’m having using your example.
  
  As you can see in the video when i’m in select mode and select the div outside the spreadsheet area, the select mode is turning off.

  example_editor_mode_off.zip

  I want the select mode to stay on, want the user to be able to change sheets from my ribbon but still select cells from the other sheet while he is in select mode.

  Thank you
  
  hope you can help.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 5 March 2024, 5:15 pm EST - Updated 5 March 2024, 5:20 pm EST

  Hi,

  SpreadJS does not support maintaining focus on the formula box when clicking outside the spreadsheet. However, you can utilize the “gcuielement” attribute. Elements with this attribute will not cause the formula box to lose focus. In a sample I’ve created, I included an option element to switch sheets outside the spreadSheet area and added the “gcuielement” attribute with a value of “gcselection” to the element. This prevented the formula box from losing focus when switching sheets outside the spreadSheet area. Refer attached snippet, sample and gif.

  <select id="myDropdown" gcuielement="gcselection">
                    <option value="Sheet1">Sheet1</option>
                    <option value="Sheet2">Sheet2</option>
                  </select>

  Note: You can choose any value for gcuielement. In sample I have used gcselection. And if click any element outside spreadSheet area which has not gcuielement then formula box will loose its focus.

  Gif:

  Sample: https://jscodemine.mescius.io/share/gEmIJBKZEUmXFkSU8hAV7w/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Findex.html"}

  Regards,

  Priyam