radGridView, custom elements and sorting

[s]

Hello,
I'm following the "Adding Custom Elements to Cells" example found in the documentation.

private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
   // exclude header element in the data column
   if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
   {
       GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
       if (column.FieldName == "Discount")
       {
           // check if the progress bar is already added to the cell
           if (e.CellElement.Children.Count > 0)
               return;
           RadProgressBarElement element = new RadProgressBarElement();
           e.CellElement.Children.Add(element);
           element.StretchHorizontally = true;
           element.StretchVertically = true;
           // extract the value in the cell, convert it to a value
           // usable in the progress bar element and assign it to the
           // progress bar Value1 and Text properties
           object discountValue = e.CellElement.RowInfo.Cells["Discount"].Value;
           int discountPercentage = Convert.ToInt32(Convert.ToDecimal(discountValue) * 100);
           element.Value1 = discountPercentage;
           if (discountPercentage > 0)
           {
               element.Text = discountPercentage.ToString() + "%";
           }
           // apply theme to the progress bar
           ApplyThemeToElement(element, "ControlDefault");
       }
   }
}
private void ApplyThemeToElement(RadItem item, string themeName)
{
   DefaultStyleBuilder builder =
           ThemeResolutionService.GetStyleSheetBuilder(item, themeName) as DefaultStyleBuilder;
   if (builder != null)
       //clone because control might modify it later
       item.Style = new XmlStyleSheet(builder.Style).GetStyleSheet();
}

Actually, i'm using a RadImageItem instead of progress bar.
Tthe items are "rendered" the right way. Scrolling and sorting do not work: the image (or the progressbar) doesn't change when re-sorting or scrolling (whatever column i sort), while the other columns are shown ok.

Any hints?

Btw, i'm using the latest trial.
Thanks in advance

[Jack]

Hi s t,

Thank you for contacting us.

RadGridView reuses its cells to optimize the performance and to minimize the memory usage. So, you should set the cell value every time when processing the CellFormatting event. Check the modified code:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    // exclude header element in the data column
    if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
    {
        GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
        if (column.FieldName == "Value1")
        {
            object discountValue = e.CellElement.RowInfo.Cells["Value1"].Value;
            int discountPercentage = Convert.ToInt32(Convert.ToDecimal(discountValue));
            RadProgressBarElement element;
            // check if the progress bar is already added to the cell
            if (e.CellElement.Children.Count > 0)
            {
                element = (RadProgressBarElement)e.CellElement.Children[0];
                element.Text = discountPercentage.ToString() + "%";
                return;
            }
            element = new RadProgressBarElement();
            e.CellElement.Children.Add(element);
            element.StretchHorizontally = true;
            element.StretchVertically = true;
            // extract the value in the cell, convert it to a value
            // usable in the progress bar element and assign it to the
            // progress bar Value1 and Text properties
            element.Value1 = discountPercentage;
            if (discountPercentage > 0)
            {
                element.Text = discountPercentage.ToString() + "%";
            }
            // apply theme to the progress bar
            ApplyThemeToElement(element, "ControlDefault");
        }
    }
}

Also, it would be better to use the Image property of the GridCellElement instead of the RadImageItem. Here is a sample:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
    // exclude header element in the data column
    if (e.CellElement.ColumnInfo is GridViewDataColumn && !(e.CellElement.RowElement is GridTableHeaderRowElement))
    {
        GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
        if (column.FieldName == "Value1")
        {
            e.CellElement.Image = Resources.red;
            e.CellElement.ImageLayout = ImageLayout.Zoom;
        }
    }
}

I hope this helps. Should you have any other questions, don't hesitate to ask.

All the best,
Jack
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.