Insert Custom Control Inside Cell of Telerik Grid

Hi Dess,

I am not sure how I can use this it would be very helpful to me if you can share me any code example or any piece code which is relevant with this where control is been used inside grid cell.

It would great help.

Thanks,
Shubham Jain

Hello Shubham,

The RadHostItem will allow you to host your FDTSelectBox user control in the cell of RadGridView. The grid will need a custom cell that will be the parent of the RadHostItem. Based on this article the custom cell is created. It should look like this:

public class FDTSelectBoxCellElement : GridDataCellElement
{
    private RadHostItem hostElement;
    private FDTSelectBox fdTSelectBox;

    public FDTSelectBoxCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
    { }

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

        this.fdTSelectBox = new FDTSelectBox();
        this.hostElement = new RadHostItem(this.fdTSelectBox);
        this.Children.Add(this.hostElement);
    }

    protected override void SetContentCore(object value)
    {
        if (this.Value != null && this.Value != DBNull.Value)
        {
            // Populate the control with appropriate content based on the value of current cell.
            int number;
            if (int.TryParse(this.Value.ToString(), out number))
            {
                this.fdTSelectBox.EditText = number.ToString();
                this.fdTSelectBox.ButtonText = $"Btn {number}";
            }
        }
    }

    protected override Type ThemeEffectiveType
    {
        get { return typeof(GridDataCellElement); }
    }

    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is FDTColumn && context is GridDataRowElement;
    }
}

public class FDTColumn : GridViewDataColumn
{
    public FDTColumn(string fieldName) : base(fieldName)
    {
    }

    public override Type GetCellType(GridViewRowInfo row)
    {
        if (row is GridViewDataRowInfo)
        {
            return typeof(FDTSelectBoxCellElement);
        }
        return base.GetCellType(row);
    }
}

FDTColumn fdtColumn = new FDTColumn("Fdt");
this.radGridView1.Columns.Add(fdtColumn);

For more detailed information about the TPF you can read the section about TPF which my colleague Dess referenced in the previous post.

Hi Todar,

Thankyou for help it worked for me.

Regards,
Shubham Jain

Hi Todor,

Needed one help with above code how we can bind events with the buttons do we need to do same also in method

SetContentCore() 
 
 
Thanks,Shubham Jain

Hi, Shubham,

The CreateChildElements method is the appropriate place to subscribe for any events of the child elements. The SetContentCore method is expected to be called multiple times. That is why if you subscribe to any events there, make sure that you unsubscribe from the event first. Thus, you will avoid multiple subscriptions to the same event.

I hope this information helps.

Hi,Dess

Thankyou!!

Hi Todar/Dess,

I just wanted to know how I can access properties of hosted controls because I need to change there properties in my code during runtime.

like we can access cell values in rows.Cells[index].Value  and can change there values but now my cell host control then how i can access which is inside cell.

It would be a great help.

Thanks,

Shubham Jain

Hi, Shubham,

The SetContentCore method of the custom visual cell element is the appropriate place to extract the relevant information from the associated data row (and DataBoundItem respectively) and update the visual elements with the updated information. This means that once the rows.Cells[index].Value is modified, the next time the cell is refreshed, its SetContentCore method will be called and you can update the visualized data. Note that it is important for RadGridView to be notified for any updates. The following example is quite useful on the update topic:

https://docs.telerik.com/devtools/winforms/controls/gridview/populating-with-data/reflecting-custom-object-changes-in-rgv 

Hi Dess,
It s working for me.
Now I only need one last help is that when I am scrolling on grid there are visual glitches as I am hosting custom control inside cell of grid.so is there any way to eliminate the glitches .

Below is the attached image cell is overlapping column headers when scrolled

It would be really great help!!.

Thanks,
Shubham Jain

Hi, Shubham,

This is expected behavior when controls (not elements) are hosted in the grid cells. It was mentioned as a side effect in my initial reply: "Note that since this approach uses controls (instead of elements), some visual glitches are possible as controls do not support clipping. In addition, if you are having a lot of rows, performance implications may occur for the same reason. A better option is to consider using custom editor."

That is why I would recommend you once again to consider using a custom editor and just display the text for the cells if not in edit mode.

Hi Dess,

Okay I will move forward then with custom editor.

One help needed....

How I can use custom editor for my requirements as you already know....just give some light in that direction how i can move forward with custom editor.

Thanks,
Shubham Jain

Hi, Shubham,

A sample approach for creating a custom editor in RadGridView is demonstrated here:

https://docs.telerik.com/devtools/winforms/controls/gridview/editors/using-custom-editors 

The following KB article is also quite useful on this topic: https://docs.telerik.com/devtools/winforms/knowledge-base/use-popup-editor-as-gridview-editor 

I believe that they will serve the purpose of a guidance how to proceed further.

Hi Dess,

Thankyou for a help it works for me.

But I have one fear...

Since we are changing editor in Editor_Required event and  it will only fire in case when grid is in in edit mode.so at that time how we will deal at that time when grid was not in edit mode as we will be unable to change editor.

But your reply was vey great help for me really I appreciate your support.

Thanks,
Shubham Jain

Hi, Shubham,

The EditorRequired event is expected to be fired only for the cell that is currently being edited. Hence, the custom editor will be used only for this particular cell. Only one cell can be in edit mode at a time. This is actually the main reason for suggesting to use a custom editor (used for only one cell at a time) instead of a custom cell element (used for all visible cells not being in edit mode). 

Hi Dess,

One issue I am facing with this. I have some text to show in this control it looks fine when user dont click on that cell.
But as soon as the user clicks on control text disappears and if he again goes out of that control and click text come back again.

Anyway how we can persist that text data even when user click on that.
just attached one gif you can see there.

when I click and cells goes in edit mode text disappears and when clicked again outside text comes again.

I just want that text to be there even when user is inside that cell in edit mode.

Hi, Shubham,

According to the provided animated gif, I suspect that you apply a custom editor in the EditorRequired event. If you wan to initialize the editor with the value coming from the cell, it is suitable to handle the CellEditorInitialized event, cast the editor to the custom editor you have in this case and then set the editor's value to the value of the current cell in RadGridView. Since I am not familiar with the complete code snippet you are currently using, I can't provide a specific code snippet for the precise case. However, I believe that the guidance for which event to be used would put you in the right direction for further development.

Hi Dess,

You are very correct I am applying custom editor in EditorRequired event.

I am providing you the code snippet which I used meanwhile I will try to implement whole this with CellEditorInitialized .

if possible share me the code snippet with CellEditorInitialized Event.

I really appreciate your knowledge and quick response. 

//code snippet

private void GrdApplications_EditorRequired(object sender, EditorRequiredEventArgs e)
        {
            if (this.grdApplicationsColAppName.IsCurrent)    //checking a specific column
            {
                var editor = new FDBSelectBoxEditor();         //Custom Editor

                editor.SelectBox.AllowClear = false;

                editor.SelectBox.Editable = true;

                editor.SelectBox.EditMode = FDBEditMode.Edit;

                editor.SelectBox.SelectClick += grdApplications_SelectClick;

                e.Editor = editor;
            }
        }

Thanks,
Shubham Jain

It should look something like the following code as Desislava suggested in her post:

private void RadGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    var customEditor = e.ActiveEditor as FDBSelectBoxEditor;
    customEditor.Value = e.Value;
}

As I am not familiar with the custom editor implementation, I am assuming that it has a Value property. You can test it and share if it is working for you.