[Solved] CKEditor not working in ASP.Net Gridview RowEditing while Paging using C# and VB.Net

Hi georgeacuster...,

You need to set the CKEDITOR readOnly property.

Refer below example.

HTML

<script src="Scripts/ckeditor/ckeditor.js"></script>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowEditing="OnRowEditing"
    PageSize="1" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="true" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="txtRow" runat="server" TextMode="MultiLine"
                    Text='<%# HttpUtility.HtmlDecode(Eval("contents").ToString()) %>'></asp:TextBox>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtEditRow" 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*=txtRow]").length > 0) {
                LoadEditor($(this).find("[id*=txtRow]").attr('id'), true);
            }
            if ($(this).find("[id*=txtEditRow]").length > 0) {
                LoadEditor($(this).find("[id*=txtEditRow]").attr('id'), false);
            }
        });
    });
    function LoadEditor(id, isReadOnly) {
        var instance = CKEDITOR.instances[id];
        if (instance) {
            CKEDITOR.remove(instance);
        }
        CKEDITOR.replace(id, { readOnly: isReadOnly });
    }
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

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();
}

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    this.BindGrid();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindGrid()
    End If
End Sub

Private Sub BindGrid()
    Dim dt As DataTable = 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()
End Sub

Protected Sub OnRowEditing(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
    GridView1.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub

Protected Sub OnUpdate(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast((TryCast(sender, LinkButton)).NamingContainer, GridViewRow)
    GridView1.EditIndex = -1
    Me.BindGrid()
End Sub

Protected Sub OnCancel(ByVal sender As Object, ByVal e As EventArgs)
    GridView1.EditIndex = -1
    Me.BindGrid()
End Sub

Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    GridView1.PageIndex = e.NewPageIndex
    Me.BindGrid()
End Sub

Screenshot