Hello everyone,
I have a table containing some Select Options. I implemented a function which change the background of the choosen select option( so it's via addStyleClass()) on the Control. Now i implemented a reset function, which sets the select options to default. I also want to remove the Style Class, so that the background of the select is not colored anymore. RemoveStyleClass() is not working on that, as it's not on the control. So I tried to get the div element of the select an remove it via element.classList.remove(class). The Problem that I have is that I can access the table element but not the select.(if I change the id in the function). So is there mybe another option to remove the styleClass?
View.xml
<Table id="tableClientTechnologyFactors" items="{factorCatalog>/clientTechnology}" width="auto">
<columns>
<Column width="auto" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
<header>
<Text text="{i18n>factor}" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
</header>
<footer/>
</Column>
<Column width="auto" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
<header>
<Text text="{i18n>selection}" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
</header>
<footer/>
</Column>
<Column width="auto" hAlign="Left" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false">
<header>
<Text text="{i18n>importance}" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
</header>
<footer/>
</Column>
</columns>
<ColumnListItem id="selectClientTechnology">
<cells>
<HBox width="auto" justifyContent="SpaceBetween">
<ObjectIdentifier title="{path: 'factorCatalog>factor', formatter: '.formatter.translate'}" />
<Button text="" icon="sap-icon://hint" press="_onDialogButtonPress"/>
</HBox>
<Select change="_onSelectionChange" items="{path: 'factorCatalog>selectionOptions', templateShareable: 'true'}"
enabled="{= ${factorCatalog>enabled} === 'True'}" selectedKey="{factorCatalog>currentSelection}" width="15rem" >
<core:Item text="{path: 'factorCatalog>key', formatter: '.formatter.translate'}" key="{factorCatalog>key}"></core:Item>
</Select>
<SegmentedButton selectedKey="{factorCatalog>currentWeight}" select="_onSelectionChange"
items="{path: 'factorCatalog>importance', templateShareable: 'true'}" width="17rem">
<items>
<SegmentedButtonItem text="{path: 'factorCatalog>key', formatter: '.formatter.translate'}" key="{factorCatalog>key}"></SegmentedButtonItem>
</items>
</SegmentedButton>
</cells>
</ColumnListItem>
</Table>
parts of the Controller, part of resetFunction
else if (sKey === "clientTechnology") {
oModel.setProperty("/clientTechnology", aClientTechnology);
this._updateSelectionProgress(sKey);
var oElement = this.getView().byId("tableClientTechnologyFactors");
var oDomRef = oElement.getDomRef();
oDomRef.classList.remove("changeBackground");
Controller, updateBackgroundFunction ( applied on the Select Control)
_updateBackgroundColor: function(oSource){
var sKey = oSource.getSelectedKey();
var sKey = oSelect.getSelectedKey();
if (sKey !== "notSelected"){
oSource.addStyleClass("changeBackground");
}else {
oSource.removeStyleClass("changeBackground");
}