Embedding Webbrowser control in RadGridview

[Wasif Abbas]

We are trying to implement a grid with HTML content being displayed in a column. Using Disablehtmlrendering=false does not work as we are having a lot of HTML markup that needs a control similar to the webbrowser control to display.

We are trying to use the CellFormatting Event to populate the cell with the web browser control but it seems like it only accepts RadElement controls. Are there any examples of embedding the Webbrowser control or Windows form controls or something similar in a Rad Gridview?

[Jack]

Hi Wasif Abbas,

Hosting a web browser control in a grid cell is possible. However, this can lead to memory and performance issues. A better option will be to use the WebBrowser control to create an image and  then to use this image in the cell. Please consider the code snippet below:

WebBrowser wb = new WebBrowser();
GridViewDataRowInfo currentRow;

GridViewImageColumn imageColumn = new GridViewImageColumn("Image", "");
imageColumn.Width = 150;
this.radGridView1.Columns.Add(imageColumn);
this.radGridView1.GridElement.RowHeight = 50;

wb.Height = 200;
wb.Width = 200;
wb.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(wb_DocumentCompleted);
for (int i = 0; i < this.radGridView1.Rows.Count; i++)
{
    currentRow = this.radGridView1.Rows[i];
    wb.DocumentText = currentRow.Cells["Name"].Value.ToString();
    while (wb.ReadyState != WebBrowserReadyState.Complete)
    {
        Application.DoEvents();
    }
}

void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    Bitmap bmp = new Bitmap(this.Size.Width, this.Size.Height);
    wb.DrawToBitmap(bmp, new Rectangle(0, 0, bmp.Width, bmp.Height));
    currentRow.Cells["Image"].Value = bmp;
}

I hope this helps.

Sincerely yours,
Jack
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Wasif Abbas]

Jack,

Thank you for the response. This approach works well only by keeping the height of the rows fixed, Please check the attached screenshot to see how exactly the grid now appears with the image column 'Question'. Notice how the scroll bars from the web browser appear in the image but cannot be used and the image itself gets cut off. Also the height of the row does not stretch vertically even after setting the StretchVertically property of the column to true. I am setting the width of the column and the webbrowser control to 540px.

Also we'd like to know of any generic way to add a general Windows Form control like a label(not the RadElement label) or a custom created control to the cell of the gridview so that we can work on some custom control to handle the HTML in the future.

Thanks,
Wasif

[Jack]

Hi Wasif Abbas,

You should set the AutoSizeRows property to true in order to auto size grid rows. To calculate the correct height, the images should be assigned before setting this property. We know about this limitation and it will be addressed in one of our upcoming releases.

The following is a sample on how to add a label control inside grid cells:

void radGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
{
    if (e.CellType == typeof(GridDataCellElement))
    {
        e.CellType = typeof(CustomCell);
    }
}

public class CustomCell : GridDataCellElement
{
    public CustomCell(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {
    }

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

        Label label = new Label();
        RadHostItem hostItem = new RadHostItem(label);
        this.Children.Add(hostItem);
    }

    public Label Label
    {
        get { return (Label)((RadHostItem)this.Children[0]).HostedControl; }
    }

    protected override void SetContentCore(object value)
    {
        Label.Text = value != null ? value.ToString() : string.Empty;
    }
}

However, the best option is using the integrated html rendering by setting DisableHTMLRendering to false. We plan to extend this feature, so please tell us more about the limitations that you see in it. We will appreciate your feedback.

 

Regards,
Jack
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Data Systems]

Good morning:

Could send this same code but Visual Studio please.

Thanks

[Richard Slade]

Hi Data Systems, 

Do yuo mean you would like the above in VB.NET? Is so, have a look at the Telerik Code Coverter which will convert C# to VB and vice versa for you. 

Hope that helps
Richard

[Data Systems]

Hi Richard Slade

You can not do the translation. Says that the code may fail to start, but at least I do not identify .-
Screenshot attached

Any other solution to translate the code? Please

Thank you very much

[Ryan]

Hi,

I used the Telerik Code Converter with no problems at all. Please find code below for VB.NET

Private Sub radGridView1_CreateCell(sender As Object, e As GridViewCreateCellEventArgs)
    If e.CellType = GetType(GridDataCellElement) Then
        e.CellType = GetType(CustomCell)
    End If
End Sub

Public Class CustomCell
    Inherits GridDataCellElement
    Public Sub New(column As GridViewColumn, row As GridRowElement)
        MyBase.New(column, row)
    End Sub

    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()

        Dim label As New Label()
        Dim hostItem As New RadHostItem(label)
        Me.Children.Add(hostItem)
    End Sub

    Public ReadOnly Property Label() As Label
        Get
            Return DirectCast(DirectCast(Me.Children(0), RadHostItem).HostedControl, Label)
        End Get
    End Property

    Protected Overrides Sub SetContentCore(value As Object)
        Label.Text = If(value IsNot Nothing, value.ToString(), String.Empty)
    End Sub
End Class

'=======================================================
'Service provided by Telerik (www.telerik.com)
'Conversion powered by NRefactory.
'Twitter: @telerik, @toddanglin
'Facebook: facebook.com/telerik
'=======================================================

[Jack]

Ryan, thank you for posting the code. 

@Data systems, I hope the provided VB code helps. Please write back if you need further assistance.

All the best,
Jack
the Telerik team

[Data Systems]

 @Ryan: 

Thank you very much for your response, I have been very useful

@Jack  (the Telerik team) : Thank you very much, I have been very useful, Ryan's response