Codejock Grid with ProgressBar: Difference between revisions

From DataFlex Wiki
Jump to navigationJump to search
Created page with "=== Author and origin === This example code was written by Peter Bragg and comes from the following post at the forum: https://support.dataaccess.com/Forums/showthread.php?6269..."
 
m Fix category Codejock spelling into the expected one
 
(One intermediate revision by the same user not shown)
Line 11: Line 11:
First, we have the following mixin class (with included use statements and defines etc):
First, we have the following mixin class (with included use statements and defines etc):


 
<source lang="dataflex">
   Define clHexOffice_Turquoise    for '#1abc9c'  //Turquoise
   Define clHexOffice_Turquoise    for '#1abc9c'  //Turquoise
   Define clHexOffice_DrkTurquoise for '#16a085'  //GreenSea
   Define clHexOffice_DrkTurquoise for '#16a085'  //GreenSea
Line 119: Line 119:
     End_Function     
     End_Function     
   End_Class
   End_Class
</source>


We then incorporate that into a subclass of the cDbCJGridColumn class as follows:
We then incorporate that into a subclass of the cDbCJGridColumn class as follows:


<source lang="dataflex">
   Class cDemoDbCJGridColumn is a cDbCJGridColumn
   Class cDemoDbCJGridColumn is a cDbCJGridColumn
     Import_Class_Protocol mixin_cCJGridProgressBar
     Import_Class_Protocol mixin_cCJGridProgressBar
Line 151: Line 153:
     End_Procedure   
     End_Procedure   
   End_Class
   End_Class
</source>


And then you can use this, just as in the Order Entry view, as follows:
And then you can use this, just as in the Order Entry view, as follows:
Line 157: Line 160:




<source lang="dataflex">
   Object oProgressBar is a cDemoDbCJGridColumn
   Object oProgressBar is a cDemoDbCJGridColumn
     Set piWidth to 213
     Set piWidth to 213
Line 170: Line 174:
     End_Procedure     
     End_Procedure     
   End_Object
   End_Object
</source>


You can set the label to anything you want - here (above) I've simply set it to show the percentage value, so that you can see it is dynamic. You just have to make sure that it is encoded correctly.  
You can set the label to anything you want - here (above) I've simply set it to show the percentage value, so that you can see it is dynamic. You just have to make sure that it is encoded correctly.  
Line 177: Line 182:
Ok, so same mixin class as before, but this time we use it in a cCjGridColumn (not a cDbCjGridColumn)
Ok, so same mixin class as before, but this time we use it in a cCjGridColumn (not a cDbCjGridColumn)


<source lang="dataflex">
   Class cDemoCJGridColumn is a cCJGridColumn
   Class cDemoCJGridColumn is a cCJGridColumn
     Import_Class_Protocol mixin_cCJGridProgressBar
     Import_Class_Protocol mixin_cCJGridProgressBar
Line 196: Line 202:
     End_Procedure  
     End_Procedure  
   End_Class
   End_Class
 
</source>


And then we can use this inside an example view. Here I've taken the example for a cCjGrid (from the help) but I've added an additional column to show a progress bar
And then we can use this inside an example view. Here I've taken the example for a cCjGrid (from the help) but I've added an additional column to show a progress bar


<source lang="dataflex">
     Object oCustomerGrid is a cCJGrid
     Object oCustomerGrid is a cCJGrid
         Set Size to 200 300
         Set Size to 200 300
Line 276: Line 283:
             Send MovetoFirstRow
             Send MovetoFirstRow
         End_Procedure
         End_Procedure
</source>




Obviously this is just a silly example in which I'm calculating a progress value based on the customer number and total number of customer records, but you get the point.
Obviously this is just a silly example in which I'm calculating a progress value based on the customer number and total number of customer records, but you get the point.


[[Category:CodeJock]]
[[Category:Codejock]]

Latest revision as of 01:35, 2 March 2019

Author and origin

This example code was written by Peter Bragg and comes from the following post at the forum:

https://support.dataaccess.com/Forums/showthread.php?62699-cDBCJGrid-with-ProgressBar

cDBCJGrid with ProgressBar

Here's how to do this.

First, we have the following mixin class (with included use statements and defines etc): 

  Define clHexOffice_Turquoise    for '#1abc9c'  //Turquoise
  Define clHexOffice_DrkTurquoise for '#16a085'  //GreenSea
  Define clHexOffice_Green        for '#2ecc71'  //Emerald 
  Define clHexOffice_LightGreen   for '#7ee2a8'
  Define clHexOffice_DrkGreen     for '#27ae60'  //Nephritis
  Define clHexOffice_BrightBlue   for '#3498db'  //PeterRiver
  Define clHexOffice_Blue         for '#2980b9'  //BelizeHole
  Define clHexOffice_Purple       for '#9b59b6'  //Amethyst
  Define clHexOffice_DrkPurple    for '#8e44ad'  //Wisteria
  Define clHexOffice_DrkBlue      for '#34495e'  //WetAsphalt
  Define clHexOffice_MidnightBlue for '#2c3e50'  //MidnightBlue
  Define clHexOffice_BrightYellow for '#f1c40f'  //Sunflower
  Define clHexOffice_Yellow       for '#f39c12'  //Orange
  Define clHexOffice_Orange       for '#e67e22'  //Carrot 
  Define clHexOffice_DrkOrange    for '#d35400'  //Pumpkin
  Define clHexOffice_Red          for '#e74c3c'  //Alizarin
  Define clHexOffice_DrkRed       for '#c0392b'  //Pomegranate 
  Define clHexOffice_White        for '#ecf0f1'  //Clouds 
  Define clHexOffice_Silver       for '#bdc3c7'  //Silver
  Define clHexOffice_Grey         for '#95a5a6'  //Concrete
  Define clHexOffice_DrkGrey      for '#7f8c8d'  //Asbestos
  
  
  Enum_List
    Define eProgressStyle_Normal
    Define eProgressStyle_TrafficLight
  End_Enum_List
  
  
  Class mixin_cCJGridProgressBar is a Mixin
  
    Procedure Define_cCJGridProgressBar_Properties
      {Category="Appearance" InitialValue=False}
      Property Boolean pbProgress         False
      {Category="Appearance" InitialValue=True}
      Property Boolean pbProgressLabel    True
      {Category="Appearance" EnumList="eProgressStyle_Normal,eProgressStyle_TrafficLight" InitialValue=eProgressStyle_Normal}
      Property Integer peProgressStyle    eProgressStyle_Normal  
    End_Procedure  
  
    {MethodType=Event}
    Procedure OnSetProgressBarValue Boolean ByRef bVisible String ByRef sLabel Number ByRef nPercentage Integer iRow
    End_Procedure
  
    {Visibility=Private}
    Function DisplayProgress Number nPercentageValue Returns String
      Number  nPercentage nWidth nProgress
      Integer iPercentage eStyle iRow
      String  sProgress sXAML sColor sColorBorder sLightColor sLabel sGBPSymbol
      Boolean bProgress bVisible 
      
      If (num_arguments>0) Begin
          Move nPercentageValue to nPercentage
      End
  
  
      Get pbProgress to bProgress
      If (bProgress) Begin
          Send OnSetProgressBarValue (&bVisible) (&sLabel) (&nPercentage)          
          If (bVisible) Begin
              Get peProgressStyle to eStyle
              // Compose XAML string
              // We need to know the width of the cell
              Get ComWidth to nWidth
              Subtract 6 from nWidth // Margin
              // Calculate length of progressbar:
              Move (nWidth * (nPercentage / 100)) to nProgress
              // If you want to use colors, you'll need to use Hexadecimal colors.
              Move clHexOffice_Grey to sColorBorder
              Case Begin
                  Case ((nProgress<33.3) and (eStyle=eProgressStyle_TrafficLight))
                      Move clHexOffice_Red to sColor
                      Move clHexOffice_Red to sLightColor
                      Case Break
                  Case ((nProgress<66.6) and (eStyle=eProgressStyle_TrafficLight))
                      Move clHexOffice_Orange to sColor
                      Move clHexOffice_Red to sLightColor
                      Case Break
                  Case (nProgress<100)
                      Move clHexOffice_Green to sColor
                      Move clHexOffice_LightGreen to sLightColor
                      Case Break
                  Case Else
                      Move clHexOffice_DrkGreen to sColor
                      Move clHexOffice_Green to sLightColor
              Case End
  
              Move (Integer(nPercentage)) to iPercentage
              // Compose XAML string                
              Move "<Grid><Border BorderBrush='%2' BorderThickness='1' CornerRadius='5' Height='13' Width='%4'> " to sXAML
              Add " <Border.Background><LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'> <GradientStop Color='#C0CBDF' />" to sXAML
              Add " <GradientStop Color='#DCE9FA' Offset='1'/></LinearGradientBrush></Border.Background>" to sXAML
              Add " <Border HorizontalAlignment='Left' CornerRadius='5,0,0,5' Background='%3'" to sXAML
              Add " Width='%5'><Border.Background><LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>" to sXAML
              Add " <GradientStop Color='#658C4B' Offset='1'/><GradientStop Color='#A4DB64'/></LinearGradientBrush>" to sXAML 
              Add " </Border.Background></Border></Border><TextBlock VerticalAlignment='Center'"  to sXAML 
              Add " HorizontalAlignment='Center' Text='%1'></TextBlock></Grid>"  to sXAML
              If (pbProgressLabel(Self) and Trim(sLabel)='') Begin
                  Move (String(iPercentage)-'%') to sLabel
              End
              Move (SFormat(sXAML,sLabel,sColorBorder,sColor,String(nWidth),String(nProgress),sLightColor)) to sXAML            
              Move sXAML to sProgress
          End
      End
      Function_Return sProgress
    End_Function    
  End_Class

We then incorporate that into a subclass of the cDbCJGridColumn class as follows: 

  Class cDemoDbCJGridColumn is a cDbCJGridColumn
    Import_Class_Protocol mixin_cCJGridProgressBar
    
    Procedure Construct_Object
      Forward Send Construct_Object
      
      Send Define_cCJGridProgressBar_Properties
    End_Procedure
    
    Procedure OnCreateColumn
      Boolean bProgress 
      
      Forward Send OnCreateColumn
      Get pbProgress to bProgress
      If bProgress Begin
          Delegate Set ComEnableMarkup to True
      End
    End_Procedure
    
    Procedure OnSetCalculatedValue String ByRef sValue
      Boolean bProgress
      
      Get pbProgress to bProgress
      If (bProgress) Begin
          Get DisplayProgress to sValue    
      End
      Forward Send OnSetCalculatedValue (&sValue)
    End_Procedure   
  End_Class

And then you can use this, just as in the Order Entry view, as follows:

Inside the oOrderDtl_Grid object, replace the oInvt_Description column with... 


  Object oProgressBar is a cDemoDbCJGridColumn
    Set piWidth to 213
    Set psCaption to "Progress"
    Set pbProgress to True
            
    Procedure OnSetProgressBarValue Boolean ByRef bVisible String ByRef sLabel Number ByRef nPercentage
      Move (OrderHea.Order_Total>0) to bVisible
      If bVisible Begin
          Move (((OrderDtl.Price*OrderDtl.Qty_Ordered)/OrderHea.Order_Total)*100) to nPercentage
          Move (String(nPercentage)+"%") to sLabel
      End
    End_Procedure    
  End_Object

You can set the label to anything you want - here (above) I've simply set it to show the percentage value, so that you can see it is dynamic. You just have to make sure that it is encoded correctly.

cCJGrid and progressbar

Ok, so same mixin class as before, but this time we use it in a cCjGridColumn (not a cDbCjGridColumn) 

  Class cDemoCJGridColumn is a cCJGridColumn
    Import_Class_Protocol mixin_cCJGridProgressBar
    
    Procedure Construct_Object
        Forward Send Construct_Object
        
        Send Define_cCJGridProgressBar_Properties
    End_Procedure
    
    Procedure OnCreateColumn
        Boolean bProgress 
        
        Forward Send OnCreateColumn
        Get pbProgress to bProgress
        If bProgress Begin
            Delegate Set ComEnableMarkup to True
        End
    End_Procedure 
  End_Class

And then we can use this inside an example view. Here I've taken the example for a cCjGrid (from the help) but I've added an additional column to show a progress bar 

    Object oCustomerGrid is a cCJGrid
        Set Size to 200 300
        Set peAnchors to anAll
        Set pbReadOnly to True
        Set pbSelectionEnable to True      
            
        Object oCustomer_Customer_Number is a cCJGridColumn
            Set piWidth to 71
            Set psCaption to "Number"
            Set peDataType to Mask_Numeric_Window
            Set psMask to "######"
        End_Object
    
        Object oCustomer_Name is a cCJGridColumn
            Set piWidth to 257
            Set psCaption to "Customer Name"
        End_Object
    
        Object oCustomer_Status is a cCJGridColumn
            Set piWidth to 66
            Set psCaption to "Status"
            Set pbCheckbox to True
            Set psCheckboxTrue to "Y"
            Set psCheckboxFalse to "N"
        End_Object
        
        Object oProgressBar_Column is a cDemoCJGridColumn
            Set piWidth to 206
            Set psCaption to "Progress"
            Set pbProgress to True
            
            // Here you will need to determine what values to use. Typically this might be a global buffer value
            Procedure OnSetProgressBarValue Boolean ByRef bVisible String ByRef sLabel Number ByRef nPercentage
                Integer iRecs
                
                Move True to bVisible
                Move "Example" to sLabel
                Get_Attribute DF_FILE_RECORDS_USED of (RefTable(Customer)) to iRecs
                Move ((Customer.Customer_Number/iRecs)*100) to nPercentage
            End_Procedure
        End_Object
        
        Procedure LoadData 
            Handle hoDataSource
            tDataSourceRow[] TheData
            Boolean bFound
            Integer iRows iNum iName iStatus iProgress
            
            Get phoDataSource to hoDataSource
            
            // Get the datasource indexes of the various columns
            Get piColumnId of oCustomer_Customer_Number to iNum
            Get piColumnId of oCustomer_Name            to iName
            Get piColumnId of oCustomer_Status          to iStatus
            Get piColumnId of oProgressBar_Column       to iProgress
            
            // Load all data into the datasource array
            Clear Customer
            Find ge Customer by 1
            Move (Found) to bFound
            While (bFound)
                Move Customer.Customer_Number to TheData[iRows].sValue[iNum] 
                Move Customer.Name            to TheData[iRows].sValue[iName] 
                Move Customer.Status          to TheData[iRows].sValue[iStatus] 
                
                Get DisplayProgress of oProgressBar_Column to TheData[iRows].sValue[iProgress]
                
                Find gt Customer by 1
                Move (Found) to bFound
                Increment iRows
            Loop
            
            // Initialize Grid with new data
            Send InitializeData TheData
            Send MovetoFirstRow
        End_Procedure


Obviously this is just a silly example in which I'm calculating a progress value based on the customer number and total number of customer records, but you get the point.

Retrieved from "https://dataflex.wiki/index.php?title=Codejock_Grid_with_ProgressBar&oldid=2882"