Posted 5 March 2025, 2:09 pm EST - Updated 5 March 2025, 2:14 pm EST
Gantt: Designer buttons usability
Posted by: bruno.bueno on 5 March 2025, 2:09 pm EST
-
bruno.bueno
-
ankit.kumar
Posted 6 March 2025, 2:58 am EST - Updated 6 March 2025, 3:05 am EST
Hi,
Thanks for reaching out.
You could refer to the following docs on using the Desinger Component with GanttSheet: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/spdesignerwork/ganttsheet-designer. Most of the functionality is self-explanatory based on their names. However, if you need further clarification, here is a detailed explanation:
GanttSheet
GanttSheet is a view consisting of a TableSheet and a chart. Therefore, the TABLE SHEET DESIGN is associated with the attached TableSheet, and the COLUMN SETTINGS are associated with the columns in the TableSheet.
TABLE SHEET DESIGN
-
Row Height: Represents the height of the data rows in the table. This height is fixed to 30 points in GanttSheet.
-
Header Row Height: Represents the height of the header row in the table. This height is also fixed to 30 points but changes to a multiple of 30 based on the number of adjacent stacked rows in the header rows. If there is one stack header fit column, the header row height changes to 60, and so on.
-
Stack Row Height: Represents the height of the stacked header row. Please refer to the screenshot below to learn more about Stack heights:
- Allow Add New: This option controls the addition of new tasks/rows in the GanttSheet. If set to false, the addition of new tasks will not be possible:
-
Show Row Number: This option controls the display of row numbers in a TableSheet but does not perform any operation in a GanttSheet table.
-
Enable Define Column: Adds an option at the last of the table to define a new column in a TableSheet but does not perform any operation in a GanttSheet table. This table is controlled through the data source and does not define any option to add a new column.
-
Alternating Row Style: Style the GanttSheet table with alternate row styles.
-
Fill Row Step: Defines the number of consecutive rows with the first color when there are alternating row styles.
-
Blank Row Step: Defines the number of consecutive rows with the second color when there are alternating row styles.
-
Themes | Format: Defines the format of the table.
Please refer to the following screenshot, which illustrates the above four properties:
COLUMN SETTINGS
-
Value: It represents the actual value of the column in the data source.
-
Caption: It represents the name of the column present in the table of the GanttSheet.
-
Width: It represents the width of the column in the table of the GanttSheet.
-
Default Value: It represents the default value of a column in a new row of the TableSheet if no value is provided in the row for the particular column. However, this property does not perform any action in a GanttSheet.
-
Is Primary Key: Sets whether the column is a primary key or not.
-
Required: Sets whether the column value is required while updating the data source.
-
Read Only: Sets whether the column is read only or not.
-
Data Type: Sets the type of data present in the column in a TableSheet but does not perform any action in the GanttSheet.
-
Column Style: Sets the style of the column. For example, fill color, border, etc.
-
Conditional Format: Sets the style of the rows in a particular column based on a condition.
-
Header Style: Sets the style of the header of the column.
-
Header Fit: Sets the fit for the header - Normal, Vertical, and Stack.
Please refer to the below screenshot, which represents the usage of the above four options:
Please feel free to reach out if you encounter any further issues or require additional guidance.
Best Regards,
Ankit
-
-
bruno.bueno
Posted 6 March 2025, 7:46 am EST - Updated 6 March 2025, 7:51 am EST
Hi, much apreciated!
Can you tell me what the groups do?
-
bruno.bueno
Posted 6 March 2025, 7:47 am EST - Updated 6 March 2025, 7:50 am EST
I’m removing some options form the column setting, and all the options left dont work anymore, do i need to do something else to be able to remove sobre options in the designer? I’m not change the commandName or anything, just commenting the options that does not make sense to my project.
here is my ribbon{ id: 'tableSheetColumnSetting', text: 'ACCOUNTFY_SPREAD.GRAFICO.RIBBON_TABLE-SHEET-DESIGN_COLUMN-SETTING', buttonGroups: [ { buttonGroupName: NomePermissaoCabecalho.TABLE_SHEET_COLUMN_CONFIG, label: 'ACCOUNTFY_SPREAD.GRAFICO.RIBBON_TABLE-SHEET-DESIGN_OPTIONS', thumbnailClass: 'ribbon-button-sheetgeneral', commandGroup: { children: [ { direction: 'vertical', commands: ['setTableSheetColumnCaption'], }, ], }, }, { buttonGroupName: NomePermissaoCabecalho.TABLE_SHEET_COLUMN_CONFIG, label: 'ACCOUNTFY_SPREAD.GRAFICO.RIBBON_TABLE-SHEET-DESIGN_STYLE', thumbnailClass: 'ribbon-thumbnail-table-sheet-column-style', commandGroup: { children: [ { commands: ['setTableSheetColumnStyle'], }, { commands: ['setTableSheetColumnHeaderStyle'], }, ], }, }, ], visibleWhen: 'TableSheetColumnSelected', } -
priyam.kushwaha
Posted 7 March 2025, 5:10 am EST
Hi,
The Groups in the TABLE SHEET DESIGN are used to group the data present in the TableSheet. These options don’t work in the GanttSheet table because GanttSheet tables represent the tasks that can’t be clubbed together. To learn more about the Groups, please refer to the following resources:
- TableSheet Design Mode | Grouping Layout Settings: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/spdesignerwork/tablesheet-designer/DesignMode#grouping-layout-settings
- TableSheet Grouping: https://developer.mescius.com/spreadjs/docs/features/tablesheet/tablesheet-operations/tablesheet-grouping
Additionally, we have replicated that the ribbon commands are not executed using the ribbon configurations you provided. It is because the GanttSheet columns depend on the column value, and removal of this column value from the configuration will break the working of the designer control. To overcome this issue, we recommend you add a button group containing the column value in the data source and set the visibility of this group to false to achieve the UI requirements.
Please refer to the below code snippet that will work according to the above workflow without breaking the designer control:
{ "id": "tableSheetColumnSetting", "text": "COLUMN SETTINGS", "buttonGroups": [ { "buttonGroupName": "NomePermissaoCabecalho.TABLE_SHEET_COLUMN_CONFIG", "label": "ACCOUNTFY_SPREAD.GRAFICO.RIBBON_TABLE-SHEET-DESIGN_OPTIONS", "thumbnailClass": "ribbon-button-sheetgeneral", "commandGroup": { "children": [ { "commands": ["setTableSheetColumnCaption"] } ] } }, { "visibleWhen": "false", "commandGroup": { "children": [ { "commands": ["setTableSheetColumnValue"] } ] } }, { "buttonGroupName": "NomePermissaoCabecalho.TABLE_SHEET_COLUMN_CONFIG", "label": "ACCOUNTFY_SPREAD.GRAFICO.RIBBON_TABLE-SHEET-DESIGN_STYLE", "thumbnailClass": "ribbon-thumbnail-table-sheet-column-style", "commandGroup": { "children": [ { "commands": ["setTableSheetColumnStyle"] }, { "commands": ["setTableSheetColumnHeaderStyle"] } ] } } ], "visibleWhen": "TableSheetColumnSelected" }Please feel free to reach out if you encounter any further issues or require additional guidance.
Best Regards,
-
bruno.bueno
Posted 7 March 2025, 6:49 am EST
ok, i will try it, thanks
-
bruno.bueno
Posted 7 March 2025, 7:53 am EST - Updated 7 March 2025, 9:27 am EST
- the format feature does nothing in my custom implementation of gantt
- the ‘Allow Add New’ remove the last row, but let insert the row by contextual menu on the row
-
ankit.kumar
Posted 10 March 2025, 7:00 am EST - Updated 10 March 2025, 7:05 am EST
Hi,
We are not able to replicate that the format feature does nothing in the custom implementation of the GanttSheet Designer provided by you previously. Please refer to the screen recording below illustrating the same:
Additionally, we can replicate that the Allow Add New removes the last row, but the Insert Task option in the context menu will allow inserting a new task. This is because of the difference between the workings of both these options. The Allow Add New will allow only the insertion of the task in the last row, whereas Insert Task will allow the insertion of a new task in the selected row, shifting the existing rows down.
To remove the Insert Task option from the context menu, you can customize the context menu as follows:
const config = (GC.Spread.Sheets as any).Designer.DefaultConfig; config.contextMenu.forEach((item: string, index: number) => { if(item === "GanttSheetContextMenuInsertTask") { config.contextMenu.splice(index, 1); return; } })You can also refer to the SpreadJS sample attached below, which is used to replicate the issues you mentioned.
In case the format still does not work, please share a minimal sample replicating the issue. Please feel free to reach out if you encounter any further issues or require additional guidance.
Regards,
Ankit
