Log in to start a topic

Working with SpreadJS Designer template controls

Posted by: anton.kagakin on 28 March 2025, 5:12 am EST

  • anton.kagakin

    • Post Options:
    • Link
      Copy

    Posted 28 March 2025, 5:12 am EST

    This article https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/customizations/customize-file-menu showing how to customize file menu.

    Since there is nothing much about components shown here, I have a question.

    For TextEditor, how can I get value that are put in the input-box?

    How can I interact with Button, and handle click

    How can I make first Item of List be selected by default. (This behaviour we can see when we open Export menu in “FILE” when list item “Excel File” is selected by default)

    Is there full-list of components available and how to work with them, with proper api and documentation?

    Or all I can do is to write custom component with inputs, buttons and selects? (Bad because styling will not corresponds with spreadjs designer menu styling)

  • priyam.kushwaha

    Posted 31 March 2025, 8:52 am EST - Updated 31 March 2025, 8:57 am EST

    Hi,

    Apologies for the delay caused over the weekend.

    It is possible to accomplish all the mentioned requirements, i.e.

    • Take input value from the input box.
    • Interact with buttons and handle clicks.
    • Select the first item by default.

    Please refer to the attached sample that illustrates the same (see below).

    GIF:

    Sample: customFileMenu.zip

    In addition, we would like you to know that there is no list of available components and how to work with them. However, you can refer to the SpreadJS Designer API: https://developer.mescius.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer and access all the designer specific features such as Commands, Templates, etc. in the JavaScript application.

    However, we encountered an issue where the first item is selected, but the corresponding children on the extreme right are not visible unless manually clicked through the UI. We are currently investigating this and will provide an update soon.

    Regards,

  • anton.kagakin

    Posted 1 April 2025, 5:23 am EST

    Looks like what I need. Will try it soon.

  • priyam.kushwaha

    Posted 1 April 2025, 8:58 am EST - Updated 1 April 2025, 9:03 am EST

    Hi,

    Thanks for your patience while we further investigated the issue regarding the display of children elements when the custom item is selected from the side panel. Please refer to the updated code sample that displays the children elements as expected.

    Refer to the attached GIF and sample.

    GIF:

    Sample: customFileMenu.zip

    Please feel free to reach out if you encounter any further issues or require additional guidance.

    Regards,

  • anton.kagakin

    Posted 1 April 2025, 1:39 pm EST - Updated 2 April 2025, 3:57 am EST

    Should I do something similar for CheckBox?

    Because neither selected: true nor checked: true doesn’t working.

    Actually i’ve tried to set CheckBox’s bindingPath to true, but no results.

    Also interested on how to set defaults for TextEditor values.

    Or how to set items for ListComboEditor if they are loading asynchronously.

    May be there is a way to refresh/redraw/update File Menu when async task is completed?

  • ankit.kumar

    Posted 2 April 2025, 3:56 am EST - Updated 2 April 2025, 4:01 am EST

    Hi,

    As per our understanding, you are setting the selected or checked state to true in the file menu template, due to which the checkbox is not selected. To select the checkbox, it is required to override the file menu panel command’s getState function and set custom designer data for the corresponding properties. Please refer to the code snippet below that illustrates the same:

    fileMenuPanelCommand.getState = function (context, propertyName, newValue) {
  let options = oldGetStateFn.apply(this, arguments);
  if (options["activeCategory_main"] == "CustomItem" && !options["activecategory_custom"] && !isChanged) {
    isChanged = true;
    options["activecategory_custom"] = "customitem1";
    const customVal1 = true;
    const customVal2 = false;
    options["custom_value_1"] = customVal1;
    options["custom_value_2"] = customVal2;
    designer.setData("custom_value_1", customVal1);
    designer.setData("custom_value_2", customVal2);
  }
  return options;
};

    You can further refer to the attached code sample that uses the above code snippet and returns the checkbox value as expected (see below).

    Please feel free to reach out if you require any additional guidance.

    Regards,

    Ankit

    customFileMenu.zip

  • anton.kagakin

    Posted 3 April 2025, 3:10 am EST

    What about async loading items and set them for values?

  • priyam.kushwaha

    Posted 3 April 2025, 8:53 am EST

    Hi,

    We are currently discussing with the devs regarding setting items for ListComboEditor when loading asynchronously. The internal tracking ID is “SJS-29027”. We will update you as soon as we have any information.

    Regards,

    Priyam

  • anton.kagakin

    Posted 4 April 2025, 12:40 am EST

    Thanks for update.

    Also want to know if there is a way to interact with my custom component through some means.

    For example:

    I have a List component, with 

    bindingPath: 'activeCategory_myList'
    and override processPropertyChanged to handle value change for that list.

    Now I want it to behave like filter for items in my custom component (imagine my component is list of files to open with SJS: a.csv b.xlsx c.csv) and i want to notify my component that activeCategory_myList changed and i need to re-render list of files in my custom component.

  • priyam.kushwaha

    Posted 4 April 2025, 5:16 am EST

    Hi,

    It is possible to track the changes in the binding path and, based on the value in the bindingPath and the visibleWhen condition, display another component. However, the working will break while executing an asynchronous operation. Therefore, we are discussing this case with the development team and will get back to you as soon as we get any response from their end.

    Meanwhile, you can refer to the attached sample that updates the list values in the UI by accessing the HTML elements of the list after the async operation ends. Please refer to the attached sample at the bottom that illustrates the same.

    In case you are handling the async operation differently, please let us know and share a stripped-down sample with us. You can also modify the shared sample.

    Sample: customFileMenu.zip

    Kind Regards,

  • anton.kagakin

    Posted 4 April 2025, 7:04 am EST

    My Sample: sample.zip

    Since I can’t find a way to make ListComboEditor use items that are fetched asynchronously, I made my own custom component with the list.

    So the idea is that I have my custom component to show folders and files in folders that are coming from remote.

    I have native List for choosing filter for files (it can be radio and select), idea to select filter and update my custom component.

  • ankit.kumar

    Posted 7 April 2025, 7:56 am EST - Updated 7 April 2025, 8:02 am EST

    Hi,

    It is possible to display only the filtered list in the custom component by using the filter buttons present in the File menu panel template by calling the method handleSelectChange of the extension class OpenFolderComponent. Please refer to the attached sample and the working screenshot that illustrates the same.

    Please feel free to reach out if you encounter any further issues or require additional guidance.

    Best Regards,

    Ankit

    customFileMenuPanel (1).zip

  • anton.kagakin

    Posted 7 April 2025, 2:28 pm EST

    Not so elegant, but acceptable, thank you! I’ll try this code in different situations such as rerendering when designer.setConfig is called. I do not remember if the component reinstantiated on this (so the new instance is created and onInit called)

  • ankit.kumar

    Posted 8 April 2025, 4:53 am EST - Updated 8 April 2025, 4:58 am EST

    Hi,

    We have modified the code sample to not call the async operation of fetching the files and work as a filter for the existing files only. Please refer to the attached code sample at the bottom that illustrates the same.

    Additionally, the complete designer configuration is refreshed when the setConfig method is called and the component is again instantiated. This will result in the reload of the custom component.

    customFileMenu (1).zip

    Best Regards,

    Ankit

  • anton.kagakin

    Posted 8 April 2025, 5:34 am EST

    Thank you for your work!

    But for me more proper way to not call methods of component instance directly (cause if i somehow change it in the future it will all break), but instead do it through events.

    So I make it that way 

    componentRef.fire('FilterChanged', filter)
    .

    And in component itself listens for this event to rerender only list of files

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2025 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.