CODEWITHSUNDEEP
sapui5
Atul Chaudhary
Atul Chaudhary

Reputation: 3736

SAPUI5 Grid Table Batch Editing

I am working with SAPUI5 Grid Table batch editing(Editable or non-editable cell). I am thinking about two options mentioned below but I am not sure if I can achieve this or is it even supported by Grid Table

  1. I want to click on a grid cell and change the control from text to input so that I can edit record and save it later.

  2. Keep input editable to false and by clicking the cell or input, whichever is easy, change input editable to true. I was trying this option but once the input editable is set to false no event gets fired on input so, therefore, can't change the state at all.

Also, I have noticed that setting editable to false on Table itself doesn't do anything at least in my case it is not doing anything.

Any help or guidance will be appreciated.

Upvotes: 0

Views: 758

Answers (2)

Rafael López Martínez
Rafael López Martínez

Reputation: 2265

To use multiple type of controls you need to handle their specific events. Try setting hidden controls and handle their events to make them visible or not.

View

<VBox>
  <Link text="{OrderID}" press="onSFPressed" visible="true"/>
  <Input value="{OrderID}" submit="onSFSubmitted" change="onSFChanged" visible="false"/>
</VBox>

Controller

onSFPressed: function(oEvent){
    var oText = oEvent.getSource();
    var oInput = oEvent.getSource().getParent().getItems()[1];

    oText.setVisible(false);
    oInput.setVisible(true);
},

onSFSubmitted: function(oEvent){
    var oText = oEvent.getSource().getParent().getItems()[0];
    var oInput = oEvent.getSource();

    oText.setVisible(true);
    oInput.setVisible(false);
},

onSFChanged: function(oEvent){
    var oText = oEvent.getSource().getParent().getItems()[0];
    var oInput = oEvent.getSource();

    oText.setVisible(true);
    oInput.setVisible(false);
}

Here the snippet: https://plnkr.co/edit/nSMv3BZoifdQaqWYtZgM?p=preview

Upvotes: 0

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

It seems that you need this feature only for the sake of visual representation (you don't wanna see the raw input in each grid table cell).

The easiest solution would be to use sap.m.Input control in each cell and play with CSS to fake the sap.m.Text if it is not focused.

I've create a simple example: http://jsbin.com/ziwoyel/edit?html,js,output

CSS:

 .myCustomInputClass input {
    border: 0;
    background: none;
  }

This is the most simple and lightweight solution.

If you really need switching between 2 controls, I would recommend creating a custom control, which encapsulates the logic of switching between 2 states (2 controls) based on focusing in/out events.

Upvotes: 0

Related Questions