Challenges with displaying TreeTable in SAPUI5

I have a case with a single xml view. Inside this view, there is a treetable with two columns.

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="sdf_test.App" xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:t="sap.ui.table" xmlns:var="sap.ui.comp.variants" xmlns:commons="sap.ui.commons"
        xmlns:layout="sap.ui.layout">
    <App>
        <pages>
            <Page>
                <content>
                    <t:TreeTable id="mainPageTable" rowHeight="40"
                        enableColumnReordering="false" visibleRowCount="14">
                        <t:columns>
                            <!-- <t:Column> <CheckBox /> </t:Column> -->
                            <t:Column sortProperty="landscapeName" width="400px">
                                <Label text="sample" />
                                <t:template>
                                    <Link text="{name}" enabled="{enabled}"/>
                                </t:template>
                            </t:Column>
                            <t:Column>
                                <Label text="Status" />
                                <t:template>
                                    <Text text="{nodeName}" />
                                </t:template>
                            </t:Column>
                        </t:columns>
                    </t:TreeTable>
                </content>
            </Page>
        </pages>
    </App>
</core:View>

In the controller, I populate this treetable as shown below:

    onInit : function() {
                            var that = this;
                            var oView = that.getView();
                            var mainPageTable = oView.byId("mainPageTable");
                             var oData = {
                                        root:{
                                            0: {
                                                name: "item1",
                                                enabled: true,
                                                0: {
                                                    name: "subitem1-1",
                                                    enabled: true,
                                                },
                                                1: {
                                                    name: "subitem1-2",
                                                    enabled: false,
                                                }
                                            },  
                                        }
                                };
    var oModel = new sap.ui.model.json.JSONModel();
                            oModel.setData(oData);
                            mainPageTable.setModel(oModel);
                            mainPageTable.bindRows("/root");
        }
});

The issue I am facing is that when I initially open the "item1" root branch, I see one item enabled and the second one disabled. But if I close "item1" and reopen it, both fields become disabled, as illustrated in the images below.

First view: https://i.sstatic.net/qHu4S.png

Second view:

https://i.sstatic.net/Imo6x.png

Answer №1

To solve this issue, implement the toggleOpenState function for the treetable and then trigger rerender() each time the function is executed.

<t:TreeTable toggleOpenState="toggleOpenState"/>


toggleOpenState : function(){

   this.byId("mainPageTable").rerender();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Fusion of Strings and Arrays of Javascript Objects using jQuery and JSON

Trying to achieve a simple task, but not very proficient in jQuery so struggling to figure it out. Want to send JSON data to an ASP.NET Controller. Data includes strings and a list of objects. The code snippet would appear like this: View: $(document). ...

Experiencing difficulties with arrays in JavaScript while using React Native

Programming Challenge let allURL = [] const [toReadURL, setToReadURL] = useState([]) useEffect(() => { const listReference = sReference(storage, parameterKey) // Retrieve all the prefixes and items. listAll(listReference) .then((res ...

Having an issue with retrieving value from a textfield in JavaScript

<input id="checkOldPassword" type="button" title="Check New Password" value="Check New Password" onclick="checkPassword()" /> <input id="newPassword" type="text" maxlength="8" min="8" /> <script language="javascript"> function checkPassw ...

Discovering instructions on locating Material UI component documentation

I'm having trouble locating proper documentation for MUI components. Whenever I attempt to replicate an example from the site, I struggle to customize it to fit my requirements. There are numerous props used in these examples that I can't seem to ...

No data is being returned by the Jquery Ajax function

I am experiencing an issue with a Jquery Ajax call in my code: $('body').on('click', '#btnPopulate', function() { alert(getTree()); }); function getTree() { var url = getUrlPath() + "/StoryboardAdmin/BuildStoryboardViewMode ...

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

Tips for automatically updating the time in a React application while utilizing the 'date-fns' library

I've been working on my personal Portfolio using React and I'm looking to add a feature on the landing page that showcases my local time and timezone to potential recruiters. However, there's a small hiccup in my implementation. The displaye ...

Utilizing React and MaterialUI to create a dynamic GridLayout with paper elements

I am using the react-grid-layout library to create a dynamic grid where each item is a paper component from the React Material UI. However, I encountered an issue while running the application. The browser displayed the error message: "TypeError: react__W ...

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

How to make a node_module global with the power of Webpack 2

I'm currently utilizing a package in an Angular project that can be found at the following link: https://github.com/pablojim/highcharts-ng One of the requirements for this package is that highcharts needs to be included as a global dependency by add ...

Step-by-step guide on bypassing Content Security Policy with JavaScript

I have Content Security Policy enabled for security purposes in my current project, but I need to disable it for certain JavaScript files. Can this be done? I am trying to make API calls from my JavaScript files in order to retrieve results. ...

Customize the number of tags for React Material-UI autocomplete to only display the specified amount

I am utilizing Autocomplete in React MUI to allow for the selection of multiple options. When the Autocomplete component is out of focus, I want it to display only the tags that fit into one row. I can achieve this by using the limitTags={3} property. How ...

The resolution of deferred actions is not as successful as foreseen

In my code, I have a method that queries documentdb for a specific document and returns the results to the caller. fetch: function(query) { var fetchDeferred = q.defer(); client.queryDocuments(collectionLink, query).toArray(function(err, docs) { ...

"Need to remove all chosen selections within an ng-repeat loop? Here's how

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = [{ model: "Ford Mustang", color: "red" }, { model: "Fiat 500", color: "white" }, { model: " ...

AngularJS - the element of surprise in execution sequence

Encountering a puzzling issue that exclusively affects Internet Explorer (any version) and not Chrome. An "items" array is stored within the "doc" object. Users have the capability to edit items, which essentially deletes the item but retains its content ...

I am curious about why I am unable to utilize inline functions in component props. Could you please provide a detailed explanation and perhaps give an example to illustrate? Furthermore, what is

Please take note: The component prop accepts a component, not a render function. Do not pass an inline function (e.g. component={() => }), as this will cause your component to unmount and remount, losing all state when the parent component re-renders. F ...

Ways to personalize Angular's toaster notifications

I am currently utilizing angular-file-upload for batch file uploads, where I match file names to properties in a database. The structure of the files should follow this format: 01-1998 VRF RD678.pdf VRF represents the pipeline name RD represents the lo ...

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

Discord.JS Guild Member Cache Responses that are not recognized as valid

My automated messaging bot has been running smoothly for the past 6-8 months, but recently it encountered a strange issue with a specific user. Upon checking the cache of the Discord server it operates on, I noticed that it only returned two members - myse ...