Steps for removing a row in a grid table that has been filled with data from a JSON model in SAPUI5

Looking for guidance on deleting a row from a table that is linked with jModel upon clicking the trash button.

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

Here is the data:

_data: {
            requestSpecific: [{nArt= "A002", name="Computador, quantity=2},{},{...}],
            items: [],
            partner: [],
            vatGroups: [],
            countries: [],
            totals: [],
            ttlstotais: []
        },

The model name is jModel. I may have made mistakes in the model setup here, but the code seems fine.

The table is set as a grid table in Single mode.

Below is the event triggered by the "trash" button.

onDelArtigoPress: function (oEvent) {
            var iIndex = oTable.getSelectedIndex();
            var jData = this.jModel.getProperty("/requestSpecific");
            var sMsg;
            if (iIndex < 0) {
                sMsg = "Please select an item to delete";
            } else {
               //// 1st - remove the object from the model 
               //// 2nd - refresh the model, which will automatically update the table
            }
}

I am facing difficulty with the first step. I believe I need to use the splice prototype method, but I do not know how to determine the position of the object in the array (jModel).

If you can provide assistance, it would be greatly appreciated!

Answer №1

I have successfully resolved the issue.

onDeleteArticlePress: function (event) {
        var table = this.byId("articleTableId");
        var index = table.getSelectedIndex(); 
        var message;
        if (index < 0) {
            message = "No row selected";
            MessageToast.show(message);
        } else {
            var data = this._data.requestSpecific;
            data.splice(index, 1);
            this.jsonModel.setProperty("/requestSpecific", data);

        }

    },

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

Finding the quantity of map markers in each country using ReactJS

I have been utilizing the Citybik.es API () to display data on a Leaflet map. https://i.sstatic.net/l50gE.jpg Currently, the code is displaying all items on the map. However, upon analysis, I am interested in organizing the data to allow users to explore ...

identify when the React component has reached the bottom of the element by reading the

Is there a way to access the scroll handler's event without being able to access offsetTop, scrollTop, etc? class App extends React.Component { handleScroll = e => { console.log(e.target.scrollTop); }; componentDidMo ...

Understanding the Process of Accessing Array Values in Immutable.js

I'm feeling a little puzzled and struggling to figure this out. Let's say I have the following code: const AnObj = Immutable.Map({ a : "a", b : Immutable.List.of( a, b, c, Immutable.Map({ a : "a" }) ) }); When working with Immu ...

Learn the process of revealing an item by clicking on the button

Looking for help with React I have a situation where I want to reduce an item by clicking a button, but currently the button does nothing. Can someone please assist me with this issue? const [cars, setCars] = useCars([]) const handleDelete = id => ...

Experiencing difficulties with updating populated inputs that are connected to fetched data as they are not reflecting changes when modified

I am currently facing challenges with handling text fields in my web application. I need to retrieve data from the database, populate it in the appropriate fields, allow users to edit the information, and save any changes made. However, I have encountered ...

Having trouble setting the `variant='dense'` for material-ui Toolbar – it remains at a height of 64px no matter what

Implemented a hello world AppBar/Toolbar with the variant='dense' style. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWo ...

Show the value in the input text field if the variable is present, or else show the placeholder text

Is there a ternary operator in Angular 1.2.19 for templates that allows displaying a variable as an input value if it exists, otherwise display the placeholder? Something like this: <input type="text "{{ if phoneNumber ? "value='{{phoneNumber}}&a ...

The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure

My goal is to create a simple structure: app --_layout --public-footer ----public-footer.html/ts/css files --public-header ----public-header.html/ts/css files --public-layout ----public-layout.html/ts/css files In public-layout.html, the stru ...

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

I need some assistance with a specific topic. In my scenario, I have two textboxes on my view. I want the value generated in my controller to be applied to textbox2 when there is a change in textbox1. For instance, if I enter a username in textbox1, textb ...

The execution of JQuery/Javascript is restricted to only the initial condition within a Visualforce page utilizing the apex:outputpanel tag

After using only JavaScript for some time, I decided to try out jQuery. However, I'm facing an issue with executing a jQuery function. It seems that only the first condition in my code (the first IF) is being executed, while the second one (the second ...

What is the method to have VIM recognize backticks as quotes?

Currently working in TypeScript, I am hoping to utilize commands such as ciq for modifying the inner content of a template literal. However, it appears that the q component of the command only recognizes single and double quotation marks as acceptable ch ...

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Hello, I am looking for a little help with reading multiple values using multiple buttons such as 1, 2, and 3, and displaying the output in the input like '123' instead of just one number at a time. Concatenate numbers with every click. <inpu ...

Dealing with ReactJs Unhandled Promise Rejection: SyntaxError - Here's the Solution

Struggling to use the Fetch API in ReactJS to retrieve a list of movies. Encountering an issue, can anyone offer assistance? fetch("https://reactnative.dev/movies.json", { mode: "no-cors", // 'cors' by default }) ...

Encountering an issue while trying to install nodemon on Ubuntu 18.04

After attempting to install nodemon using the command: sudo npm i --save-dev nodemon I encountered the following error message: npm ERR! path /home/dominikpatera/Dropbox/Projekty/Fytwa/server/node_modules/npm/node_modules/abbrev npm ERR! code ENOENT npm ...

A JavaScript variable that holds simple text alongside HTML tags

Here is the JavaScript code snippet: function startChatSession(){ $.ajax({ url: "chat.php?action=startchatsession", cache: false, dataType: "json", success: function(data) { username = data.username; $.each(data.items, function(i,item) ...

Refreshing divs each time a new record is added to the MySQL database

I am currently developing a SCADA system on my website and looking to update specific divs with GIFs only when there is a change in any of the two tables in my MySQL database. I want this update to occur every time a new record is added to one of the tabl ...

Issue: Amcharts Dataloader plugin does not load the chart when the PHP file outputting JSON is located in the include folder

Currently, I am utilizing Amcharts to generate column charts that can be rotated into horizontal bar charts. To achieve this, I am leveraging the dataLoader plugin provided by Amcharts. This plugin allows me to connect to a PHP file which in turn communica ...

`Can JavaScript or jQuery be used to conceal the referrer and implement a redirect?`

I'm having trouble making this work. Can anyone offer assistance? When I open this page in my browser: http://www.domain.com/in.php?public=1&private=2 The code below is being called to reload the page without the private value: window.location ...

Issue with React-Native FlatList's scrolling functionality

Struggling with implementing a scrolling FlatList in React Native. Despite trying various solutions found on Stack Overflow, such as adjusting flex properties and wrapping elements in views, the list still refuses to scroll. Snippet of code (issue is with ...

Is your console showing an error message about an incompatible IE Document Mode?

I am encountering an issue with the following code in my jsp page. <!--[if lt IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]--> <!--[if IE 7]>& ...