[Solved] Custom cell element and grid scrolling problem

[Michał K]

Hello again!

In my application, I have a radGridView control binded to database. I present production summary in it and I want to have there two progressbar columns in it. I follow the article about creating custom cell elements in CellFormat event. And everything works fine until I need to scroll data. Progressbar remain in their places and dodn't scroll with rest of the data. They seems to be over the row.

The problem is similar to this: http://www.telerik.com/community/forums/winforms/gridview/controls-are-moving-between-rows.aspx and this http://www.telerik.com/community/forums/winforms/gridview/radgridview-custom-elements-and-sorting.aspx.

But none of these solution seems to work. This is the problem causing part of my code:

1. Setting the columns from database, and adding two new columns for progress bars.

private void SetMainGridColumns()
        {



           for (int i = 0; i < this.radGridViewProductionList.Columns.Count; i++)
            {
                this.radGridViewProductionList.Columns[i].IsVisible = false;
            }

            this.radGridViewProductionList.Columns["number"].IsVisible = true;
            this.radGridViewProductionList.Columns["number"].HeaderText = "Nr zamówienia";
            this.radGridViewProductionList.Columns["numberCard"].IsVisible = true;
            this.radGridViewProductionList.Columns["numberCard"].HeaderText = "Nr karty";
            this.radGridViewProductionList.Columns["ItemsFactoryCard"].IsVisible = true;
            this.radGridViewProductionList.Columns["ItemsFactoryCard"].HeaderText = "Produkt";
            this.radGridViewProductionList.Columns["datePlannedRealisation"].IsVisible = true;
            this.radGridViewProductionList.Columns["datePlannedRealisation"].HeaderText = "Termin realizacji";

            this.radGridViewProductionList.Columns.Add(new GridViewDataColumn(){UniqueName = "TimeRemaining", HeaderText = "Pozostało dni"});
            this.radGridViewProductionList.Columns.Add(new GridViewDataColumn(){UniqueName = "Progres", HeaderText = "Postęp"});

            this.radGridViewProductionList.MasterGridViewTemplate.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
        }

2. Cell formatiing event for first progress bar.

private void radGridViewProductionList_CellFormatting(object sender, CellFormattingEventArgs e)
        {
            // exclude header element in the data column
            if (e.CellElement.ColumnInfo is GridViewDataColumn)// && !(e.CellElement.RowElement is GridHeaderRowElement))
            {
                GridViewDataColumn column = (GridViewDataColumn)e.CellElement.ColumnInfo;
                if (column.UniqueName == "TimeRemaining")
                {
                    // check if the progress bar is already added to the cell
                    RadProgressBarElement element;

                    if (e.CellElement.Children.Count > 0)
                    {
                        //element = (RadProgressBarElement)e.CellElement.Children[0];
                        //this.SetValuesToElement(e.CellElement, element);
                        return;
                    }

                    element = new RadProgressBarElement();

                    //int days = ((DateTime)e.CellElement.RowInfo.Cells["datePlannedRealisation"].Value - DateTime.Today).Days;
                    int days = new Random().Next(0, 100);   //tymczasowo, bo dane w bazie fikcyjne i wychodza glupoty
                    element.Text = days + " dni";
                    element.Minimum = 0;
                    element.Maximum =
                        ((DateTime) e.CellElement.RowInfo.Cells["datePlannedRealisation"].Value -
                         (DateTime) e.CellElement.RowInfo.Cells["dateOrder"].Value).Days;
                    //element.Value1 = days<0?0:days;
                    element.Value1 = days > element.Maximum ? element.Maximum : days;
                    element.Orientation = ProgressOrientation.Left;
                    e.CellElement.Children.Add(element);
                    element.StretchHorizontally = true;
                    element.StretchVertically = true;
                }
}

Some elements are only because the " ill " demodata in database, but it isn't important. in the if case I try to use the one of the solution but it doesn't work or I don't understand it.

I do no enable editing, adding etc in the grid. It is only for presenting and sorting data. And the scrollinup or scrolling with handling the scrollbar by cursor made mentioned above problem.

I will be greatfull for fast reply with working solution :)

[Martin Vasilev]

Hi Michał K,

Thank you for writing. As you have already read in the quoted links, RadGridView reuses its cell elements. That means that CellFormatting event throws on every scroll and you have to set the ProgressBar value every time when this happens. In your code, you check if the element has already been added and do nothing if this is true. Here you have to set the value that has to be kept in advance in every cell element (actually it seems that this code was commented). I highly recommend you take a look at our Example application. There is a sample that demonstrates how to add ProgressBar element (exactly the same as your goal). Please, find it under GridView -> Columns -> Column Types. Write me back if you have any additional questions.

Sincerely yours,
Martin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michał K]

Yes, this code was commented cause it doesn't work properly. But it was my mistake and now everything works! Thank you for your help.

But at this moment I have another related problem so I am posting it here. I want to enable sorting these columns (it is necesary cause they show days remaining to deadline and production progress). But these columns don't have value property. Simply, in gridView there are columns from which (or LINQ query) I calculate values to each progress bar for each row in CellEdit event.

Now - how can I enable sorting (by clicking the column header) on the progress bar value1 property? When I set the cell value property to the progress bar value, I catch the stackOverFlow exception.

[Martin Vasilev]

Hi Michał K,

Thank you for getting back to me.

Actually, you can use RadGridView's integrated sorting capabilities. The only requirement to is to ensure you have Value for every cell element in the progress bar column.  I have prepared a small sample that demonstrates this approach. Please, find it as attachment to this message.

Write me back if you have other questions.

Greetings,
Martin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Arul S V]

Hi Guys,

    I have problem while scrolling in RAD GRID VIEW.

Problem Desc:

I've have a rad grid view with three columns (Combobox Column, ComboBoxColumn and TextBoxColumn), a Add button and a delete button.  

when add button is clicked, 
I need to add a row in gridview with firstcolumn a combobox with set of values(ITEMS),
similarly second another combobox with set of values(ITEMS).
Whenever the user selects any item in the second column combobox i need to create either checkbox or combobox or textbox based on the selected item in the second column comboxbox and added it to third column for that particual row.

They above functionality is working good when there is no scrollbar. when i do scrolling the controls in the third column getting mixed up. means the controls in first row goes to last row. similarly the rest of the columns. this problem is happening for thrid column only.

Please help me to solve this problem. Reply as early as possible.
I'm using Telerik Q3 2009 version

Thanks & Regards,
Arul

[Martin Vasilev]

Hello Arul S V,

You have experienced the described weird behavior again because of cell element virtualization, e.g. reusing the cells when scrolling. You have to use the CellFormatting event to set the contained element according to the chosen value in the second column. Please, refer our documentation for more details how to use formatting events.

Greetings,
Martin Vasilev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Arul S V]

Hi Martin Vasilev,

I've tried putting the code in cell formatting event but still the vertical scrollbar issue exists. 
so, Help me in fixing the vertical scrollbar problem How to solve this issue too. I'm Using Telerik Q3 2009

 

Thanks & Regards
Arul S V

[Arul S V]

I've got the solution for the tab key navigation for the radgridview cell element.

We need to use the CurrentCell_KeyUp event, inside we need to focus the respective cell element controls.

e.g

private void

 

CurrentCell_KeyUp(object sender, KeyEventArgs e)

 

{

 

if (((e.KeyData == Keys.Tab) || (e.Shift && e.KeyValue == 9)) && ((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children.Count > 0 && (((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.ColumnIndex == 2))

 

{

 

if (((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children[0].GetType().FullName.Equals("Telerik.WinControls.UI.RadDropDownButtonElement"))

 

{

((Telerik.WinControls.UI.

RadDropDownButtonElement)(((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children[0])).ShowDropDown();

 

((FullTextSearch15Apr10.

GridMenuItem)(((Telerik.WinControls.RadItemCollection)((((Telerik.WinControls.UI.RadDropDownButtonElement)(((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children[0]))).Items)).First)).Grid.Focus();

 

}

 

else if (((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children[0].GetType().FullName.Contains("Telerik.WinControls.UI.RadTextBoxElement"))

 

{

((Telerik.WinControls.UI.

RadTextBoxElement)(((Telerik.WinControls.UI.GridCellElement)(sender)).TableElement.CurrentCell.Children[0])).TextBoxItem.Focus();

 

}

 

else

 

{

((Telerik.WinControls.UI.

GridCellElement)(sender)).TableElement.CurrentCell.Children[0].Focus();

 

}

}

}

Thanks
Arul