[Solved] CKEditor not working when editing in ASP.Net GridView row

Hi Vincenzo67,

Refer below sample.

HTML

<script src="Scripts/ckeditor/ckeditor.js"></script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="true" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="tx1" runat="server" TextMode="MultiLine"
                    Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'></asp:TextBox>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="tx2" runat="server" TextMode="MultiLine"
                    Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" />
                <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] tr:has(td)").each(function () {
            if ($(this).find("[id*=tx1]").length > 0) {
                LoadEditor($(this).find("[id*=tx1]").attr('id'), true);
            }
            if ($(this).find("[id*=tx2]").length > 0) {
                LoadEditor($(this).find("[id*=tx2]").attr('id'), false);
            }
        });
    });
    function LoadEditor(id, isReadOnly) {
        var instance = CKEDITOR.instances[id];
        if (instance) {
            CKEDITOR.remove(instance);
        }
        CKEDITOR.replace(id, { readOnly: isReadOnly });
    }
</script>

Config.js

CKEDITOR.editorConfig = function (config) {
    config.removePlugins = 'bidi,image,forms,adobeair,devtools,find,maximize,a11yhelp,about,divarea,liststyle,tabletools,tableresize,contextmenu,codemirror,docprops,preview,smiley,sourcearea,save,flash,iframe,tabletools,templates,showblocks,newpage,language,print,div';
    config.width = '400';
    config.height = '100';
};

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[]
    {
        new DataColumn("Id"),
        new DataColumn("Contents")
    });
    dt.Rows.Add(1, "<p><span style='text-align:'>Text row1</span></p><p>&nbsp;</p>");
    dt.Rows.Add(2, "<p><span style='text-align:'>Text row2</span></p><p>&nbsp;</p>");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
    GridView1.EditIndex = e.NewEditIndex;
    this.BindGrid();
}

protected void OnUpdate(object sender, EventArgs e)
{
    GridViewRow row = (sender as LinkButton).NamingContainer as GridViewRow;
    GridView1.EditIndex = -1;
    this.BindGrid();
}

protected void OnCancel(object sender, EventArgs e)
{
    GridView1.EditIndex = -1;
    this.BindGrid();
}

Screenshot