Button height with row details

3 posts, 1 answers
  1. Alex Dybenko
    Alex Dybenko avatar
    161 posts
    Member since:
    Jan 2005

    Posted 10 Dec 2020 Link to this post

    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

     

  2. Answer
    Nadya
    Admin
    Nadya avatar
    510 posts

    Posted 10 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Alex Dybenko
    Alex Dybenko avatar
    161 posts
    Member since:
    Jan 2005

    Posted 11 Dec 2020 in reply to Nadya Link to this post

    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

Back to Top