IPivot Control Display in Store Commerce

[Jaysriyuvaraj]

Hi Team,

I hope everyone is having a great day. I would like to have a question about IPivot Control Display in Store Commerce. As part of Commerce SDK Migration, we are migrating out Pivot control to IPivot control. we have made the changes to make the IPivot control as given below. After the code changes, we are getting the IPivot control but the DataList that we are trying to map is not placing in the proper Div.

HTML Code:

        <div id="comboDataListPivot" data-bind="msPosPivot: pivot" style="height: 250px !important">
            <div id="divPivotDtl" data-bind="msPosPivotItem: pivotDtlItem">
                <div id="DLPivotItemDtl" data-bind="msPosDataList: dataListDtl" style="height: 210px !important">
                </div>
            </div>
            <div id="divPivot" data-bind="msPosPivotItem: pivotItem">
                <div id="DLPivotItem" data-bind="msPosDataList: dataListPay" style="height: 210px !important">
                </div>
            </div>
        </div>
    </div>
</div>

TypeScript Code:

import * as Views from "PosApi/Create/Views";
import ExampleViewModel from "./ExampleViewModel";
import { DataListInteractionMode, IDataList, IDataListOptions, IPivot, IPivotItem, IPivotOptions } from "PosApi/Consume/Controls";
import { ObjectExtensions } from "PosApi/TypeExtensions";
export default class ExampleView extends Views.CustomViewControllerBase {
public readonly viewModel: ExampleViewModel;

public pivotDtl: IPivot;
public pivotDtlItem: IPivotItem;
public pivotDtlOptions: IPivotOptions;

public pivot: IPivot;
public pivotItem: IPivotItem;
public pivotOptions: IPivotOptions;

public dataListPay: IDataList<string>;
public dataListDtl: IDataList<string>;
public datalistoptionsDtl: IDataListOptions<string>;
public datalistoptions: IDataListOptions<string>;

constructor(context: Views.ICustomViewControllerContext) {
    let config: Views.ICustomViewControllerConfiguration = {
        title: "Example View",
    };

    super(context, config);
    this.pivotDtlItem = {
        id: "divPivotDtl", header: "Ingredients", onReady: (element: HTMLElement) => { return this.pivotDtlReady(); }, onShown: () => { return; }
    };

    this.pivotItem = {
        id: "divPivot", header: "Payments", onReady: (element: HTMLElement) => { return this.pivotReady(); }, onShown: () => { return; }
    };
}

public dispose(): void {
    ObjectExtensions.disposeAllProperties(this);
}

public onReady(element: HTMLElement): void {
    this.pivotDtlOptions = {
        items:
            [
                this.pivotDtlItem,
                this.pivotItem
            ]
    };
    let pivotDtlRootElem: HTMLDivElement = element.querySelector("#comboDataListPivot") as HTMLDivElement;
    this.pivot = this.context.controlFactory.create(this.context.logger.getNewCorrelationId(), "Pivot", this.pivotDtlOptions, pivotDtlRootElem);
}

public pivotDtlReady(): void {
    this.datalistoptionsDtl = {
        interactionMode: DataListInteractionMode.SingleSelect,
        data: [],
        columns: [
            {
                title: "Column1",
                ratio: 40, collapseOrder: 1, minWidth: 100,
                computeValue: string => "Data1"
            },
            {
                title: "Column2",
                ratio: 60, collapseOrder: 2, minWidth: 100,
                computeValue: string => "Data2"
            }
        ]
    };
    let datalistdtlrootelem: HTMLDivElement =  element.querySelector("#DLPivotItemDtl") as HTMLDivElement;
    this.dataListDtl = this.context.controlFactory.create(this.context.logger.getNewCorrelationId(), "DataList", this.datalistoptionsDtl, datalistdtlrootelem);
}

public pivotReady(): void {
    this.datalistoptions = {
        interactionMode: DataListInteractionMode.SingleSelect,
        data: [],
        columns: [
            {
                title: "Column1",
                ratio: 40, collapseOrder: 1, minWidth: 100,
                computeValue: string => "Data1"
            },
            {
                title: "Column2",
                ratio: 60, collapseOrder: 2, minWidth: 100,
                computeValue: string => "Data2"
            }
        ]
    };
    let datalistrootelem: HTMLDivElement = element.querySelector("#DLPivotItem") as HTMLDivElement; 
    this.dataListPay = this.context.controlFactory.create(this.context.logger.getNewCorrelationId(), "DataList", this.datalistoptions, datalistrootelem);
}

}

Current Output:

With this info, May i know if there are any changes needs to be taken care to make the DataList to be placed inside the Pivot?
If you can provide some sample document for pivot control with data binding, it will be helpful.

Thanks in advance.