Designating a Header Row

Designating a Header Row

Posted by: rlobue on 31 January 2023, 6:49 pm EST

• 

  rlobue

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 January 2023, 6:49 pm EST - Updated 31 January 2023, 6:54 pm EST

  Hi, I am using Designer mode and having an issue with headers. In my example (see image) I have a header row on row 1. When I sort a column, the header cell is ignored, and the header gets sorted along with the data. In Excel, it automatically detects headers and doesn’t include them in the sort.

  My question is how would I programmatically go about designating Row 1 as a header row and sort appropriately? My data is loaded from json.

  Thanks

  

  1599×502 85.1 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 1 February 2023, 5:38 am EST - Updated 1 February 2023, 5:44 am EST

  Hi Ryan,

  You can override the execute method of the “Designer.sortRange” command to remove the first row from the range. You could use the following code example:

  // Override the "Designer.sortRange"
  let oldDesignerSortCommand = spread.commandManager()["Designer.sortRange"].execute;
  spread.commandManager()["Designer.sortRange"].execute = function (spread, options, undo) {
      // Create Custom Selection
      let range = options.selections[0];
      // Execute only when the column is selected.
      if (range.row === -1) {
          range.row = 1;
          range.rowCount -= 1;
          return oldDesignerSortCommand.apply(this, [spread, options, undo]);
      } else {
          return oldDesignerSortCommand.apply(this, [spread, options, undo]);
      }
  }

  Sample: https://jscodemine.grapecity.com/share/a7BtbClKyEaFIZQ-HbkyDw/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fpackage.json"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  When the entire column is selected, I exclude the first row in the preceding example. Similarly, you could use your own logic to exclude the row.

  Regards,

  Ankit

  

• 

  rlobue

  • Post Options:
  • Link
    Copy

  Posted 1 February 2023, 10:45 am EST - Updated 1 February 2023, 11:21 am EST

  Hi Ankit,

  Thanks for the help. Do you know if this would be compatible in version 13.04? I tried the code but it appears to throw an error:

  Uncaught TypeError: spread.commandManager()[‘Designer.sortRange’] is undefined

  I will keep tinkering with it.

  Ryan

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2023, 4:34 am EST

  Dear Ryan,

  I understand that you have a question regarding the SpreadJS V13. I want to assure you that I am currently working on a solution for your issue. It may take some time for me to thoroughly investigate and find the best solution, but I will keep you updated as soon as I have something for you.

  Thank you for your patience and understanding.

  Best regards,
  
  Ankit

• 

  rlobue

  • Post Options:
  • Link
    Copy

  Posted 6 February 2023, 5:04 pm EST

  Thank you, much appreciated!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 February 2023, 11:15 pm EST

  Hello Ryan,

  I hope this message finds you well. I wanted to provide you with an update regarding SpreadJS V13. When it comes to removing the first row from the sort range, it is important to note that you must overwrite the “designer.sortRange” command, not “Designer.sortRange”.

  To implement this, try overriding the “designer.sortRange” command. If you encounter any difficulties or have any questions, please don’t hesitate to reach out to us. Our team would be more than happy to assist you in any way we can.

  Best regards,

  Ankit

• 

  rlobue

  • Post Options:
  • Link
    Copy

  Posted 9 February 2023, 1:53 pm EST - Updated 9 February 2023, 1:58 pm EST

  Hi Ankit,

  I’m still not having any luck. It does not seem like designer.sortRange is a function in the version I am using.

  

  788×33 1.88 KB

  When I print out the commandManager to the console, this is what I see:

  

  1076×1105 73.3 KB

  Thanks

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 February 2023, 7:42 am EST - Updated 10 February 2023, 7:47 am EST

  Hello Ryan,

  For SpreadJS V13, if you examine the code for Designer’s ribbon, you will find that the “sort-AZ”/“sort-ZA” action is being executed on clicking the ribbon.

  Please use the following code snippet to override the sortRange command when the spread has been initialized:

  Please let us know if you still face any issues. I have tested with the SpreadJS V13.2.0.

          // Override the SortRange function
          let oldSortRangeFn = designer.spreadActions.sortRange;
          designer.spreadActions.sortRange = function (spread, parameters) {
              let range = parameters.selections && parameters.selections[0];
              if (range.row === -1) {
                  range.row = 1;
                  range.rowCount -= 1;
                  return oldSortRangeFn.apply(this, [spread, parameters]);
              } else {
                  return oldSortRangeFn.apply(this, [spread, parameters]);
              }
          }
  

  Regards,

  Ankit

  

  1293×1006 68.2 KB

  

• 

  rlobue

  • Post Options:
  • Link
    Copy

  Posted 10 February 2023, 2:32 pm EST

  Hi Ankit,

  Your solution works! Thanks for the help on this.

  Ryan