Warm tip: This article is reproduced from serverfault.com, please click
sapui5

Table grouping resets selected values when adding new item

发布于 2020-12-04 10:43:57

Here we have a very basic table with an Add button and grouping activated. When I select values for the existing items and then press the button to add a new row, my selected values are getting reset, but without grouping it works fine. Am I doing something wrong or is this a bug?

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel" // sample model. Can be also an ODataModel.
], async (XMLView, JSONModel) => {
  "use strict";
  
  const control = await XMLView.create({
    definition: `<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
      <Table items="{
        path: '/tableItems',
        sorter: { path : 'group', group: true }
      }">
        <headerToolbar>
          <OverflowToolbar>
            <Title text="Test Table" />
            <ToolbarSpacer/>
            <Button id="addButton" text="Add" type="Emphasized" />
          </OverflowToolbar>
        </headerToolbar>
        <columns>
          <Column width="20rem">
            <Label text="col0"/>
          </Column>
          <Column width="20rem">
            <Label text="col1"/>
          </Column>
        </columns>
        <ColumnListItem vAlign="Middle">
          <Text text="{text}" />
          <Select forceSelection="false" width="100%" xmlns:core="sap.ui.core">
            <core:Item text="test1" key="test1" />
            <core:Item text="test2" key="test2" />
            <core:Item text="test3" key="test3" />
            <core:Item text="test4" key="test4" />
          </Select>
        </ColumnListItem>
      </Table>
    </mvc:View>`,
    afterInit: function() {
      this.byId("addButton").attachPress(onPressAdd, this);
      function onPressAdd() {
        const oModel = this.getModel();
        const aItems = oModel.getProperty("/tableItems");
        const newItems = aItems.concat({
          group: "3",
          text: "3-1",
          key: "3-1",
        });
        oModel.setProperty("/tableItems", newItems);
      }
    },
    models: new JSONModel({
      number: 0,
      tableItems: [
        {
          group: "1",
          text: "1-1",
          key: "1-1",
        },
        {
          group: "1",
          text: "1-2",
          key: "1-2",
        },
        {
          group: "2",
          text: "2-1",
          key: "2-1",
        },
        {
          group: "2",
          text: "2-2",
          key: "2-2",
        },
      ],
    }),
  });

  control.placeAt("content");
}));
<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/1.82.2/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-async="true"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Questioner
Lumpenstein
Viewed
0
分享
Boghyon Hoffmann 2020-12-04 19:19:05

Set the growing="true" to the sap.m.Table.

This enables GrowingEnablement internally which prevents rerendering the entire ListBase (Table) when the target gets invalidated. Only the necessary item will be then appended to the table.

Generally, in order to optimize the rendering behavior, it's always a good practice to..:

  • Enable the growing property if the table / list is editable, shrinkable, or expandable.
  • Add key: <propertyName with unique values> to the ListBinding info object to benefit from the Extended Change Detection if the model is a client-side model such as JSONModel. With an ODataModel, the key is automatically added by the framework.
<Table xmlns="sap.m"
  growing="true"
  items="{
    path: 'myModel>/myCollection',
    key: <propertyName>, (if 'myModel' is not an ODataModel)
    sorter: ...
  }"
>
Lumpenstein 2020-12-04 10:58:54

Unfortunately enabling growing does not solve the problem :/

Boghyon Hoffmann 2020-12-04 11:01:02

@Lumpenstein You have to put growing="true" to the table as a control property. I re-tried my solution with your code snippet from the question. Worked quite well.

Lumpenstein 2020-12-04 11:14:05

In jsfiddle and here in SO it works indeed, but somehow not in my project, even though I literarily copied the code now for testing. The only difference I see is that jsfiddle uses OpenUI5 Version 1.84.0 whereas in my project version 1.82.2 gets used.

Lumpenstein 2020-12-04 11:44:51

Created a new empty project, copied the code, not working, any idea what could cause this ?

Lumpenstein 2020-12-04 12:04:12

Yes from the WebIDE. Lucky you I hate their WebIDE would love to use VSCode or Webstorm instead.

热门帖子

1
这大约是独立开发的顶流了吧， v 友们怎么看
2
V 友们 今年刚需 需要买车 预算 20 出头 极氪 007 可以入吗
3
黑群和白群的差异，如何选择？
4
急收点发票（电脑、笔记本、硬盘、nas 、 iPad 、服务器、交通、鼠标、键盘）
5
自研摄影 App 胶片拾光，五一限时促销： 1 元购买终身会员
6
现在找工作怎么这么难
7
请问三星 S24 港版、美版，大家一般在哪儿购买？有没有渠道，介绍一下。
8
收一台 apple watch s7or s8 不锈钢（银钢）45mm，预算 2k 左右
9
私自把 Sim 卡数据写入 Esim，会被喝茶吗？
10
存款大概有 1.5%的利息差，我们能怎么做。。

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation
3
shadcn/ui, but for Svelte. ✨
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
5
Performance-portable, length-agnostic SIMD with runtime dispatch
6
ZK Credo
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
12
🎓 Path to a free self-taught education in Computer Science!
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
14
A collective list of free APIs
15
📚 Freely available programming books