Answer

I need to bind two grids with single view-Modern UI

Forum|Forum|7 months ago
April 28, 2025
8 replies
131 views

ashrivastava42
Freshman I

I have view which is used with 2 grids on different tabs and showing different columns, like view have total 12 column, first tab grid show 7 columns, second grid show 5 columns.

we are doing same, in classic UI, where we define grid in aspx, but in modern UI we do not have option to define the grid, how can achieve this case.

Grid1

Grid2

Modern UI

<qp-tab id="tab_0" caption="LOT/SERIAL DETAILS">

<qp-grid id="lotNumbersGrid1" view.bind="BatchLotDetails"></qp-grid>

</qp-tab>

<qp-tab id="tab_3" caption="LOT/SERIAL DETAILS">

<qp-grid id="lotNumbersGrid2" view.bind="BatchLotDetails"></qp-grid>

</qp-tab>

Best answer by aiwan

This is how I have mine set and it works:

import { createCollection, createSingle, PXScreen,
    graphInfo, PXActionState, viewInfo, handleEvent,
    CustomEventType, actionConfig, RowSelectedHandlerArgs,
	PXViewCollection, PXPageLoadBehavior, ControlParameter, PXView,
	PXFieldState, controlConfig, columnConfig, gridConfig,
	GridFastFilterVisibility, GridPreset, PXFieldOptions,
} from "client-controls";



@graphInfo({graphType: "NCRLog.GCPressGlueLogEntry", primaryView: "Header", })
export class QC302000 extends PXScreen {

   	@viewInfo({containerName: "Header"})
	Header = createSingle(PressGlueLogHeader);
   	@viewInfo({containerName: "Assembly"})
	Assembly = createCollection(Assembly);
	@viewInfo({ containerName: "Press" })
	Press = createCollection(Press);
	@viewInfo({ containerName: "Glue" })
	Glue = createCollection(Glue);
	@viewInfo({ containerName: "Metal" })
	Metal = createCollection(Metal);
}

export class PressGlueLogHeader extends PXView  {

	PressNo : PXFieldState;
	@controlConfig({allowEdit:true})
	BatchNbr : PXFieldState;
	DocType : PXFieldState;
	Status : PXFieldState;
	Date : PXFieldState;
	GlueManufacturer : PXFieldState;
	GlueSetting : PXFieldState;
	DiffPressure : PXFieldState;
	@controlConfig({allowEdit:true})
	SiteID : PXFieldState;
	TargetWeightg : PXFieldState;
	Resultg : PXFieldState;
	@controlConfig({displayMode:"text"})
	TestedBy : PXFieldState;
}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Assembly extends PXView {

	@columnConfig({ width: 140 }) PressNo: PXFieldState;
	@columnConfig({ width: 150 }) PressID: PXFieldState;
	@columnConfig({ width: 100 }) Core: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbr: PXFieldState;
	@columnConfig({ width: 180 }) StartTemp: PXFieldState;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" }) FirstTime: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" }) LastTime: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100 }) OpenTimeMin: PXFieldState;
}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Press extends PXView {

	@columnConfig({ width: 100 }) Pressurepsi: PXFieldState;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" })
	StartTimePress: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" })
	ExitTimePress: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100 }) PressTimeMins: PXFieldState;
	@columnConfig({ width: 100 }) CureTimeMins: PXFieldState;

}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Glue extends PXView {

	@columnConfig({ width: 220 }) GSM: PXFieldState;
	@columnConfig({ width: 250 }) Margins: PXFieldState;
	@columnConfig({ width: 180 }) SpeedMmin: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbrptA: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbrptB: PXFieldState;

}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Metal extends PXView {

	@columnConfig({ width: 220 }) CoilRefFront: PXFieldState;
	@columnConfig({ width: 220 }) CoilRefBack: PXFieldState;
	@columnConfig({ width: 100 }) SpectroVal: PXFieldState;
}

HTML:

<template>

<qp-template id="Header_PXLayoutRule1" name="1-1-1"> 
	<qp-fieldset id="form_0" wg-container="Header_form" view.bind="Header" slot="A" >
		<field name="PressNo" ></field>
			<field name="BatchNbr" config-allow-edit.bind="true"></field>
			<field name="DocType" ></field>
			<field name="Status" ></field>
		</qp-fieldset>
				<qp-fieldset id="Header_CstPXLayoutRule17" wg-container="Header_form" view.bind="Header" slot="B" >
		<field name="Date" ></field>
			<field name="GlueManufacturer" ></field>
			<field name="GlueSetting" ></field>
			<field name="DiffPressure" ></field>
		</qp-fieldset>
				<qp-fieldset id="Header_CstPXLayoutRule18" wg-container="Header_form" view.bind="Header" slot="C" >
		<field name="SiteID" config-allow-edit.bind="true"></field>
			<field name="TargetWeightg" ></field>
			<field name="Resultg" ></field>
			<field name="TestedBy" ></field>
		</qp-fieldset>
			</qp-template> 
<qp-tabbar id="CstPXTab13">
	<qp-tab id="CstPXTab13_0" caption="Assembly">
         <qp-grid id="Details_CstPXGrid14" wg-container view.bind="Assembly"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_1" caption="Press Settings">
         <qp-grid id="Details_CstPXGrid15" wg-container view.bind="Press"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_2" caption="Glue Line Settings">
         <qp-grid id="Details_CstPXGrid16" wg-container view.bind="Glue"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_3" caption="Metal Line">
         <qp-grid id="Details_CstPXGrid27" wg-container view.bind="Metal"></qp-grid>
    </qp-tab>
</qp-tabbar>

</template>

Graph:

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Details;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Assembly;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Press;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Glue;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Metal;

Hope this can help.

aiwan
Captain II
Forum|Forum|7 months ago
April 28, 2025

Hi @ashrivastava42

I had a similar issue, I resorted to using 2 seperate views in the graph, and defined them seperately in the .ts file, each only containing the required fields.

Aleks

ashrivastava42
Author
Freshman I
Forum|Forum|7 months ago
April 30, 2025

I have created a copy of the existing view, but its not working, I am sharing the code to identify where the things are missed as per suggested, following is Modern UI output of both grid after using below code

--------------------.cs in graph---------------

public PXSelect<BatchLotDetail, Where<BatchLotDetail.batchID, Equal<Current<BatchEntry.batchOrdID>>>> BatchLotDetails;

public PXSelect<BatchLotDetail, Where<BatchLotDetail.batchID, Equal<Current<BatchEntry.batchOrdID>>>> BatchLotDetailsCopy;

---------------------.ts file----------------------

export class PM3020 extends PXScreen {

@viewInfo({containerName: "LOT/SERIAL DETAILS"})

BatchLotDetailsCopy= createCollection(BatchLotDetailCopy);

@viewInfo({containerName: "LOT/SERIAL DETAILS"})

BatchLotDetails = createCollection(BatchLotDetail);

}

@gridConfig({

initNewRow: true,

syncPosition: true,

showFastFilter: GridFastFilterVisibility.False,

preset: GridPreset.Details,

autoAdjustColumns: true

})

export class BatchLotDetail extends PXView {

@columnConfig({width: 198, allowShowHide: GridColumnShowHideMode.Server}) LotSerialNbr : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 130, textAlign: TextAlign.Left}) LocationID : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 63}) UOM : PXFieldState;

@columnConfig({allowNull: false, width: 90, textAlign: TextAlign.Right}) Qty : PXFieldState;

@columnConfig({allowNull: false, width: 90, textAlign: TextAlign.Right}) AvailQty : PXFieldState;

@columnConfig({width: 90}) ExpireDate : PXFieldState;

}

@gridConfig({

initNewRow: true,

syncPosition: true,

showFastFilter: GridFastFilterVisibility.False,

preset: GridPreset.Details,

autoAdjustColumns: true

})

export class BatchLotDetailCopy extends PXView {

SearchByLot: PXActionState;

SearchByBatch: PXActionState;

@columnConfig({width: 130, textAlign: TextAlign.Left}) InventoryID : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 198, allowShowHide: GridColumnShowHideMode.Server}) LotSerialNbr : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 130, textAlign: TextAlign.Left}) LocationID : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 63}) UOM : PXFieldState;

@columnConfig({allowNull: false, width: 90, textAlign: TextAlign.Right}) Qty : PXFieldState;

@columnConfig({allowNull: false, width: 90, textAlign: TextAlign.Right}) AvailQty : PXFieldState;

@columnConfig({width: 90}) ExpireDate : PXFieldState;

@columnConfig({width: 90, allowShowHide: GridColumnShowHideMode.Server}) RefOrderType : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 130, textAlign: TextAlign.Left}) RefProdOrdID : PXFieldState<PXFieldOptions.CommitChanges>;

@columnConfig({width: 130}) BOMID : PXFieldState;

@columnConfig({width: 130}) FillLevel : PXFieldState;

@columnConfig({width: 130}) FillUOM : PXFieldState;

}

------------------.html----------------------------

<qp-tab id="tab_0" caption="LOT/SERIAL DETAILS">

<qp-grid id="lotNumbersGrid1" view.bind="BatchLotDetailsCopy"></qp-grid>

</qp-tab>

<qp-tab id="tab_3" caption="LOT/SERIAL DETAILS">

<qp-grid id="lotNumbersGrid2" view.bind="BatchLotDetails"></qp-grid>

</qp-tab>

please let me know if anything more is needed

aiwan
Captain II
Forum|Forum|7 months ago
April 30, 2025

@ashrivastava42

You should differentiate the captions.

Aleks

ashrivastava42
Author
Freshman I
Forum|Forum|7 months ago
May 1, 2025

Issue still exist After changing the caption of grid and tab,

<qp-tab id="tab_0" caption="LOT/SERIAL DETAILS1" >

<qp-grid id="lotNumbersGrid1" view.bind="BatchLotDetailsCopy" caption="LOT/SERIAL Rework DETAILS">

</qp-grid>

</qp-tab>

<qp-tab id="tab_0" caption="LOT/SERIAL DETAILS2" >

<qp-grid id="lotNumbersGrid2" view.bind="BatchLotDetails" caption="LOT/SERIAL DETAILS"> </qp-grid>

</qp-tab>

aiwan
Captain II
Forum|Forum|7 months ago
May 1, 2025

@ashrivastava42

Maybe try changing your container names?

Aleks

ashrivastava42
Author
Freshman I
Forum|Forum|7 months ago
May 2, 2025

Yes, as you see in my shared code grid used in tab changing and both names are different, any other suggestion to resolve it.

aiwan
Captain II
Answer
Forum|Forum|7 months ago
May 2, 2025

This is how I have mine set and it works:

import { createCollection, createSingle, PXScreen,
    graphInfo, PXActionState, viewInfo, handleEvent,
    CustomEventType, actionConfig, RowSelectedHandlerArgs,
	PXViewCollection, PXPageLoadBehavior, ControlParameter, PXView,
	PXFieldState, controlConfig, columnConfig, gridConfig,
	GridFastFilterVisibility, GridPreset, PXFieldOptions,
} from "client-controls";



@graphInfo({graphType: "NCRLog.GCPressGlueLogEntry", primaryView: "Header", })
export class QC302000 extends PXScreen {

   	@viewInfo({containerName: "Header"})
	Header = createSingle(PressGlueLogHeader);
   	@viewInfo({containerName: "Assembly"})
	Assembly = createCollection(Assembly);
	@viewInfo({ containerName: "Press" })
	Press = createCollection(Press);
	@viewInfo({ containerName: "Glue" })
	Glue = createCollection(Glue);
	@viewInfo({ containerName: "Metal" })
	Metal = createCollection(Metal);
}

export class PressGlueLogHeader extends PXView  {

	PressNo : PXFieldState;
	@controlConfig({allowEdit:true})
	BatchNbr : PXFieldState;
	DocType : PXFieldState;
	Status : PXFieldState;
	Date : PXFieldState;
	GlueManufacturer : PXFieldState;
	GlueSetting : PXFieldState;
	DiffPressure : PXFieldState;
	@controlConfig({allowEdit:true})
	SiteID : PXFieldState;
	TargetWeightg : PXFieldState;
	Resultg : PXFieldState;
	@controlConfig({displayMode:"text"})
	TestedBy : PXFieldState;
}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Assembly extends PXView {

	@columnConfig({ width: 140 }) PressNo: PXFieldState;
	@columnConfig({ width: 150 }) PressID: PXFieldState;
	@columnConfig({ width: 100 }) Core: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbr: PXFieldState;
	@columnConfig({ width: 180 }) StartTemp: PXFieldState;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" }) FirstTime: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" }) LastTime: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100 }) OpenTimeMin: PXFieldState;
}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Press extends PXView {

	@columnConfig({ width: 100 }) Pressurepsi: PXFieldState;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" })
	StartTimePress: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100, editorConfig: { timeMode: true }, format: "t" })
	ExitTimePress: PXFieldState<PXFieldOptions.CommitChanges>;
	@columnConfig({ width: 100 }) PressTimeMins: PXFieldState;
	@columnConfig({ width: 100 }) CureTimeMins: PXFieldState;

}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Glue extends PXView {

	@columnConfig({ width: 220 }) GSM: PXFieldState;
	@columnConfig({ width: 250 }) Margins: PXFieldState;
	@columnConfig({ width: 180 }) SpeedMmin: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbrptA: PXFieldState;
	@columnConfig({ width: 140 }) BatchNbrptB: PXFieldState;

}

@gridConfig({
	initNewRow: true,
	showFastFilter: GridFastFilterVisibility.False,
	preset: GridPreset.Details
})
export class Metal extends PXView {

	@columnConfig({ width: 220 }) CoilRefFront: PXFieldState;
	@columnConfig({ width: 220 }) CoilRefBack: PXFieldState;
	@columnConfig({ width: 100 }) SpectroVal: PXFieldState;
}

HTML:

<template>

<qp-template id="Header_PXLayoutRule1" name="1-1-1"> 
	<qp-fieldset id="form_0" wg-container="Header_form" view.bind="Header" slot="A" >
		<field name="PressNo" ></field>
			<field name="BatchNbr" config-allow-edit.bind="true"></field>
			<field name="DocType" ></field>
			<field name="Status" ></field>
		</qp-fieldset>
				<qp-fieldset id="Header_CstPXLayoutRule17" wg-container="Header_form" view.bind="Header" slot="B" >
		<field name="Date" ></field>
			<field name="GlueManufacturer" ></field>
			<field name="GlueSetting" ></field>
			<field name="DiffPressure" ></field>
		</qp-fieldset>
				<qp-fieldset id="Header_CstPXLayoutRule18" wg-container="Header_form" view.bind="Header" slot="C" >
		<field name="SiteID" config-allow-edit.bind="true"></field>
			<field name="TargetWeightg" ></field>
			<field name="Resultg" ></field>
			<field name="TestedBy" ></field>
		</qp-fieldset>
			</qp-template> 
<qp-tabbar id="CstPXTab13">
	<qp-tab id="CstPXTab13_0" caption="Assembly">
         <qp-grid id="Details_CstPXGrid14" wg-container view.bind="Assembly"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_1" caption="Press Settings">
         <qp-grid id="Details_CstPXGrid15" wg-container view.bind="Press"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_2" caption="Glue Line Settings">
         <qp-grid id="Details_CstPXGrid16" wg-container view.bind="Glue"></qp-grid>
    </qp-tab>
<qp-tab id="CstPXTab13_3" caption="Metal Line">
         <qp-grid id="Details_CstPXGrid27" wg-container view.bind="Metal"></qp-grid>
    </qp-tab>
</qp-tabbar>

</template>

Graph:

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Details;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Assembly;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Press;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Glue;

public SelectFrom<PressGlueLogDetails>.
    Where<PressGlueLogDetails.pressNo.IsEqual<PressGlueLogHeader.pressNo.FromCurrent>>.View Metal;

Hope this can help.

Aleks

aiwan
Captain II
Forum|Forum|7 months ago
May 2, 2025

Yes, as you see in my shared code grid used in tab changing and both names are different, any other suggestion to resolve it.

The Container name in your view declarations:

@graphInfo({graphType: "NCRLog.GCPressGlueLogEntry", primaryView: "Header", })
export class QC302000 extends PXScreen {

   	@viewInfo({containerName: "Header"})
	Header = createSingle(PressGlueLogHeader);
   	@viewInfo({containerName: "Assembly"})
	Assembly = createCollection(Assembly);
	@viewInfo({ containerName: "Press" })
	Press = createCollection(Press);
	@viewInfo({ containerName: "Glue" })
	Glue = createCollection(Glue);
	@viewInfo({ containerName: "Metal" })
	Metal = createCollection(Metal);
}

Aleks

About Acumatica ERP system

Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded