Insert Custom Control Inside Cell of Telerik Grid

1 Answer 157 Views
GridView
Shubham
Top achievements
Rank 3
Iron
Iron
Iron
Shubham asked on 20 Jul 2023, 09:43 AM | edited on 20 Jul 2023, 09:44 AM

Hi,
I have one custom control named FDTSelectBox.
I want to use this inside grid.

I have been already gone through the documentation of custom cell but not able to implement that.

Because in order to use FDTSelectBox Inside grid I need to inherit that from GridDataCellElement class.

But my problem is that my custom control FDTSelectBox is already inheriting from UserControlClass which system provided class and it is tightly coupled with that. and you know in C# we cannot inherit from 2 classes multiple inheritance not supported.

below is my custom control structure

public class FDTSelectBox : UserControl, IFDBControl

{

  //some code.....

}

Please suggest if there is some way so that I can put this control inside cell of grid.

Please Help!!

Thanks,
Shubham Jain

1 Answer, 1 is accepted

Sort by
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 Jul 2023, 12:04 PM

Hi, Shubham,

It is possible to create a custom cell which contains whatever element you need. However, you can add RadElements not RadControls as child elements.

RadHostItem is the appropriate element that allows hosting controls: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/elements/use-control-inside-an-element 

Following a similar approach you can host the UserControl inside a RadHostItem and add the RadHostItem to a custom cell element in the grid.  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.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 24 Jul 2023, 09:09 AM

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

Todor
Telerik team
commented on 26 Jul 2023, 01:46 PM

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;
    }
}
Then create a column that will utilize the cell:
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);
    }
}
And in the end, add the column to RadGridView:
FDTColumn fdtColumn = new FDTColumn("Fdt");
this.radGridView1.Columns.Add(fdtColumn);
The result on my side is shown below. Note that I have created a sample FDTSelectBox user control that contains a text box and button controls in it for illustration purposes:

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

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 27 Jul 2023, 07:50 AM

Hi Todar,

Thankyou for help it worked for me.

Regards,
Shubham Jain

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 31 Jul 2023, 12:37 PM

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

Dess | Tech Support Engineer, Principal
Telerik team
commented on 02 Aug 2023, 01:57 PM

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.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 04 Aug 2023, 09:45 AM

Hi,Dess

Thankyou!!

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 07 Aug 2023, 05:42 AM

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

Dess | Tech Support Engineer, Principal
Telerik team
commented on 09 Aug 2023, 12:47 PM

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 

 

 

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 22 Aug 2023, 07:40 AM

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

Dess | Tech Support Engineer, Principal
Telerik team
commented on 22 Aug 2023, 01:57 PM

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.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 23 Aug 2023, 06:50 AM

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

Dess | Tech Support Engineer, Principal
Telerik team
commented on 24 Aug 2023, 01:26 PM

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.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 25 Aug 2023, 03:29 PM

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

Dess | Tech Support Engineer, Principal
Telerik team
commented on 30 Aug 2023, 08:46 AM

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

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 04 Sep 2023, 12:21 PM

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.

Dess | Tech Support Engineer, Principal
Telerik team
commented on 04 Sep 2023, 03:46 PM

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.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 05 Sep 2023, 05:35 AM

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

 

Dinko | Tech Support Engineer
Telerik team
commented on 07 Sep 2023, 11:55 AM

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.

Shubham
Top achievements
Rank 3
Iron
Iron
Iron
commented on 08 Sep 2023, 12:18 PM

Thankyou Dinkoo!!
Tags
GridView
Asked by
Shubham
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or