Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WinForms > General Discussions > HtmlViewDefinition of the RadGridView

Answered HtmlViewDefinition of the RadGridView

Feed from this thread
  • Ludovic avatar

    Posted on Jan 12, 2012 (permalink)

    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

    Reply

  • Answer Jack Jack admin's avatar

    Posted on Jan 17, 2012 (permalink)

    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).

    Reply

  • Ludovic avatar

    Posted on Jan 17, 2012 (permalink)

    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.

    Reply

  • Jack Jack admin's avatar

    Posted on Jan 20, 2012 (permalink)

    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).

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / WinForms > General Discussions > HtmlViewDefinition of the RadGridView
Related resources for "HtmlViewDefinition of the RadGridView"

Features  |  Demos  |  Documentation  |  Telerik TV  |  Knowledge Base  |  Code Library  |  Step-by-step Tutorial  |  Blogs   |  Self-Paced Trainer  ]