CODEWITHSUNDEEP
javascriptsapui5
user12727262
user12727262

Reputation:

How to set group title for ColumnListItems

I do have the following sap.m.Table:

<Table>
  <columns>
    <Column text="Name" width="200px" />
    <Column text="Number" width="200px" />
  </columns>
  <ColumnListItem>
    <cells> 
      <Text text="{modelExample>name}" />
      <Text text="{modelExample>number}" />
    </cells>
  </ColumnListItem>
</Table>

Model with the following data:

Model:

var oModelExample = new sap.ui.json.JSONModel();
this.setModel(oModelExample,"modelExample")
this.setData(modelExample.Model) //adds the JSON - Model, below - only the content of "Model"

Data:

var modelExample = {
  "Model": [
    { title: "First Title", name: "First Name", number: 0 },
    { title: "First Title", name: "Second Name", number: 1 },
    { title: "Second Title", name: "Third Name", number: 2 },
    { title: "Second Title", name: "Fourth Name", number: 3 }
  ]
};

Issue: It will iterate through all the entries and will put out the name and also number, but I want for it to also be able to put out the titles with the numbers / names which it does have.

Question: How to group the items in such a way that it puts out the title and also all the name / numbers which belong to the titles?

How it should look like:

Table

Upvotes: 0

Views: 138

Answers (2)

Marc
Marc

Reputation: 6190

It seems like what you want is grouping.

UI5 sap.m.Table grouped items

You can achieve that by using the grouping feature of your items binding.

<Table items="{
  path: 'modelExample>/',
  sorter: {
    path: 'title',
    group: true
  }
}">

Doc: Sorting, Grouping, and Filtering for List Binding

sap.m.Column doesn't have a text property.

You have to define your columns like this

<Column>
  <Text text="Name" />
</Column>

Upvotes: 1

DubZ
DubZ

Reputation: 582

What I think you are searching for is the complex binding command. In the index.html where you load the sap-ui-core.js, you need (if not already done) to set this command: data-sap-ui-xx-bindingSyntax="complex"

Then you can modify your code to this, for example:

<Table>
  <columns>
    <Column text="Name" width="200px" />
    <Column text="Number" width="200px" />
    <Column text="All" width="200px" />
  </columns>
  <ColumnListItem>
    <Text text="{name}" />
    <Text text="{number}" />
    <Text text="{title} {name} {number}" />
  </ColumnListItem>
</Table>

Does this answer your question?

Upvotes: 0

Related Questions