Integrating CKEditor in a detailsView in ASP.NET using VB.NET

Question

I'm trying to integrate CKEditor with a details View. My sample code is:

<asp:DetailsView ID="DetailsViewStation" runat="server" Height="50px" AutoGenerateRows="False"
                    DataKeyNames="StationNo" DataSourceID="StationSqlDataSource" CellPadding="4"
                    ForeColor="#333333" GridLines="None">
                    <AlternatingRowStyle BackColor="White" />
                    <CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" />
                    <FieldHeaderStyle BackColor="#FFFF99" Font-Bold="True" />
                    <Fields>
                        <asp:BoundField DataField="StationNo" HeaderText="Station Number" ReadOnly="True"
                            SortExpression="StationNo" ApplyFormatInEditMode="True">
                            <HeaderStyle Width="150px" />
                            <ItemStyle HorizontalAlign="Center" Width="1200px" />
                        </asp:BoundField>
                        <asp:BoundField DataField="Station_Name" HeaderText="Station Name" SortExpression="Station_Name">
                            <ItemStyle HorizontalAlign="Center" />
                        </asp:BoundField>
                    </Fields>
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                </asp:DetailsView>
                <asp:SqlDataSource ID="StationSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AgainConnectionString %>"
                    DeleteCommand="DELETE FROM [StationInfoTable] WHERE [StationNo] = @StationNo"
                    InsertCommand="INSERT INTO [StationInfoTable] ([StationNo], [Station_Name] VALUES (@StationNo, @Station_Name)"
                    SelectCommand="SELECT * FROM [StationInfoTable] WHERE ([StationNo] = @StationNo)"
                    UpdateCommand="UPDATE [StationInfoTable] SET [Station_Name] = @Station_Name, [Importatnat_Info] = @Importatnat_Info WHERE [StationNo] = @StationNo">
                    <DeleteParameters>
                        <asp:Parameter Name="StationNo" Type="Int32" />
                    </DeleteParameters>
                    <InsertParameters>
                        <asp:Parameter Name="StationNo" Type="Int32" />
                        <asp:Parameter Name="Station_Name" Type="String" />
                    </InsertParameters>
                    <SelectParameters>
                        <asp:ControlParameter ControlID="ListBoxChoices" Name="StationNo" PropertyName="SelectedValue"
                            Type="Int32" />
                    </SelectParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="Station_Name" Type="String" />
                        <asp:Parameter Name="StationNo" Type="Int32" />
                    </UpdateParameters>
                </asp:SqlDataSource>

I want to edit the data in details view with CKEditor to insert and delete links to and from database. Any one have done that before?

Answer 1

I'm not a DetailsView expert, but I think the following general summary covers what you will need to do.

Use a TemplateField rather than a BoundField for Station_Name. That would look like this:

 <asp:TemplateField HeaderText="Station Name">
     <ItemTemplate>
          <asp:Label ID="lblStationName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Station_Name") %>'></asp:Label>
     </ItemTemplate>
     <EditItemTemplate>
          <CKEditor:CKEditorControl ID="CKEditor1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Station_Name") %>' />
     </EditItemTemplate>
</asp:TemplateField>

This is what looks like a good link on updating the database from a DetailsView. Where your situation differs from his is that you are using CKEditor. But you can retrieve the information from the CKEditor control the same way he does, when he's ready to update:

Dim htmlText as String = Nothing
Dim ctl as CKEditor =  CType(DetailsViewStation.FindControl("CKEditor1"), CKEditor)
If ctl Is Nothing Then
    htmlText = ctl.Text
End If

If it turns out that you can't bind to the Text property of the CKEditor control, you would assign the value to the CKEditor.Text control the same way you retrieve it: by doing a DetailsViewStation.FindControl("CKEditor1") to retrieve the control, and assigning the HTML you have retrieved from the database to the control's Text property.

I hope this helps.

Answer 2

Based on the comments you've made, you never retrieve the Value from the Textbox / CKEditor.

Your binding is read-only due to DataBinder.Eval.

Try

         <asp:TemplateField HeaderText="Station Name">
                        <ItemTemplate>
                            <asp:Label ID="lblStation_Name" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Station_Name") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <CKEditor:CKEditorControl ID="CKEditor1" runat="server" Text='<%# Bind("Station_Name") %>' />
                        </EditItemTemplate>
                    </asp:TemplateField>

or

          <asp:TemplateField HeaderText="Station Name">
                        <ItemTemplate>
                            <asp:Label ID="lblStation_Name" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Station_Name") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <CKEditor:CKEditorControl ID="CKEditor1" runat="server" Text='<%# DataBinder.Bind(Container, "DataItem.Station_Name") %>' />
                        </EditItemTemplate>
                    </asp:TemplateField>

Edit: Based on your comment: How did you generate the SQLDataSource? It's best to use the designer. I guess you tried to generate the code yourself. I see multiple errors:

In the UpdateParameters you are using ControlParameters, but you got the values all wrong. The values you assigned toControlID should be assigned to PropertyName. Then assign to ControlID the name of the corresponding CKEditor.

Like this:

 <asp:ControlParameter ControlID="CKEditor12" PropertyName="Footer_notes" Type="String" />

Answer 3

The following code is after integrated CKEditor with DetailsView and I put the answer here to be clear for others to read it and benefit from it. Everything is the same except the Notes field that i wanted to use CKEditor with it to be able to insert hyperlinks in the database.

 <asp:TemplateField HeaderText="Notes">
                            <ItemTemplate>
                                <asp:Label ID="lblStationNotes" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Notes") %>'></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <CKEditor:CKEditorControl ID="CKEditor11" runat="server" Text='<%# Bind("Notes") %>' />
                            </EditItemTemplate>
                        </asp:TemplateField>