Use cWebView.pkg
Use cWebPanel.pkg
Use cWebForm.pkg
Use cSalesPersonDataDictionary.dd
Use csfWebList.pkg
Use csfWebColumnLink.pkg
Use csfWebColumnButton.pkg
Use cWebButton.pkg
Use cWebGroup.pkg

Object oSyncFusionGridSalesPersonList is a cWebView
    Set psCaption to "SyncFusion Sales List (db enabled)"
    Set piWidth to 900

    Object oSalesPerson_DD Is a cSalesPersonDataDictionary
    End_Object
  
    Set Main_DD to oSalesPerson_DD
    Set Server to oSalesPerson_DD

    // Your DDO structure will go here

    Object oWebMainPanel is a cWebPanel
        Set piColumnCount to 14

        Object oGrid is a csfWebList
            Set piColumnIndex to 0
            Set piColumnSpan  to 12
            Set pbAllowSorting  To True
            Set pbFillHeight To true
            Set pbEnableAltRow to False
            // enable for onRowClick event
            Set pbServerOnRowClick To True

            Object oSalesPerson_Name is a csfWebColumnLink
                Entry_Item SalesPerson.Name
                Set psCaption to "Name"
                Set piWidth To 50

                Procedure OnClick String sRowID String sCellValue
                    Send ShowInfoBox ("clicked on Sales Person "+sCellValue)
                End_Procedure
                
                Procedure OnDefineCssClass String ByRef sCSSClass
                  If (SalesPerson.ID="BS") Begin
                    Move "RedBox" To sCSSClass  // Ugly red box for Bob Stimpson
                  End
                End_Procedure
                            
                Procedure OnDefineTooltip String ByRef sTooltip
                    Move ("Image name =" * SalesPerson.Avatar) to sTooltip
                End_Procedure
                
            End_Object

            Object oSalesPerson_ID is a csfWebColumn
                Entry_Item SalesPerson.ID
                Set psCaption to "ID"
                Set piWidth To 50
                Set psCssClass To "PP7Row LabelBold"
                // Does not work as claimed by the doc, going to build a csfWebHtmlColumn instead
                //Set psField to "SalesId"
                //set psTemplate to '<i class="fa fa-file-picture-o"></i> {{:SalesId}}'
                
                Procedure OnDefineCssClass String ByRef sCSSClass
                    Move "OrangeBackground" To sCSSClass
                End_Procedure
            End_Object

            Object oSalesPerson_Avatar is a csfWebColumnHtml
                Entry_Item SalesPerson.Avatar
                //Set psCaption to "Image"
                Set piWidth To 40
                Set psHeaderTemplate To '<i class="fa fa-file-picture-o"></i> Images'
                // Can also use below, but not recommended as it needs templates defined in
                // the index.html file.
                //Set psHeaderTemplate to '#imagetemplate'
                Set psHtmlBefore To '<img src="Images/SalesAvatars/'
                Set psHtmlAfter  To '">'
            End_Object
            
            Object oFontIcon is a csfWebColumnButton
              Set piWidth to 19
              Set psCaption to "button"
              //psBtnCssClass
              //Set psBtnCssClass to "WebIcon_Menu transparent blackText FontSize18"
              Set psBtnCssClass to "WebButtonIcon WebIcon_Info"
            
              Procedure OnClick String sButton String sRowId
                  Forward Send OnClick sButton sRowId
                  Send ShowInfoBox "button clicked"
              End_Procedure
            End_Object
            
            Send AddToolBarItem "Search"
            
            Procedure OnRowClick String sRowID
                //send ShowInfoBox ("row clicked "+sRowID) "Single click"
            End_Procedure
            
            Procedure OnRowSelected
                //send ShowInfoBox "row selected"
            End_Procedure
            
            Procedure OnRowDoubleClick String sRowID
                send ShowInfoBox "row double clicked"
            End_Procedure
            
            Procedure ShowRowID
              String sRowID
              WebGet psCurrentRowId to sRowID
              send ShowInfoBox ("current row = "+sRowID) "show me"
            End_Procedure
        
        End_Object

        Object oOptionsWebGroup is a cWebGroup
          Set psCaption to "Options"
          Set piColumnSpan to 2
          Set piColumnCount to 2
          Set piColumnIndex to 12
          Set pbFillHeight to True
  
          Object oRefreshGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "refresh"
          
              Procedure OnClick
                  Send RefreshGrid of oGrid
              End_Procedure
          End_Object
  
          Object oTestGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "test"
          
              Procedure OnClick
                  String[] aParams
                  //Send TestGrid of oGrid
                  Move "13" To aParams[0]
                  Move "This is a test for the 'showControlError' function." To aParams[1]
                  Send ClientAction of oSalesPerson_Name "showControlError" aParams
              End_Procedure
          End_Object
  
          Object oShowRowIDGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "RowID="
          
              Procedure OnClick
                  Send ShowRowID of oGrid
              End_Procedure
          End_Object
  
          Object oRowUpGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "Up"
          
              Procedure OnClick
                  Send MoveUpRow of oGrid
              End_Procedure
          End_Object
  
          Object oRowDownGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "Down"
          
              Procedure OnClick
                  Send MoveDownRow of oGrid
              End_Procedure
          End_Object
  
          Object oBeginGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "First"
          
              Procedure OnClick
                  Send MoveToFirstRow of oGrid
              End_Procedure
          End_Object
  
          Object oEndGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "Last"
          
              Procedure OnClick
                  Send MoveToLastRow of oGrid
              End_Procedure
          End_Object
  
          Object oGetNameGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "Get Name"
          
              Procedure OnClick
                  String sValue
                  WebGet psValue Of oSalesPerson_Name To sValue
                  send ShowInfoBox ("name ="*sValue)
              End_Procedure
          End_Object
  
          Object oShowHideGridBtn is a cWebButton
              Set piColumnIndex to 0
              Set piColumnSpan  to 2
              Set psCaption to "Hide ID"
          
              Procedure OnClick
                  Boolean bVisible
                  WebGet pbVisible Of oSalesPerson_ID To bVisible
                  WebSet pbVisible Of oSalesPerson_ID To (not(bVisible))
                  WebSet psCaption To (If(bVisible,"Show ID","Hide ID"))
              End_Procedure
          End_Object
        End_Object
        
    End_Object

End_Object