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?

Hi, @Ahmed. Is `ImportantInfo` the field you want to edit? If not, what field is it that you want to edit? — Ann L., Dec 26 '12 at 15:10
The database is bigger than my code above. I removed fields from it to be easier to understand. but for the above code I want to edit the Station_Name field. — Ahmed, Dec 26 '12 at 15:20
So you're using the Details View so you have the Edit and Delete links on the individual records? Am I right? — Ann L., Dec 26 '12 at 20:05

Ann L. · Accepted Answer · 2012-12-26T21:32:38.403

5

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.

edited Dec 26 '12 at 21:32

answered Dec 26 '12 at 20:32

Ann L.

13,760
5
35
66

OK, that should do it. BTW, you might find this site very useful: http://www.developerfusion.com/tools/convert/csharp-to-vb/ – Ann L. Dec 26 '12 at 20:40
it is not working. I have error after i changed the BoundField to TemplateField. So, it that mean i should not use detailsView if yes which way r u using? – Ahmed Dec 26 '12 at 20:55
DataBinding: 'System.Web.UI.WebControls.DetailsView' does not contain a property with the name 'Station_Name'. – Ahmed Dec 26 '12 at 21:29
I'm sorry, I left something out. Sorry about that. – Ann L. Dec 26 '12 at 21:32
I made a mistake: I should have said "DataItem.Station_Name" instead of just "Station_Name" in the databinding language. Sorry about that. – Ann L. Dec 26 '12 at 21:33
Ok cool I'm alomst there. Now I'm having error when I try to write back to the database? – Ahmed Dec 26 '12 at 21:36
NO you are just fine. You helping me a lot and I really do appreciate that. Thanks – Ahmed Dec 26 '12 at 21:37
and the error is Cannot insert the value NULL into column 'Station_Name', table 'C:\DOCUMENTS AND SETTINGS\AHMEDK\DESKTOP\MASTERINFOWEBSITE\APP_DATA\AGAINSTATIONINFO.MDF.dbo.StationInfoTable'; column does not allow nulls. UPDATE fails. The statement has been terminated. – Ahmed Dec 26 '12 at 21:41
Hi, @Ahmed. Are you still having trouble? If so, try making your UpdateParameters Station_Name parameter into a control parameter, referencing the CKEditor control, Text property. – Ann L. Dec 31 '12 at 17:10
I have changed the Parameter to ControlParameter and I am getting this error: A ControlID must be specified in ControlParameter 'Station_Name'. – Ahmed Dec 31 '12 at 17:31
Hmm. I would expect the ControlID property to need to be set to the ID of the CKEditor control. But since that's inside the DetailsView, you might have to set it in the code-behind (because of the difficulty of predicting what the control ID will be ahead of time, when it's part of a templated control.) – Ann L. Dec 31 '12 at 18:43
I have tried few things but I still have the same problem. I post the code after the changes for you to take a look. Thank you – Ahmed Dec 31 '12 at 20:15
Hey Ann, I have changed the update tag to: – Ahmed Jan 02 '13 at 17:17
But now when i display it in another page everything mess up. also, when i display, it just display text not hyperlink or anything. – Ahmed Jan 02 '13 at 17:20
What do you mean by "display it in another page"? Display the saved data? Also, when you say "when I display" (in the second sentence) does it display your hyperlink as HTML or just as a string of text? – Ann L. Jan 02 '13 at 20:43

citronas · Answer 2 · 2013-01-02T19:51:39.653

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

Hey Citronas, I changed eval to Bind and the program had a lot of errors. Then, I removed dataBinder and left just Bind, i run it and i have this erorr:Could not find control 'CKEditor1' in ControlParameter 'Station_Name'. — Ahmed, Jan 02 '13 at 14:41
Definitely, was useful and iam sorry I didnt thank you yet because iwas little busy.also, i would mark you answer but she directed me more and from the begining. For me, I would mark you guys both as a an answer but I think i cant do that. I am new to here so if i can let me know please. thank you for you help. — Ahmed, Jan 07 '13 at 18:13

score 2 · Answer 3 · answered Jan 07 '13 at 16:10

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>

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

3 Answers3