How to insert HTML Editor in Grid?

Question

Hello, I am using 'Trial Of Tekerik Controls', I am building the Grid. Now, I want to insert HTML Edit control in the Grid when I press 'Edit' and then select row ShortDescription. I want HTML control to open, so that I can edit all information inside.

You can see here the example.

Here is my code

 <telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="True" GridLines="None" DataSourceID="DataSource1" AllowFiltering="False" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowFilteringByColumn="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0">
                <MasterTableView GroupLoadMode="client" ShowGroupFooter="False" GroupsDefaultExpanded="False" AutoGenerateColumns="False" DataKeyNames="ID">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column" HeaderText="ID" ReadOnly="True" SortExpression="ID" UniqueName="ID">
                        </telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="LoadCategory" DataType="System.Boolean" FilterControlAltText="Filter LoadCategory column" HeaderText="LoadCategory" SortExpression="LoadCategory" UniqueName="LoadCategory">
                        </telerik:GridCheckBoxColumn>
                        <telerik:GridBoundColumn DataField="ProductCategory" FilterControlAltText="Filter ProductCategory column" HeaderText="ProductCategory" SortExpression="ProductCategory" UniqueName="ProductCategory">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="ShortDescription" SortExpression="ShortDescription" UniqueName="ShortDescription">

                          <%-- This is the row --%>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="NumberOfItems" DataType="System.Int16" FilterControlAltText="Filter NumberOfItems column" HeaderText="NumberOfItems" SortExpression="NumberOfItems" UniqueName="NumberOfItems">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CategoryTitle" FilterControlAltText="Filter CategoryTitle column" HeaderText="CategoryTitle" SortExpression="CategoryTitle" UniqueName="CategoryTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SeoTitle" FilterControlAltText="Filter SeoTitle column" HeaderText="SeoTitle" SortExpression="SeoTitle" UniqueName="SeoTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SeoDescription" FilterControlAltText="Filter SeoDescription column" HeaderText="SeoDescription" SortExpression="SeoDescription" UniqueName="SeoDescription">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowDragToGroup="True">
                </ClientSettings>
            </telerik:RadGrid>

Any ideas how i can do this?

Answer 1

I find the solution you just need to change

  <telerik:GridBoundColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="ShortDescription" SortExpression="ShortDescription" UniqueName="ShortDescription">
                        </telerik:GridBoundColumn>

to GridHTMLEditorColumn

 <telerik:GridHTMLEditorColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="ShortDescription" SortExpression="ShortDescription" UniqueName="ShortDescription">
                        </telerik:GridHTMLEditorColumn>

Answer 2

Use UserControlEditForm

    <EditFormSettings UserControlName="yourUserControl.ascx" EditFormType="WebUserControl">
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
    </EditFormSettings>

In yourUserControl.ascx , you can add telerik RadEditor or some other html editor .

This is how to get value from Grid to userControl,

  object _fieldValue = DataBinder.Eval(DataItem, "YourDataField");
        if ((_fieldValue != DBNull.Value) && (_fieldValue != null))
        {
            yourHtmlEditor.Text = _fieldValue .ToString();

        }

and this is how to get value from userControl to your Main Grid,

  UserControl usercontrol = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
  string _value= (usercontrol.FindControl("yourHtmlEditor") as typeOfyourEditor).Text;

You can see the reference1 , reference2 !

or

Without using userControlEditForm , you can use editFormTemplate

 <EditFormSettings EditFormType="Template">
            <FormTemplate>

See demo1 and demo2 !

Good Luck :)