Add datagridview rows dynamically in Telerik radgridview

[Karthik]

I'm trying to add rows automatically and the columns are already created manually in Telerik radgridview, I couldn't add rows dynamically and couldn't make the first row as read only.

 
const int numberOfRows = 5;
    public Form1()
    {
        InitializeComponent();

        for (int rowCount = 0; rowCount < numberOfRows; rowCount++)
        {
           radGridView1.Rows.Add();// Problem Here - Index out of range was unhandled

            //radGridView1.Rows[0].ReadOnly = true; // problem here
        }
    }

How can i make certain cell alone as read-only in radGridView? Thank you.

How can i make certain cell alone as read-only in radGridView?  I need some help ASAP. Thank you.

I'm uisng Telerik Winforms verison with visual studion 2010 Pro, .net 4 version with original license registered to my company name.

[Stefan]

Hi Karthik,

Thank you for writing.

Using this approach to add rows you need to specify the values for the columns in the row that you add. For example if you have two columns - text and decimal, here is how to add rows:

public Form1()
{
    InitializeComponent();

    GridViewTextBoxColumn col = new GridViewTextBoxColumn("text");
    col.Width = 100;
    radGridView1.Columns.Add(col);

    GridViewDecimalColumn col1 = new GridViewDecimalColumn("number");
    col1.Width = 100;
    radGridView1.Columns.Add(col1);

    int numberOfRows = 5;

    for (int rowCount = 0; rowCount < numberOfRows; rowCount++)
    {
        radGridView1.Rows.Add("Some text", 12345);

    }
}

More information about adding rows is available here: http://www.telerik.com/help/winforms/gridview-rows-adding-and-inserting-rows.html.

In regards to the ReadOnly mode, GridViewRowInfo does not have a ReadOnly property. You can make the whole grid or a certain column(s) read only setting by their ReadOnly properties. However, in order to make a row read only you need to subscribe to the CellBeginEdit event and cancel it whenever you need:

void radGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
{
    if (e.Row == radGridView1.Rows[0])
    {
        e.Cancel = true;
    }
}

I hope this helps.

Greetings,
Stefan
the Telerik team

[keerthi]

Hello,
My requirement is ,in the radgridview ,we have the data of 10 columns and i need to add a dynamic row to gridview as a first row
and add one button ,one textbox (like 10 fiedls)in the custom row,and when we entered in "yes" textbox the text should be updated in
the corresponding column data in all rows of the result gridview. Is this fesiable , if yes please provide the solution .

[Hristo]

Hi Keerthi,

Thank you for writing.

You can create a custom new row and use it to achieve a behavior as the one described. Please check the following documentation article: Creating Custom Rows.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi  Hristo,

Thank you for giving response.

In the above article we can able to create one item for complete row , for in my requirement i need to add textbox in one column, button in one column . By using GridCellElement(null, this) we can add only item in the row.

[Hristo]

Hi Keerthi,

Thank you for writing back.

By using the custom row you can add a textbox and a button and then handle the click event as per your business logic. In case you need further assistance, please elaborate with more details your actuals scenario and ultimate goal.

I hope this helps. Please let me know if you need further assistance.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,
Thankyou so much for your quick response.

My Issue is :
I have a radgridview with four columns column1, column2, column3 and column4.
I have 10 data rows in the gridview . I need to add one custom row to this gridview between the filtering row and data rows.
The cell in the custom row for column1 should contain textbox , the cell in the custom row for column2 should contain button , the cell in the custom row for column3 should contain combobox and the cell in the custom row for column4 should contain button.
I have referred to the article you have mentioned I previous posts to create custom row.
My code is as follows:
 public class CustomGridRowElement : GridRowElement
        {
            private GridCellElement cellElement1;
            private GridCellElement cellElement2;
            private GridCellElement cellElement3;
            private GridCellElement cellElement4;
            public CustomGridRowElement()
            {
            }
            protected override void CreateChildElements()
            {
                base.CreateChildElements();             
                this.cellElement1 = new GridCellElement(null, this);
                this.Children.Add(cellElement1);
                RadTextBoxControlElement textbox1 = new RadTextBoxControlElement();
                textbox1.Text = "testing";
                this.cellElement1.Children.Add(textbox1);
               
                this.cellElement2 = new GridCellElement(null, this);
                this.Children.Add(cellElement2);               
                RadButtonElement button1 = new RadButtonElement();
                button1.Text = "Sum";
                this.cellElement2.Children.Add(button1);
                this.cellElement3 = new GridCellElement(null, this);              
                this.Children.Add(cellElement3);
                RadMultiColumnComboBoxElement combobox1 = new RadMultiColumnComboBoxElement();
                this.cellElement3.Children.Add(combobox1);
                this.cellElement4 = new GridCellElement(null, this);              
                this.Children.Add(cellElement3);
                RadButtonElement button2 = new RadButtonElement();
                button1.Text = "TCD Button";
                this.cellElement4.Children.Add(button2);
            }
          
            public override bool IsCompatible(GridViewRowInfo data, object context)
            {
                return data is CustomGridViewRowInfo;
            }
        }
   
        public class CustomGridViewRowInfo : GridViewNewRowInfo
        {
            public CustomGridViewRowInfo(GridViewInfo viewInfo)
                : base(viewInfo)
            {
               
            }
            public override Type RowElementType
            {
                get
                {
                    return typeof(CustomGridRowElement);
                }
            }
        }
       
        private void radgridview1_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
        {
         
            if (e.RowInfo is GridViewNewRowInfo)
            {
               e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
            }
        }
By using above code ,the result is like the custom row contains only one button(TCD Button) , that is we are added in last cell Element.
  
In the above code, I have created two cell elements by passing null as first parameter and gridviewrowelement as second parameter (this.cellElement1 = new GridCellElement(null, this);) and (this.cellElement2 = new GridCellElement(null, this);)
Here I could not understand how to pass gridview column as first parameter so that I can add textbox to cellelement1 and button to cellelement 2.

[Hristo]

Hello Keerthi,

Thank you for writing back.

Following the suggested, in the article approach, you can add a single cell and then arrange in it the textboxes, buttons and the drop down list. In order to sync the layout with the current column widths, you would also need to override the ArrangeOverride method. You can associate each of the added elements to the index of a particular column by setting their Tag properties.

Please check my code snippet and a short video showing the result on my end: 

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;

        this.radGridView1.DataSource = this.GetData();
        foreach (var col in this.radGridView1.Columns)
        {
            col.Width = 200;
        }
    }

    private void radGridView1_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
    {
        if (e.RowInfo is GridViewNewRowInfo)
        {
            e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
        }
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("IsChecked", typeof(bool));
        dt.Columns.Add("DateTime", typeof(DateTime));
        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add(i, "Name" + i, i % 2 == 0, DateTime.Now);
        }

        return dt;
    }
}

public class CustomGridViewRowInfo : GridViewNewRowInfo
{
    public CustomGridViewRowInfo(GridViewInfo viewInfo)
        : base(viewInfo)
    {
    }

    public override Type RowElementType
    {
        get
        {
            return typeof(CustomGridRowElement);
        }
    }
}

public class CustomGridRowElement : GridRowElement
{
    private GridCellElement cellElement;
    private StackLayoutElement stack;

    private RadTextBoxElement textBoxElement;
    private RadButtonElement buttonElement1;
    private RadDropDownListElement dropDownListElement;
    private RadButtonElement buttonElement2;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.cellElement = new GridCellElement(null, this);
        this.cellElement.StretchHorizontally = true;
        this.cellElement.StretchVertically = true;
        this.Children.Add(cellElement);

        this.stack = new StackLayoutElement
        {
            StretchHorizontally = true,
        };

        this.textBoxElement = new RadTextBoxElement
        {
            Tag = 0,
            StretchHorizontally = true
        };

        this.buttonElement1 = new RadButtonElement
        {
            Tag = 1,
            StretchHorizontally = true,
            Text = "Button1",
        };

        this.dropDownListElement = new RadDropDownListElement
        {
            Tag = 2,
            StretchHorizontally = true
        };

        this.buttonElement2 = new RadButtonElement
        {
            Tag = 3,
            StretchHorizontally = true,
            Text = "Button2",
        };

        this.stack.Children.Add(this.textBoxElement);
        this.stack.Children.Add(this.buttonElement1);
        this.stack.Children.Add(this.dropDownListElement);
        this.stack.Children.Add(this.buttonElement2);
        this.cellElement.Children.Add(stack);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        SizeF size = base.ArrangeOverride(finalSize);

        float x = this.GridControl.TableElement.GroupIndent - 2f;
        x *= (this.GridControl.GroupDescriptors.Count + 1);
        float y = size.Height - this.stack.DesiredSize.Height - 2f;
        float width = size.Width - x;
        float height = this.stack.DesiredSize.Height;

        this.stack.Arrange(new RectangleF(x, y, width, height));

        int offset = 0;

        foreach (RadElement element in this.stack.Children)
        {
            Size elementSize = new Size(this.RowInfo.Cells[(int)element.Tag].ColumnInfo.Width + this.GridControl.TableElement.CellSpacing, this.stack.Size.Height);
            if (this.RowInfo.Cells[(int)element.Tag].ColumnInfo.IsGrouped)
            {
                element.Visibility = ElementVisibility.Collapsed;
                continue;
            }

            element.Arrange(new RectangleF(offset, 0, elementSize.Width, this.stack.Size.Height));
            offset += elementSize.Width;
        }

        return size;
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

Thank you for giving the solution ,

Its working Perfect.

Please provide me solution for some more questions in this regard.

1)Please let me know how to fetch data dynamically  from database and bind it dynamically to the dropdownlistelement

2)How to handle the events ,  button_click event of the  button element , Selection_changed  event of the DropdownlistElement and the Text_changed 
event of the textboxelement in the customrow of the gridview, like:

    a)If I click on the buttonelement in the customrow, I need to open a new Winform.
    b)If I select any item in the DRopdownlistelement in the customrow ,the values in the cells of one particluar column of the gridview       should be updated with the selecteditem value of the dropdownlistelement.
    c)If I enter any text in the textboxelement in the customrow ,  the values in the cells of one particluar column of the gridview should be updated with the entered text value of the textboxelement.

Regards,
Keerthi.

[Hristo]

Hello Keerthi,

I am glad that the suggested approach is working well in your project.

Regarding your other questions, first I would like to point that we strive to keep our threads focused on a single topic. Please check the following articles of the documentation showing how you can bind RadDropDownList: 

• http://docs.telerik.com/devtools/winforms/dropdown-listcontrol-and-checkeddropdownlist/dropdownlist/populating-with-data/adding-items-programmatically
• http://docs.telerik.com/devtools/winforms/dropdown-listcontrol-and-checkeddropdownlist/dropdownlist/populating-with-data/data-binding

It is up to you to decide how you will connect to your database and fetch the data locally.

Considering your other question you can subscribe to the events you need to and handle them within the custom cell or expose them so that you can handle them on your form. Depending on you business scenario you can change the values in RadGridVie: http://docs.telerik.com/devtools/winforms/gridview/rows/iterating-rows.

I hope this helps. Should you have further questions please do not hesitate to write back.
 
Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

Thank for you giving reply.

My Queries are 
1.
a)Let me know how to Bind the datasource to RadDropDownListElement in the custom row. in the given solution we can able to bind the datsource oustide of custom row,
but not able to bind the datasource to RadDropDownListElement in side data row.
b)How to update gridview column value with selected dropdownList value .

2.
a) how to handle the RadButtonElement_ click event , 
    ex:buttonElement2.Click += new EventHandler(buttonElement2_Click);
b)how to handle this buttonElement2_Click out side of custom row.
c)If I click on the buttonelement in the customrow, I need to open a new Winform.

3. a)how to get the entered text from RadTextboxElement in custom row .
b)How to update gridview column value with text of RadTextboxElement.  


Regards,
Keerthi.

[Hristo]

Hello Keerthi,

Thank you for writing back.

The RadDropDownListElement exposes a DataSource and DataMember properties which you can access and bind to data suitable for your scenario. It is up to you to decide how to fetch locally the data and expose it to the drop-down list element. Regarding your other question about this element, you can handle the SelectedIndexChanged event.

The RadTextBoxElement has a TextChanged event to which you can subscribe and be notified when the text changes. 

Please check the following articles showing how you can open a form on a button click and how events can be created:

• https://msdn.microsoft.com/en-us/library/ws1btzy8(v=vs.90).aspx
• https://msdn.microsoft.com/en-us/library/ms173171.aspx
• http://stackoverflow.com/questions/803242/understanding-events-and-event-handlers-in-c-sharp
• https://msdn.microsoft.com/en-us/library/edzehd2t(v=vs.110).aspx
  

I hope this information is useful. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

Thank you for giving reply,

In the below code , we are adding the events to the button and textbox of CustomGridRowElement, but when we press button  or change the text in Textbox the corressponding
events are not triggering .
1.How to Handle the above events in ProjectView class.
2.How to change the Gridview columns data by using the customrow element events .Ex:textboxelement text should be updated one of the column of the grid view .
(when we trying ,the custom rows elements not the contains the gridview Rows data.) 
public class ProjectView
{
  
public ProjectView()
{
CustomGridRowElement cr= new CustomGridRowElement();
cr.buttonElement1 +=BtnView_Click;
cr.textBoxElement.TextChanged += new EventHandler(tb_TextChanged);
gridview.datasource=resultData;
}
public void gridview_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
        {
            if (e.RowInfo is GridViewNewRowInfo)
            {
                e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
               
            }
           
        }
public void BtnView_Click(object sender, EventArgs e)
{
}
public void tb_TextChanged(object sender, EventArgs e)
{
 foreach (var row in gridview.SelectedRows)
            {
                row.Cells["ProjectId"].Value = textBoxElement.Text;
            }
}
}
public class CustomGridViewRowInfo : GridViewNewRowInfo
    {
        public CustomGridViewRowInfo(GridViewInfo viewInfo)
            : base(viewInfo)
        {
        }
        public override Type RowElementType
        {
            get
            {
                return typeof(CustomGridRowElement);
            }
        }

}
public class CustomGridRowElement : GridRowElement
{
    private GridCellElement cellElement;
    private StackLayoutElement stack;
    private RadTextBoxElement textBoxElement;
    private RadButtonElement buttonElement1;
    private RadDropDownListElement dropDownListElement;
    private RadButtonElement buttonElement2;
 
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
 
        this.cellElement = new GridCellElement(null, this);
        this.cellElement.StretchHorizontally = true;
        this.cellElement.StretchVertically = true;
        this.Children.Add(cellElement);
 
        this.stack = new StackLayoutElement
        {
            StretchHorizontally = true,
        };

        this.textBoxElement = new RadTextBoxElement
        {
            Tag = 0,
            StretchHorizontally = true
        };
        this.buttonElement1 = new RadButtonElement
        {
            Tag = 1,
            StretchHorizontally = true,
            Text = "Button1",
        };
        this.dropDownListElement = new RadDropDownListElement
        {
            Tag = 2,
            StretchHorizontally = true
        };
        this.buttonElement2 = new RadButtonElement
        {
            Tag = 3,
            StretchHorizontally = true,
            Text = "Button2",
        };
 
        this.stack.Children.Add(this.textBoxElement);
        this.stack.Children.Add(this.buttonElement1);
        this.stack.Children.Add(this.dropDownListElement);
        this.stack.Children.Add(this.buttonElement2);
        this.cellElement.Children.Add(stack);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        SizeF size = base.ArrangeOverride(finalSize);

        float x = this.GridControl.TableElement.GroupIndent - 2f;
        x *= (this.GridControl.GroupDescriptors.Count + 1);
        float y = size.Height - this.stack.DesiredSize.Height - 2f;
        float width = size.Width - x;
        float height = this.stack.DesiredSize.Height;

        this.stack.Arrange(new RectangleF(x, y, width, height));

        int offset = 0;

        foreach (RadElement element in this.stack.Children)
        {
            Size elementSize = new Size(this.RowInfo.Cells[(int)element.Tag].ColumnInfo.Width + this.GridControl.TableElement.CellSpacing, this.stack.Size.Height);
            if (this.RowInfo.Cells[(int)element.Tag].ColumnInfo.IsGrouped)
            {
                element.Visibility = ElementVisibility.Collapsed;
                continue;
            }
 
            element.Arrange(new RectangleF(offset, 0, elementSize.Width, this.stack.Size.Height));
            offset += elementSize.Width;
        }
        return size;
    }
}


Regards,
Keerthi.

[Hristo]

Hi Keerthi,

Thank you for writing back.

As I said in one of my previous posts, in order to handle the events in your form you need to raise them when you need to from the custom row element. For the purpose, you need to create appropriate events in the CustomGridViewRowInfo class.

In the discussed scenario you can accomplish your task this way: 

// Your form
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;

        this.radGridView1.DataSource = this.GetData();
        foreach (var col in this.radGridView1.Columns)
        {
            col.Width = 200;
        }
    }

    private void radGridView1_CreateRowInfo(object sender, GridViewCreateRowInfoEventArgs e)
    {
        if (e.RowInfo is GridViewNewRowInfo)
        {
            CustomGridViewRowInfo row = new CustomGridViewRowInfo(e.ViewInfo);
            row.TextBoxTextChanged += row_TextBoxTextChanged;
            e.RowInfo = row;
        }
    }

    private void row_TextBoxTextChanged(object sender, EventArgs e)
    {
    }
}

//New event in the CustomGridViewRowInfo class
public class CustomGridViewRowInfo : GridViewNewRowInfo
    {
        public CustomGridViewRowInfo(GridViewInfo viewInfo)
            : base(viewInfo)
        { }

        public event EventHandler<EventArgs> TextBoxTextChanged;

        internal virtual void OnTextBoxTextChanged(EventArgs e)
        {
            if (TextBoxTextChanged != null)
            {
                TextBoxTextChanged(this, e);
            }
        }

        public override Type RowElementType
        {
            get
            {
                return typeof(CustomGridRowElement);
            }
        }
    }

// Raise the newly introduced event in the row info class
public class CustomGridRowElement : GridRowElement
    {
        protected override void CreateChildElements()
        {
            base.CreateChildElements();

             //...

            this.textBoxElement.TextChanged += textBoxElement_TextChanged;
        }

        private void textBoxElement_TextChanged(object sender, EventArgs e)
        {
            ((CustomGridViewRowInfo)this.RowInfo).OnTextBoxTextChanged(e);
        }

        //...
    }

Instead of using the EventArgs class you may want to create your own class and pass some additional information to the event arguments. Please also check the following article: https://msdn.microsoft.com/en-us/library/wkzf914z(v=vs.100).aspx.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

Thank you for giving reply,

By using the above code , we can create the custom row , that contains dropdownList element, ButtonElement and Textbox element.
we written the code as the element size is same as corresponding column width.
I am facing one issue , when we select the value from the DropdownlIst element ,the size of the dropdownlistelement and other elements are decreased automatically. 
but we need element size is same as the respective column after the selecting the values from dropdownlist element.
Please provide the solution for this issue.

Regards,
Keerthi.

[Hristo]

Hi Keerthi,

Thank you for writing back.

The observed behavior appears to be related the custom row element which in this scenario needs to be invalidated in order to calculate the correct arrange of the newly added elements. In your custom row please subscribe to the SelectedIndexChanged event of the RadDropDownListElement and call the InvalidateArrange method:

public class CustomGridRowElement : GridRowElement
{
    //...

    protected override void CreateChildElements()
    {
        this.dropDownListElement.SelectedIndexChanged +=dropDownListElement_SelectedIndexChanged;
    }

    private void dropDownListElement_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
    {
        this.InvalidateArrange();
    }

    //...
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

Thank for giving reply ,the given solution is working Perfect.

Please provide the solution for some more questions in this regard.

1)I have problem , we are displaying 15 columns in radgridview.
 we are always show the HorizontalScrollState,for better display the all columns data.
when we move the horizontal scroll bar  ,the customrow elements are effected . the complete gridview structure is interrupted
 and unable to identify columns data.
for  arranging the custom row fields we are using the SizeF ArrangeOverride(SizeF finalSize) method(mentioned above article).


2)In custom row we have the textboxelement, dropdownelement.
we have a clear button outside of gridview, when we click the clearbutton_click , we have to clear the all elements data in customrow.
(like , the text in textbox of customrow should be null and  dropdown selected index is '0')

Regards,
Keerthi.

[Hristo]

Hi Keerthi,

I am glad that the suggested approach is working well in your real project. Regarding your other questions, they seem to be closely coupled to your actual implementation. If you would like us to have a closer look please open up a support ticket and send us your project.

Please let me know if you have other questions.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo,

In the below , we have attached the images related to issue.

1) OnLoad image , after loading the data in gridview , in this corresponding to 
"Name" column - added the Button 1 element ,
"Is Checked" column - added dropdownelement ,
"DateTime"column  - added Button2 Element .

2) after Scrolling Image - after the scrolling button1 is coming between DateTime and LastName columns ,Button2 is coming between Sum&Mod coulmns.

How to move the position Button1,Button2 elements along with respective columns .Related code is attached in below .

In which mentod we can handle this thing issue , Please provide the solution .



public class CustomGridViewRowInfo : GridViewNewRowInfo
{
    public CustomGridViewRowInfo(GridViewInfo viewInfo)
        : base(viewInfo)
    {
    }

    public override Type RowElementType
    {
        get
        {
            return typeof(CustomGridRowElement);
        }
    }
}

public class CustomGridRowElement : GridRowElement
{
    private GridCellElement cellElement;
    private StackLayoutElement stack;

    private RadTextBoxElement textBoxElement;
    private RadButtonElement buttonElement1;
    private RadDropDownListElement dropDownListElement;
    private RadButtonElement buttonElement2;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.cellElement = new GridCellElement(null, this);
        this.cellElement.StretchHorizontally = true;
        this.cellElement.StretchVertically = true;
        this.Children.Add(cellElement);

        this.stack = new StackLayoutElement
        {
            StretchHorizontally = true,
        };

        this.textBoxElement = new RadTextBoxElement
        {
            Tag = 0,
            StretchHorizontally = true
        };

        this.buttonElement1 = new RadButtonElement
        {
            Tag = 1,
            StretchHorizontally = true,
            Text = "Button1",
        };

        this.dropDownListElement = new RadDropDownListElement
        {
            Tag = 2,
            StretchHorizontally = true
        };

        this.buttonElement2 = new RadButtonElement
        {
            Tag = 3,
            StretchHorizontally = true,
            Text = "Button2",
        };

        this.stack.Children.Add(this.textBoxElement);
        this.stack.Children.Add(this.buttonElement1);
        this.stack.Children.Add(this.dropDownListElement);
        this.stack.Children.Add(this.buttonElement2);
        this.cellElement.Children.Add(stack);
    }

    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        SizeF size = base.ArrangeOverride(finalSize);

        float x = this.GridControl.TableElement.GroupIndent - 2f;
        x *= (this.GridControl.GroupDescriptors.Count + 1);
        float y = size.Height - this.stack.DesiredSize.Height - 2f;
        float width = size.Width - x;
        float height = this.stack.DesiredSize.Height;

        this.stack.Arrange(new RectangleF(x, y, width, height));

        int offset = 0;

        foreach (RadElement element in this.stack.Children)
        {
            Size elementSize = new Size(this.RowInfo.Cells[(int)element.Tag].ColumnInfo.Width + this.GridControl.TableElement.CellSpacing, this.stack.Size.Height);
            if (this.RowInfo.Cells[(int)element.Tag].ColumnInfo.IsGrouped)
            {
                element.Visibility = ElementVisibility.Collapsed;
                continue;
            }

            element.Arrange(new RectangleF(offset, 0, elementSize.Width, this.stack.Size.Height));
            offset += elementSize.Width;
        }

        return size;
    }
}

[Hristo]

Hi Keerthi,

You can overcome the described behavior by changing the ArrangeOverride method to consider the current scrollbar value. In the custom CustomGridRowElement, you can the InitializeRowView override and change the ArrangeOverride this way: 

public override void InitializeRowView(GridTableElement tableElement)
{
    base.InitializeRowView(tableElement);

    this.GridControl.TableElement.HScrollBar.MouseUp += HScrollBar_MouseUp;
}

protected override SizeF ArrangeOverride(SizeF finalSize)
{
    SizeF size = base.ArrangeOverride(finalSize);

    float x = this.GridControl.TableElement.GroupIndent - 2f;
    x *= (this.GridControl.GroupDescriptors.Count + 1);
    float y = size.Height - this.stack.DesiredSize.Height - 2f;
    float width = size.Width - x;
    float height = this.stack.DesiredSize.Height;

    this.stack.Arrange(new RectangleF(-this.GridControl.TableElement.HScrollBar.Value + x, y, width, height));

    int offset = 0;

    foreach (RadElement element in this.stack.Children)
    {
        Size elementSize = new Size(this.RowInfo.Cells[(int)element.Tag].ColumnInfo.Width + this.GridControl.TableElement.CellSpacing, this.stack.Size.Height);
        if (this.RowInfo.Cells[(int)element.Tag].ColumnInfo.IsGrouped)
        {
            element.Visibility = ElementVisibility.Collapsed;
            continue;
        }

        element.Arrange(new RectangleF(offset, 0, elementSize.Width, this.stack.Size.Height));
        offset += elementSize.Width;
    }

    return size;
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik by Progress

[keerthi]

Hi Hristo ,

Thank you for giving reply .

The given solution working but , when we scroll the horizontal scroll bar at the end point the custom row
 elements are disappering. and some times the gridview strucked.
Please provide the solution.

 

    public partial class Form1 : RadForm
    {
        public Form1()
        {

            InitializeComponent();
            //this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;
            this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.None;
            this.radGridView1.HorizontalScrollState = ScrollState.AlwaysShow;
            this.radGridView1.DataSource = this.GetData();
            
            foreach (var col in this.radGridView1.Columns)
            {
                col.Width = 200;
            }
            
        }
       
        private DataTable GetData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("IsChecked", typeof(bool));
            dt.Columns.Add("DateTime", typeof(DateTime));
            dt.Columns.Add("LastName", typeof(string));
            dt.Columns.Add("Sum", typeof(string));
            dt.Columns.Add("Mod", typeof(string));
            dt.Columns.Add("MUl", typeof(string));
            dt.Columns.Add("DIV", typeof(string));
            dt.Columns.Add("Total", typeof(string));
            for (int i = 0; i < 10; i++)
            {
                dt.Rows.Add(i, "Name" + i, i % 2 == 0, DateTime.Now,"Last","sum","Mod","mul","Div","Total");
            }

            return dt;
        }

        private void radGridView1_CreateRowInfo_1(object sender, GridViewCreateRowInfoEventArgs e)
        {
            if (e.RowInfo is GridViewNewRowInfo)
            {
                e.RowInfo = new CustomGridViewRowInfo(e.ViewInfo);
            }
        }
    }

public class CustomGridViewRowInfo : GridViewNewRowInfo
{
    public CustomGridViewRowInfo(GridViewInfo viewInfo)
        : base(viewInfo)
    {
    }

    public override Type RowElementType
    {
        get
        {
            return typeof(CustomGridRowElement);
        }
    }
}

public class CustomGridRowElement : GridRowElement
{

    public SizeF gridSize { get; set; }
    private GridCellElement cellElement;
    private StackLayoutElement stack;

    private RadTextBoxElement textBoxElement1;
    private RadButtonElement buttonElement1;
    private RadDropDownListElement dropDownListElement1;
    private RadButtonElement buttonElement2;
    private RadTextBoxElement textBoxElement2;
    private RadButtonElement buttonElement3;
    private RadDropDownListElement dropDownListElement2;
    private RadButtonElement buttonElement4;
    private RadButtonElement buttonElement5;
    private RadButtonElement buttonElement6;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.cellElement = new GridCellElement(null, this);
        this.cellElement.StretchHorizontally = true;
        this.cellElement.StretchVertically = true;
        this.Children.Add(cellElement);

        this.stack = new StackLayoutElement
        {
            StretchHorizontally = true,
        };

        this.textBoxElement1= new RadTextBoxElement
        {
            Tag = 0,
            StretchHorizontally = true
        };

        this.buttonElement1 = new RadButtonElement
        {
            Tag = 1,
            StretchHorizontally = true,
            Text = "Button1",
        };

        this.dropDownListElement1 = new RadDropDownListElement
        {
            Tag = 2,
            StretchHorizontally = true
        };

        this.buttonElement2 = new RadButtonElement
        {
            Tag = 3,
            StretchHorizontally = true,
            Text = "Button2",
        };
        

        this.textBoxElement2 = new RadTextBoxElement
        {
            Tag = 4,
            StretchHorizontally = true
        };

        this.buttonElement3 = new RadButtonElement
        {
            Tag = 5,
            StretchHorizontally = true,
            Text = "Button3",
        };

        this.dropDownListElement2 = new RadDropDownListElement
        {
            Tag = 6,
            StretchHorizontally = true
        };

        this.buttonElement4 = new RadButtonElement
        {
            Tag = 7,
            StretchHorizontally = true,
            Text = "Button4",
        };
        this.buttonElement5 = new RadButtonElement
        {
            Tag =8,
            StretchHorizontally = true,
            Text = "Button5",
        };
        this.buttonElement6 = new RadButtonElement
        {
            Tag = 9,
            StretchHorizontally = true,
            Text = "Button6",
        };

        this.stack.Children.Add(this.textBoxElement1);
        this.stack.Children.Add(this.buttonElement1);
        this.stack.Children.Add(this.dropDownListElement1);
        this.stack.Children.Add(this.buttonElement2);
        this.stack.Children.Add(this.textBoxElement2);
        this.stack.Children.Add(this.buttonElement3);
        this.stack.Children.Add(this.dropDownListElement2);
        this.stack.Children.Add(this.buttonElement4);
        this.stack.Children.Add(this.buttonElement5);
        this.stack.Children.Add(this.buttonElement6);
        this.cellElement.Children.Add(stack);
    }
    public override void InitializeRowView(GridTableElement tableElement)
    {
        base.InitializeRowView(tableElement);

        this.GridControl.TableElement.HScrollBar.MouseUp += HScrollBar_MouseUp;
     
    }
    private void HScrollBar_MouseUp(object sender, EventArgs e)
    {

        SizeF size = base.ArrangeOverride(gridSize);
        SizeArrangement(size);
       
    }
    
    protected override SizeF ArrangeOverride(SizeF finalSize)
    {
        gridSize = finalSize;
        SizeF size = base.ArrangeOverride(finalSize);
        SizeArrangement(size);

        return size;
    }

    private void SizeArrangement(SizeF size)
    {
        float x = this.GridControl.TableElement.GroupIndent - 2f;
        x *= (this.GridControl.GroupDescriptors.Count + 1);
        float y = size.Height - this.stack.DesiredSize.Height - 2f;
        float width = size.Width - x;
        float height = this.stack.DesiredSize.Height;
        this.stack.Arrange(new RectangleF(-this.GridControl.TableElement.HScrollBar.Value + x, y, width, height));


        int offset = 0;

        foreach (RadElement element in this.stack.Children)
        {
            Size elementSize = new Size(this.RowInfo.Cells[(int)element.Tag].ColumnInfo.Width + this.GridControl.TableElement.CellSpacing, this.stack.Size.Height);
            if (this.RowInfo.Cells[(int)element.Tag].ColumnInfo.IsGrouped)
            {
                element.Visibility = ElementVisibility.Collapsed;
                continue;
            }

            element.Arrange(new RectangleF(offset, 0, elementSize.Width, this.stack.Size.Height));
            offset += elementSize.Width;
        }

    }
}       

[Hristo]

Hi Keerthi,

The observed behavior is related to the custom arrangement of the elements in the stack. You can work around it by setting a MinSize to each of its children: 

protected override void CreateChildElements()
        {
            base.CreateChildElements();

            this.cellElement = new GridCellElement(null, this);
            this.cellElement.StretchHorizontally = true;
            this.cellElement.StretchVertically = true;
            this.Children.Add(cellElement);

            this.stack = new StackLayoutElement
            {
                StretchHorizontally = true,
            };

            this.textBoxElement1 = new RadTextBoxElement
            {
                Tag = 0,
                MinSize = new Size(200,0),
                StretchHorizontally = true
            };

          //...
}

Please also note that you should not cache the size calculated in the ArrangeOverride method. In the MouseUp event handler please invalidate the layout this way: 

private void HScrollBar_MouseUp(object sender, EventArgs e)
{
    this.InvalidateArrange();
}

I hope this helps. Let me know if you have other questions.

Regards,
Hristo
Telerik by Progress