Posted 4 August 2023, 1:54 am EST
- Updated 4 August 2023, 1:59 am EST
Hi,
Yes, the visibleContext takes string as value. There are many options available for the visibleContext. For example, options are “ClickRowHeader” , “ClickColHeader” , “ClickViewport”, “ClickCorner”, “TabStripSelected”.
You could set the visibleContext based on if you want to show the option on rowHeader, colHeader, viewportCell, cornerCell, tabStrip, etc. You could add the options seperated by OR(" || ") operator.
For example, if you want to show the context menu on rowheader, colHeader and tab strip, you could use the following option:
visibleContext: "ClickRowHeader || ClickColHeader || TabStripSelected",
You could follow the mentioned steps to register and get the values for inputs in the Designer’s Dialog.
- When defining the template for the Dialog, add binding properties for input elements. For example, in the example, binding property “textProp” is being added to the “TextEditor” and binding property “rangeProp” is being added to the “RangeSelect”.
....
{
type: "Column",
children: [
{
type: "TextEditor",
margin: "0 0 0 10px",
// Set the Binding Path for Text Editor
bindingPath: "textProp"
}
]
}
.....
{
type: "RangeSelect",
title: "Select Range",
absoluteReference: true,
needSheetName: false,
margin: "5px -5px",
// Set the binding Path for RangeSelect
bindingPath: "rangeProp"
}
....
- Pass the object as the second parameter in the showDialog() method. This object will bind to the binding properties defined inside the template. You could also pass the initial values to bind to the input elements.
For example, in the following example, the object has two properties that binds with the binding properties defined in the template. Also, the text editor has been given initial value.
....
// Pass the Binding object. You may also pass the initial values
let dialogOptions = {
textProp: "InitialValue",
rangeProp: ""
};
....
- You will get the values in the successCallBack function by the property name defined earlier.
For example, you could refer to the following code snippet:
....
// Get the Result Value
console.log("Text: " + result.textProp);
console.log("Range: " + result.rangeProp);
....
I hope you get clarification on getting the value of the range select. You could refer to the following showDialog method that shows an example on getting the values.
We are constantly adding more documentation about the Designer Components and the missing details will be added in the future. We are sorry for any inconvenience it may have caused.
Please let us know if you still face any issues or have doubts.
Sample: https://jscodemine.grapecity.com/share/hOrYCXFmA0uptYwb1G0AJQ/?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["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
References:
showDialog method: https://www.grapecity.com/spreadjs/api/v15/designer/modules/GC.Spread.Sheets.Designer#showdialog
setConfig method: https://www.grapecity.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer#setconfig
registerTemplate method: https://www.grapecity.com/spreadjs/api/v15/designer/modules/GC.Spread.Sheets.Designer#registertemplate
Regards,
Ankit
