Hi,
I have a problem with configuring a toolbar to make it expandable and display items in one row. Right now I have strips element with two tbar inside. The first tbar is a type of toolbar that is not expandable and has items displayed in one row, which I need here. However, for the second tbar I need it to be expandable, so I use type:"panel" with collapsible : true feature, which works great, but it displays items vertically. When I'm changing tbar type from type:"panel" to type: 'toolbar', this section is no longer expandable, but I have items in one row.
Is it possible to configure the tbar with a type:"panel" to keep it expandable and display items in one row?
Here is my code for that part:
strips : {
tbar1 : {
type : 'toolbar',
dock : 'top',
overflow : 'scroll',
height : '12%',
items : [
{
type: 'buttonGroup',
items : [
{
type : 'button',
text : '<<',
onClick : (event) => {
const collapseEvent = event.source.up ('gantt');
collapseEvent.shiftPrevious();
}
},
{
type : 'button',
text : '>>',
onClick : (event) => {
const collapseEvent = event.source.up ('gantt');
collapseEvent.shiftNext();
}
},
{
type : 'button',
text : ZOOM_TO_FIT_LABEL,
onClick : (event) => {
const collapseEvent = event.source.up ('gantt');
collapseEvent.zoomToFit();
}
},
{
type : 'button',
text : '+',
onClick : (event) => {
const collapseEvent = event.source.up ('gantt');
collapseEvent.zoomIn();
}
},{
type : 'button',
text : '-',
onClick : (event) => {
const collapseEvent = event.source.up ('gantt');
collapseEvent.zoomOut();
}
}
]
},
{
label : CONFIGURATIONS_LABEL,
labelPosition : 'above',
type : 'combo',
items : this.configurationNames,
placeholder : CONFIGURATIONS_LABEL,
callOnFunctions: true,
displayField : 'Name',
value : this.currentConfigurationUsed.Name,
listeners : {
change : (event) => {
if (!event) {return;}
let newConfig = event.value;
let currentConfig = this.mapOfConfigurationsByname.get(newConfig);
if (currentConfig) {
this.currentConfigurationUsed = currentConfig;
let url = window.location.href;
try {
url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__configurationId', currentConfig.Id);
window.location.href = url; //reload window
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_CONFIGURATION_PICKLIST_ERROR, error);
}
}
}
}
},{
type : 'combo',
ref : 'groupBy',
label : GROUP_BY_LABEL,
labelPosition : 'above',
clearable : true,
widith : 200,
items : Array.from(this.groupBySet),
value : this.currentGroupBy,
listeners : {
change : (event) => {
try {
if (event.value === 'None' || !event.value) {
this.currentGroupBy = 'None';
gantt.clearGroups();
} else {
this.currentGroupBy = event.value.replaceAll(' ','');
switch (event.value.trim()) {
case 'Country' :
gantt.group(['Country']);
break;
case 'Program' :
gantt.group(['Program']);
break;
case 'Project Template' :
gantt.group(['ProjectTemplate']);
break;
case 'Construction Budget Code' :
gantt.group(['ConstructionBudget']);
break;
case 'GC Budget Code' :
gantt.group(['GCBudgetCode']);
break;
default :
gantt.clearGroups();
break;
}
}
} catch {error} {
gantt_chart_helper.logError(SCHEDULE_VIEWER_GROUP_BY_PICKLIST_ERROR, error);
}
}
}
},
{
label : SEARCH_BY_SITE_LABEL,
labelPosition : 'above',
type : 'textfield',
placeholder : SEARCH_BY_SITE_LABEL,
value : this.currentSearchPhrase,
listeners : {
input(event) {
if (!event) {return;}
const gantt = event.source.up('gantt');
const value = event.value;
this.currentSearchPhrase = value;
if (value === '') {
gantt.store.clearFilters();
} else {
gantt.store.clearFilters();
gantt.store.filter((item) => {
if (item.children) {
return;
}
let uppercaseValue = '' + value;
uppercaseValue = uppercaseValue.toUpperCase();
let siteUppercase = ''+item.originalData.Site;
siteUppercase = siteUppercase.toUpperCase();
if ( siteUppercase.startsWith(uppercaseValue)) {
return item.originalData.Site
} else {
return;
}
});
}
}
}
},
{
type : 'date',
placeholder : 'YYYY/MM/DD',
label : START_DATE_LABEL,
labelPosition : 'above',
value : this.currentStartDate,
listeners : {
change : (event) => {
if (event.value) {
this.currentStartDate = gantt_chart_helper.retrieveDate(event.value);
try {
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__startDate', this.currentStartDate);
window.location.href = url;
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_START_DATE_ERROR, error);
}
} else {
try {
let url = gantt_chart_helper.removeParameter(window.location.href,'c__startDate');
window.location.href = url;
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_START_DATE_ERROR, error);
}
}
}
}
},{
type : 'date',
placeholder : 'YYYY/MM/DD',
label : END_DATE_LABEL,
labelPosition : 'above',
value : this.currentEndDate,
listeners : {
change : (event) => {
if (event.value) {
this.currentEndDate = gantt_chart_helper.retrieveDate(event.value);
try {
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__endDate', this.currentEndDate);
window.location.href = url;
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_END_DATE_ERROR, error);
}
} else {
try {
let url = gantt_chart_helper.removeParameter(window.location.href,'c__endDate');
window.location.href = url;
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_END_DATE_ERROR, error);
}
}
}
}
}
]
},
tbar2 : {
type : 'panel',
title : FILTERS_LABEL,
collapsible : true,
collapsed : true,
dock : 'top',
height : '35%',
scrollable : true,
items : [
{
label : COUNTRY_LABEL,
labelPosition : 'above',
type : 'combo',
width : 80,
placeholder : COUNTRY_LABEL,
items : Array.from(this.countrySet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentCountry,
listeners : {
change : (event) => {
if (!event) {return;}
this.currentCountry = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__country', this.currentCountry);
window.location.href = url;
}
}
},
{
label : PROJECT_STATUS_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : PROJECT_STATUS_LABEL,
items : Array.from(this.projectStatusSet),
callOnFunctions: true,
multiSelect : true,
displayField : 'Name',
value : this.currentProjectStatus,
listeners : {
focusOut : (event) => {
if (!event || !event.source) {return;}
let valuesOnFocusOutEvent = event.source.value;
try {
if (valuesOnFocusOutEvent != this.currentProjectStatus) {
this.currentProjectStatus = valuesOnFocusOutEvent;
let url = gantt_chart_helper.handleMultiplePicklistValuesURLChange(window.location.href,'c__status', this.currentProjectStatus);
window.location.href = url;
}
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_MULTIPLE_PICKLIST_ERROR, error);
}
}
}
},
{
label : PROJECT_TEMPLATE_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : PROJECT_TEMPLATE_LABEL,
items : Array.from(this.projectTemplateSet),
multiSelect : true,
callOnFunctions: true,
displayField : 'Name',
value : this.currentProjectTemplate,
listeners : {
focusOut : (event) => {
if (!event || !event.source) {return;}
let valuesOnFocusOutEvent = event.source.value;
try {
if (valuesOnFocusOutEvent != this.currentProjectTemplate) {
this.currentProjectTemplate = valuesOnFocusOutEvent;
let url = gantt_chart_helper.handleMultiplePicklistValuesURLChange(window.location.href,'c__template', this.currentProjectTemplate);
window.location.href = url;
}
} catch (error) {
gantt_chart_helper.logError(SCHEDULE_VIEWER_MULTIPLE_PICKLIST_ERROR, error);
}
}
}
},
{
label : PROGRAM_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : PROGRAM_LABEL,
items : Array.from(this.programSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentProgram,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentProgram = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__prog', this.currentProgram);
window.location.href = url;
}
}
},{
label : CONSTRUCTION_BUDGET_CODE_LABEL,
labelPosition : 'above',
type : 'combo',
width : 100,
placeholder : CONSTRUCTION_BUDGET_CODE_LABEL,
items : Array.from(this.constructionBudgetSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentConstructionBudget,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentConstructionBudget = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__constBudgetCode', this.currentConstructionBudget);
window.location.href = url;
}
}
},{
label : GC_BUDGET_CODE_LABEL,
labelPosition : 'above',
type : 'combo',
width : 100,
placeholder : GC_BUDGET_CODE_LABEL,
items : Array.from(this.gcBudgetCodeSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentGcBudget,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentGcBudget = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__gcBudgetCode', this.currentGcBudget);
window.location.href = url;
}
}
},{
label : ARCHITECT_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : ARCHITECT_LABEL,
width : 100,
items : Array.from(this.architectsSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentArchitect,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentArchitect = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__architect', this.currentArchitect);
window.location.href = url;
}
}
},{
label : CONSTRUCTION_MANAGER_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : CONSTRUCTION_MANAGER_LABEL,
width : 110,
items : Array.from(this.constructionManagerSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentConstructionManager,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentConstructionManager = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__constructionManager', this.currentConstructionManager);
window.location.href = url;
}
}
},{
label : NETWORK_MANAGER_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : NETWORK_MANAGER_LABEL,
width : 120,
items : Array.from(this.networkManagerSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentNetworkManager,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentNetworkManager = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__networkManager', this.currentNetworkManager);
window.location.href = url;
}
}
},{
label : PROJECT_MANAGER_LABEL,
labelPosition : 'above',
type : 'combo',
placeholder : PROJECT_MANAGER_LABEL,
width : 120,
items : Array.from(this.projectManagerSet),
callOnFunctions: true,
displayField : 'Name',
value : this.currentProjectManager,
listeners : {
change : (event) => {
if (!event || !event.value) {return;}
this.currentProjectManager = event.value;
let url = gantt_chart_helper.handleURLParamChange(window.location.href,'c__projectManager', this.currentProjectManager);
window.location.href = url;
}
}
}
]
}
}
Thank you in advance.
Kind Regards,
Revill