Search code examples
sapui5

How to make only one cell editable in smart table sapui5


I am using a sapui5 smart table to list down my products. It includes product code, product description and order quantity.

Among these three fields i want to update only the order quantity. It should be an inline editing in the table.

In my smart table i have enabled the property "editable" as "true". It makes the entire row is editable. Instead of making entire row editable, i want make only one cell to be editable.

Example

 <smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="ZDEMO_C_MyEntityType" persistencyKey="SmartFilter_Explored">
 </smartFilterBar:SmartFilterBar>

 <smartTable:SmartTable id="mySmartTable" 
      smartFilterId="smartFilterBar"
      tableType="GridTable" 
      editable="true" 
      entitySet="ZDEMO_C_MyEntity" 
      useVariantManagement="false" 
      useTablePersonalisation="true" 
      header="My Products" 
      showRowCount="true" 
      useExportToExcel="true" 
      enableAutoBinding="true">
 </smartTable:SmartTable>

Solution

  • You can add a sap ui table inside the smart table and add columns with customdata property. Follow these steps.

    1. Make editable="true" as editable="false"
    2. In your xml, make sure to add this namespace xmlns:core="sap.ui.core"
    3. Within the smarttable tag add below.

      <smartTable:SmartTable .................................
      
               <Table>
                  <columns>
                      <Column>
                          <customData>
                              <core:CustomData key="p13nData" value='\{"columnKey": "OrderQty", "leadingProperty": "OrderQty", "columnIndex":"2"}'/>
                          </customData>
                          <Text text="Order Qty"/>
                      </Column>
      
                  </columns>
                  <items>
                      <ColumnListItem>
                          <cells>
                              <Input value="{OrderQty}" type="Number" editable="true"/>
                          </cells>
                      </ColumnListItem>
                  </items>
              </Table>
      
        </smartTable:SmartTable>