Skip to Content
0
Jun 08, 2018 at 08:18 AM

How can I reset a CSS style class on a div element which is not reachable via id?

258 Views

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");
}