如何在网格中插入 HTML 编辑器？答案

【问题标题】：How to insert HTML Editor in Grid?如何在网格中插入 HTML 编辑器？
【发布时间】：2013-07-31 17:35:15
【问题描述】：

您好，我正在使用“Tekerik Controls 试用版”，我正在构建网格。现在，当我按下“编辑”然后选择行 ShortDescription 时，我想在网格中插入 HTML 编辑控件。我想要打开 HTML 控件，以便我可以编辑里面的所有信息。

您可以在此处查看示例。

这是我的代码

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

有什么想法可以做到这一点吗？

【问题讨论】：

标签： asp.net html datagrid telerik html-editor

【解决方案1】：

使用UserControlEditForm

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

在yourUserControl.ascx 中，您可以添加telerik RadEditor 或其他一些html 编辑器。

这是如何从 Grid 获取值到 userControl，

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

        }

这就是如何从 userControl 获取价值到您的主网格，

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

你可以看到reference1，reference2！

或

不使用userControlEditForm，可以使用editFormTemplate

 <EditFormSettings EditFormType="Template">
            <FormTemplate>

见demo1和demo2！

祝你好运:)

【讨论】：

【解决方案2】：

我找到了你只需要改变的解决方案

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

到GridHTMLEditorColumn

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

【讨论】：