Button height with row details

[Alex Dybenko]

Hi,

I have a GridView with Row details as from https://www.telerik.com/support/code-library/row-details-grid-for-q3-extended

Is it possible to make button of GridViewCommandColumn with height of row+details? See attachment. 

I have tried to add new RadButtonElement in CellFormatting event, but still it has height of the row...

If no - perhaps it is possible to add button to row details? Idea is to make bigger button

Thanks

Alex

 

[Nadya | Tech Support Engineer]

Hello, Alex,

According to the provided information, it seems that you extended the example provided here and added a GridViewCommandColumn to the grid. If I understand you correctly, now, you are trying to make the buttons within the column look bigger. 

By default, the cells in RadGridView are the same height as the row they are located. If you want to change the height of a cell you should change the height of the containing row. You can increase the height of the button itself, however, if the cell's height is smaller than the button's height you will not be able to see the whole button. In the referred project, you can see that the ViewDefinition of the grid is set to RowDetailsViewDefinition that inherits from TableViewDefinition. This is the default view definition and the data is presented as a table. In this case, you can increase the height of the rows and this will increase the height of the button as well:

 this.GridViewRowDetailsExtended1.TableElement.RowHeight = 50;

Note, RadGridView can change its visual appearance and behavior by using a view definition. Referring to the provided picture and the grid layout that is shown, I can suggest using the HtmlViewDefinition. The HtmlViewDefinition adds row and column spanning features like in the HTML table. This feature enables spanning cells across more than one column or row. To specify a column spanning, set the ColSpan property of the CellDefinition. To specify a row spanning, set the RowSpan property. Please refer to the following help article which is quite useful on this topic: https://docs.telerik.com/devtools/winforms/controls/gridview/view-definitions/html-view 

Using the HtmlViewDefinition you can achieve increasing the size of the cell where the button is hosted. 

I prepared an example demonstrating this approach:

 public RadForm1()
 {
     InitializeComponent();
     People people = new People();
     this.radGridView1.DataSource = people.GetPeople();
     this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
     this.radGridView1.AllowAddNewRow = false;

     GridViewCommandColumn commandColumn = new GridViewCommandColumn("column1");
     commandColumn.HeaderText = "Buttons";
     this.radGridView1.Columns.Add(commandColumn);

     HtmlViewDefinition view = new HtmlViewDefinition();
     view.RowTemplate.Rows.Add(new RowDefinition());
     view.RowTemplate.Rows.Add(new RowDefinition());

     view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Name"));
     view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Id"));
     view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("HairColor"));
     view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Role"));
     view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("column1"));
     view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Description"));

     view.RowTemplate[0].Height = 30;
     view.RowTemplate.Rows[0].Cells[4].RowSpan = 2;
     view.RowTemplate.Rows[1].Cells[0].ColSpan = 4;

     this.radGridView1.ViewDefinition = view;
 }

I hope this information helps. Should you have further questions do not hesitate to contact me.

Regards,
Nadya
Progress Telerik

[Alex Dybenko]

Hi Nadya,

thanks for idea, that one is much better! I have looked at HtmlViewDefinition before, but did not realized, that i can use buttons, etc, there! Suggest that you update docs and example, to show button as well.

Alex