Need help with getting data from a Zen page property and setting column widths in my dynaGrid

Question

Question

Given the code below, I need help with getting the collected column widths from the Demo.Configuration table and stored in the columnWidths zne page property. As I understand it, I should be able to retrieve it using zenPage.columnWidths in the setColumnWidths or dgRender clientMethods but the alert is showing that it cannot be retrieved as it shows a value of Null. Once I can retrieve those values, then I want to set the widths of the colmns of the dynaGrid according to the values in the ^Demo.Configuration table. The data pulled in from the CSV file that creates ^Demo.Import can have a different included columns depending on the choices of the user.

/// Created using the page template: Title Page
Class Demo.DynaGrid Extends %ZEN.Component.page
{
/// Displayed name of this page.
Parameter PAGENAME = "DynamicDynaGrid";
/// Property to hold column widths
Property columnWidths As %ZEN.Datatype.string;
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/* style for title bar */
#title {
               background: #C5D6D6;
               color: black;
               font-family: Verdana;
               font-size: 1.5em;
               font-weight: bold;
               padding: 5px;
               border-bottom: 1px solid black;
               text-align: center;
}
</style>
}
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<html id="title">Demo: Dynamic Dyna Grid</html>
<spacer height="10"/>
<vgroup width="100%">
<dynaGrid id="dgDynaGrid" OnCreateDataSet="CreateDS"
showColumnLabels="true"
showRowLabels="false"
showZebra="true"
width="100%">
</dynaGrid>
</vgroup>


</page>
}
ClassMethod CreateDS(pGrid As %ZEN.Component.dynaGrid, pDataSet As %ZEN.Auxiliary.dataSet) As %Status
{
               Set $ZT="Error"
               Kill ^UT("Demo.DynaGrid","CreateDS")

               // Clear out data set
               Do pDataSet.%Clear()

               // column labels (dimension 2)
               Set tHeader=^Demo.Import("ImportedData",1),colcont=0
               Set colWidths=""
               For p=1:1:$LL(tHeader) {
                              Set colName=$TR($LG(tHeader,p)," ")
                              Do pDataSet.%SetLabel(colName,$I(colcount),2)
                              If colName="Employee" {
                                             Do pDataSet.%SetLabel("CoConsultant",$I(colcount),2)
                              Set colWidths=colWidths_$Get(^Demo.Configuration("ReviewImportData","ColumnWidth","CoConsultant"),"100")_","
                              }
               Set colWidths=colWidths_$Get(^Demo.Configuration("ReviewImportData","ColumnWidth",colName),"100")_","
               }
               Do pDataSet.%SetLabel("Include",$I(colcount),2)
Set colWidths=colWidths_$Get(^Demo.Configuration("ReviewImportData","ColumnWidth","Include"),"100")

               // get size of dataSet
               //Set rows = pDataSet.%GetDimSize(1)
               Set cols = pDataSet.%GetDimSize(2)
               // Now populate the data in the new table
               // Do pDataSet.%SetValue(value,row,col)
               For row=2:1 {
                              If '$Data(^Demo.Import("ImportedData",row)) Quit
                              Set rowData=^Demo.Import("ImportedData",row),colcount=0
                              For col=1:1:$LL(tHeader) {
                                             Set val=$LG(rowData,col),cHead=$TR($LG(tHeader,col)," ")
                                             Do pDataSet.%SetValue(val,(row-1),$I(colcount))
                                             If $LG(tHeader,col)="Employee" Do pDataSet.%SetValue("",(row-1),$I(colcount))
                              }
                              Do pDataSet.%SetValue("Yes",(row-1),$I(colcount))
               }
               //
               Set %page.columnWidths = colWidths
               Set ^UT("Demo.DynaGrid","CreateDS","cols")=cols
               Set ^UT("Demo.DynaGrid","CreateDS","colWidths")=colWidths
               Set ^UT("Demo.DynaGrid","CreateDS","%page.columnWidths")=%page.columnWidths
               //Do zenPage.setColumnWidths(pGrid, colWidths)
               //
               Quit $$$OK
Error     //
               Set ^UT("Demo.DynaGrid","CreateDS","Error")=$ZE
               Do ^%ETN
}
ClientMethod dgRender(pGrid) [ Language = javascript ]
{

               var colWidths=zenPage.getColumnWidths();
               alert('dgRender:\n\n colWidths = ',colWidths);
               pGrid.columnWidth = colWidths;
}
ClientMethod setColumnWidths(pGrid, colWidths) [ Language = javascript ]
{

               alert('setColumnWidths:\n\n colWidths = ',colWidths);
}
ClassMethod getColumnWidths() As %String
{
               Set ^UT("Demo.DynaGrid","getColumnWidths","%page.columnWidths")=%page.columnWidths
               Quit %page.columnWidths
}
}

Here is the data:

^Demo.Configuration("ReviewImportData","ColumnWidth","CoConsultant")=110

^Demo.Configuration("ReviewImportData","ColumnWidth","CouponCode")=50

^Demo.Configuration("ReviewImportData","ColumnWidth","Customers")=300

^Demo.Configuration("ReviewImportData","ColumnWidth","Employee")=110

^Demo.Configuration("ReviewImportData","ColumnWidth","Include")=60

^Demo.Configuration("ReviewImportData","ColumnWidth","Note")=300

^Demo.Configuration("ReviewImportData","ColumnWidth","PaymentAmount")=60

^Demo.Configuration("ReviewImportData","ColumnWidth","Service")=200

^Demo.Configuration("ReviewImportData","ColumnWidth","StartTime")=160

^Demo.Configuration("ReviewImportData","ColumnWidth","Status")=100

^Demo.Import("ImportedData",1)=$lb("Customers","Employee","Service","Start Time","Payment Amount","Note","Status","Coupon Code")

^Demo.Import("ImportedData",2)=$lb("Mickey Mouse","Adrian Monk","Check-In","April 1, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",3)=$lb("Minnie Mouse","Adrian Monk","Check-In","April 4, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",4)=$lb("Donald Duck","Adrian Monk","Check-In","April 7, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",5)=$lb("Martin Martian","Sharona Fleming","Check-In","April 14, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",6)=$lb("Pete Paisano","Adrian Monk","Check-In","April 18, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",7)=$lb("Goofy Dogg","Sharona Fleming","Check-In","April 21, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",8)=$lb("Mark Mouse","Adrian Monk","Check-In","April 24, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",9)=$lb("Popeye Sailorman","Adrian Monk","Check-In","April 25, 2025 10:00","50.00","This is a note","Approved","")

^Demo.Import("ImportedData",10)=$lb("Mickey Mouse","Sharona Fleming","Check-In","April 27, 2025 10:00","50.00","This is a note","Approved","")

Thank you

Product version: Caché 2018.1

$ZV: Cache for Windows (x86-64) 2018.1.7 (Build 721) Fri Mar 18 2022 22:24:36 EDT

Discussion (1)1

Log in or sign up to continue

score 0 · Answer 1 · 2025-09-04T14:47:03-04:00

Also, is it possible to add a dropbox in the cells in the CoConsultant column to allow user to choose a CoConsultant. The data will be retrieved from a table. And the 'Include' column is to indicate whether the user wants to include the row of data in the data that will be placed in the table. In the documentation I saw a reference to selected row which used a checkbox fair;ly far down on this page; https://docs.intersystems.com/ens201817/csp/docbook/Doc.View.cls?KEY=GZC.... It had a picture of a data grid with checkboxes in the second column.

Thank you.