HtmlViewDefinition of the RadGridView

4 posts, 1 answers
  1. Ludovic
    Ludovic avatar
    12 posts
    Member since:
    Nov 2011

    Posted 12 Jan 2012 Link to this post

    Hello,

    I am trying to divide the column header of some columns in two with the HtmlViewDefinition of the RadGridView. My table is not so complex for the moment but I just can't make it work....

    I attached an Excel file screenshot to this message so you can have a look to what I want to do and below is the code I wrote so far:

    radGridViewSaleReport.DataSource = myList; //binding list
     
     
    HtmlViewDefinition view = new HtmlViewDefinition();
     
    view.RowTemplate.Rows.Add(new RowDefinition());
    view.RowTemplate.Rows.Add(new RowDefinition());
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Customer Name"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Unit"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Unit Type"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Unit Area"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Price/Sq.M."));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Selling Price"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Initial booking"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Booking"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Signing Contract"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Contract signed"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Transfer"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Sale"));
    view.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Comment"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Amount"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Date"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Amount"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Date"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Amount"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Date"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Amount"));
    view.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Date"));
     
    view.RowTemplate.Rows[0].Cells[0].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[1].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[2].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[3].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[4].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[5].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[9].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[11].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[12].RowSpan = 2;
    view.RowTemplate.Rows[0].Cells[6].ColSpan = 2;
    view.RowTemplate.Rows[0].Cells[7].ColSpan = 2;
    view.RowTemplate.Rows[0].Cells[8].ColSpan = 2;
    view.RowTemplate.Rows[0].Cells[10].ColSpan = 2;
     
    radGridViewSaleReport.Update();
    this.radGridViewSaleReport.ViewDefinition = view;
    this.radGridViewSaleReport.TableElement.CellSpacing = -1;
    this.radGridViewSaleReport.TableElement.RowSpacing = -1;

    I have a binding list full of data in it which I give to the radgridview and then I define the view and apply the view to the radgridview after updating it.

    With this code, the radgridview look like the screenshot radgridview result.

    Any idea how to display the data correctly into the radgridview?

    Thanks,
    LB
  2. Answer
    Jack
    Admin
    Jack avatar
    2335 posts

    Posted 17 Jan 2012 Link to this post

    Hi Ludovic,

    Thank you for contacting us.

    Please note that RadGridView should contain columns for all cells represented in the view definition. So, you have to add columns first. There is a restriction in RadGridView which says that all columns should have unique name, so you have to change names of Date and Amount columns. You should use the HeaderText property of GridViewColumn to customize the header cell text.

    When using HtmlViewDefinition, RadGridView repeats the header layout in all rows. So, you may prefer the ColumnGroupsViewDefinition instead. If this is the case, you can use the following code:
    ColumnGroupsViewDefinition view = new ColumnGroupsViewDefinition();
     
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Customer Name"]);
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Unit"]);
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Unit Type"]);
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Unit Area"]);
     
    view.ColumnGroups.Add(new GridViewColumnGroup("Initial Booking"));
    view.ColumnGroups[4].Rows.Add(new GridViewColumnGroupRow());
    view.ColumnGroups[4].Rows[0].Columns.Add(this.radGridView1.Columns["Amount1"]);
    view.ColumnGroups[4].Rows[0].Columns.Add(this.radGridView1.Columns["Date1"]);
     
    view.ColumnGroups.Add(new GridViewColumnGroup("Booking"));
    view.ColumnGroups[5].Rows.Add(new GridViewColumnGroupRow());
    view.ColumnGroups[5].Rows[0].Columns.Add(this.radGridView1.Columns["Amount2"]);
    view.ColumnGroups[5].Rows[0].Columns.Add(this.radGridView1.Columns["Date2"]);
     
    view.ColumnGroups.Add(new GridViewColumnGroup("Contract signing"));
    view.ColumnGroups[6].Rows.Add(new GridViewColumnGroupRow());
    view.ColumnGroups[6].Rows[0].Columns.Add(this.radGridView1.Columns["Amount3"]);
    view.ColumnGroups[6].Rows[0].Columns.Add(this.radGridView1.Columns["Date3"]);
     
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Contract_signed"]);
     
    view.ColumnGroups.Add(new GridViewColumnGroup("Transfer"));
    view.ColumnGroups[8].Rows.Add(new GridViewColumnGroupRow());
    view.ColumnGroups[8].Rows[0].Columns.Add(this.radGridView1.Columns["Amount4"]);
    view.ColumnGroups[8].Rows[0].Columns.Add(this.radGridView1.Columns["Date4"]);
     
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Sale"]);
    AddColumnWithoutHeader(view.ColumnGroups, this.radGridView1.Columns["Comment"]);
     
    this.radGridView1.ViewDefinition = view;
     
    void AddColumnWithoutHeader(ColumnGroupCollection columnGroups, GridViewColumn column)
    {
        columnGroups.Add(new GridViewColumnGroup(column.Name));
        int i = columnGroups.Count - 1;
        if (i < 0) i = 0;
        columnGroups[i].ShowHeader = false;
        columnGroups[i].Rows.Add(new GridViewColumnGroupRow());
        columnGroups[i].Rows[0].Columns.Add((GridViewDataColumn)column);
    }

    I hope this helps. If you need further assistance, do not hesitate to write back.
     
    Greetings,
    Jack
    the Telerik team

    SP1 of Q3’11 of RadControls for WinForms is available for download (see what's new).

  3. UI for WinForms is Visual Studio 2017 Ready
  4. Ludovic
    Ludovic avatar
    12 posts
    Member since:
    Nov 2011

    Posted 17 Jan 2012 Link to this post

    Hi Jack,

    Thank you for your answer. I made it work in 2 minutes!

    I was focusing on the view and wondering why it did not work. I created before HtmlViewDefinition and ColumnGroupsViewDefinition similar to what I posted but could not find out why it did not work. Actually I forgot to add the columns before applying the view.

    Thanks again! I will create a more complex view now to fit what I want to do.
    LB

    PS: I am just starting to use Telerik, hopefully soon I will understand how everything works.
  5. Jack
    Admin
    Jack avatar
    2335 posts

    Posted 20 Jan 2012 Link to this post

    Hi Ludovic,

    Thank you for this update. I am glad to hear that I could help. Please, do not hesitate to contact us if you need further assistance.
     
    Greetings,
    Jack
    the Telerik team

    SP1 of Q3’11 of RadControls for WinForms is available for download (see what's new).

Back to Top