1. Home
  2. Forum
  3. WinForms
  4. Progress Bar Column With Gradient Color Changing Based on Progress Value

Progress Bar Column With Gradient Color Changing Based on Progress Value

[1] Progress Bar Column With Gradient Color Changing Based on Progress Value

8 Replies
DY Deivaselvan Y Syncfusion Team October 15, 2018 06:48 PM UTC

Hi Avinash, 

Thank you for contacting Syncfusion support. 

Currently we do not have support for Progress Bar column type in SfDataGrid. We have already added it to our feature request list and it will be available in 2019 Volume 1 release. We will let you know once this release has been rolled out with this feature. 

Please let us know if you have any other questions.   

Regards, 
Deivaselvan 


AV Avinash October 19, 2018 09:21 AM UTC

Hi Deivaselvan,

Is there any workaround for this  ?


DY Deivaselvan Y Syncfusion Team October 22, 2018 09:46 AM UTC

Hi Avinash, 

Thanks for your update. 

We have a workaround for the progress bar column using the SfDataGrid.DrawCell event and our ProgressBarAdv control. Please refer to the following code example and sample from the given location. 

Code Example :  

public Form1() 
{ 
    InitializeComponent(); 
    this.sfDataGrid.DrawCell += sfDataGrid_DrawCell; 
    this.sfDataGrid.CurrentCellBeginEdit += sfDataGrid_CurrentCellBeginEdit; 
} 

void sfDataGrid_CurrentCellBeginEdit(object sender, Syncfusion.WinForms.DataGrid.Events.CurrentCellBeginEditEventArgs e) 
{ 
    if (e.DataColumn.GridColumn.MappingName == "Quantity") 
        e.Cancel = true; 
} 
 
void sfDataGrid_DrawCell(object sender, Syncfusion.WinForms.DataGrid.Events.DrawCellEventArgs e) 
{ 
    if (e.Column.MappingName == "Quantity") 
    { 
        e.Handled = true; 
        Syncfusion.Windows.Forms.Tools.ProgressBarAdv progressBar = new Syncfusion.Windows.Forms.Tools.ProgressBarAdv(); 
        progressBar.ProgressStyle = Syncfusion.Windows.Forms.Tools.ProgressBarStyles.Office2016Colorful; 
        progressBar.GradientStartColor = Color.White; 
        progressBar.GradientEndColor = Color.Green; 
        progressBar.Value = int.Parse(e.DisplayText); 
        var cellRect = this.sfDataGrid.TableControl.GetCellRectangle(e.RowIndex, e.ColumnIndex, false); 
        progressBar.Draw(e.Graphics, cellRect); 
        e.Graphics.DrawLine(new Pen(this.sfDataGrid.Style.CellStyle.Borders.Bottom.Color), cellRect.X, cellRect.Bottom, cellRect.X + cellRect.Width, cellRect.Bottom); 
    } 
} 

 

Please find the sample from the below link and let us know if this helps you. 

Please refer to the following UG link to customize the ProgressBarAdv as per your need. 


Regards, 
Deivaselvan 


AV Avinash October 23, 2018 04:22 AM UTC

Hi Deivaselvan,

Thanks for your update given solution worked for me,

DY Deivaselvan Y Syncfusion Team October 23, 2018 09:47 AM UTC

Hi Avinash,

We are happy to hear that the given solution meets your requirement. Please let us know if you need any further assistance.

Regards,
Deivaselvan 


JP Jagadeesan Pichaimuthu Syncfusion Team March 14, 2019 10:49 AM UTC

Hi Avinash, 

We are glad to announce that our 2019 Volume 1 Beta Release v17.1.0.32 is rolled out and is available for download under the following link. 

The feature “ProgressBar column type in SfDataGrid control” has been included in this release. The main release 2019 Volume 1 is planned to roll out at the end of March 2019. Please find the sample with progress bar column below, 


 

Thanks for your patience and kindly let us know if you have any concerns.  

Regards, 
Jagadeesan

AV Avinash April 9, 2019 05:27 AM UTC

How to add multiple gradient colors changing based on value ?

JP Jagadeesan Pichaimuthu Syncfusion Team April 9, 2019 06:18 AM UTC

Hi Avinash, 

Thanks for your update. 

You can able to achieve your requirement to customize the multiple gradient colors based on value by using the QueryProgressBarCellStyle event. Please find the code snippet with multiple gradient colors below. 

this.sfDataGrid.Style.ProgressBarStyle.ForegroundStyle = GridProgressBarStyle.Gradient; 
sfDataGrid.QueryProgressBarCellStyle += SfDataGrid_QueryProgressBarCellStyle; 
 
private void SfDataGrid_QueryProgressBarCellStyle(object sender, QueryProgressBarCellStyleEventArgs e) 
{ 
    if (e.Column.MappingName == "SoftwareProficiency") 
    { 
        if (e.Value > 50) 
        { 
            e.Style.GradientForegroundStartColor = Color.Red; 
            e.Style.GradientForegroundEndColor = Color.Orange; 
        } 
        else 
        { 
            e.Style.GradientForegroundStartColor = Color.DarkGreen; 
            e.Style.GradientForegroundEndColor = Color.LightGreen; 
        } 
    } 
} 


 

You can refer the below documentation link for your further reference, 

Let us know whether this helps also if you need any further assistance on this. 

Regards, 
Jagadeesan

Loader.
Up arrow icon