Best Practices

At this point the details view is up and running. It also allows basic operations like browsing through the records, adding, editing, and deleting, as shown in Figure 5.

But the problem is that the default controls used to edit the fields aren't suited to the large amount of text an article requires. In the next section you'll learn how to replace the default fields with KTML, the visual HTML editor mentioned above.

Replace the Default Editing Controls
Now to integrate various controls that allow editing content in the DetailsView control. The changes we are about to make consist of:

• Replacing the description text field with a text area for both edit and insert.
• Replacing the content text field with the KTML 4 Lite online HTML editor for both edit and insert.

The first step towards making these changes possible has been already made in the previous section, when each dynamic field was turned into a TemplateField. In the standard data-bound controls provided by the Microsoft IDE, each field's properties (including the control used to edit its value) can be altered only if the field is set as a template. If this is true, then editing the field is reduced to using the Edit template command from the Tasks pane for the control.

So to edit the DetailsView control field we have to take these steps:

1. Select the Edit Templates option from the Tasks pane. From the Display dropdown menu you can select which of the field's states (or even all at the same time) that you want to edit. Note: By states we mean the way the field is displayed for a specific action. For example, for the Insert state or InsertItem Template, the field is displayed as a text box, while for the default state (or simply Itemtemplate) it's a data-bound label.
2. Select the Field[1] - Article description item from the Display dropdown menu in the Tasks pane. By selecting the top item, and not its children, all properties can be edited at the same time on the page, as shown in Figure 6.
3. To change the field used for editing, click on the text box inside the EditItemTemplate area. Then in the Properties panel change the TextMode option to MultiLine. Repeat the same steps for the InsertItemTemplate text box.
4. Next select the Field[2] - Article content item in the Display drop down menu. You'll turn the text fields into visual HTML editors with the help of KTML 4 Lite.
5. Put the cursor on the text field inside the EditItemTemplate section. From the InterAKT tab of the Toolbox that you've created at the beginning of the article drag and drop the KTML 4 Lite control next to the text field. In a second or so the control will be rendered on your page.
6. Now you have to bind the control to the text field it must replace. Click the KTML 4 control to select it and then from the Properties panel in the ControlToBindTo dropdown menu select TextBox3 (the name of the text box it replaces).
7. Repeat steps 5 and for the text field in the InsertItemTemplate area.
8. Now, in the Tasks pane for the DetailsView control click the End template editing option to save the changes.
9. KTML 4 is an AJAX-enabled editor and it also uses some server-side code for file operations and other modules. So it depends on some files to work properly. Browse to the folder where you unpacked KTML at the beginning of this article. Inside is a folder named includes that you must copy to the root of the CMS project.
10. You also need to tell the page that HTML content in variables is allowed - since this is what the KTML editor will submit to the server: valid XHTML code. To do this, switch to Source view inside the IDE. Locate the first line of the file and add the following directive before the closing %> tag: ValidateRequest="false".

Now you can save the page and load it in a browser to test it. Click the edit link for one of the articles to test out KTML. It seems much easier to add rich content than through the text box as you can see in Figure 7.

Now you no longer have to rely on the Webmaster just to update a piece of content and the site editors don't have to take HTML courses. If they know how to use a word processor, they will have no trouble with KTML.

What to Do with KTML
Using KTML instead of a text area will make it easier to create and edit rich content for the site users using features like:

• Text formatting to apply different formatting options like bold, italic, subscript, and superscript or align the text you just have to push a button.
• Style content visually using CSS. Simply specify the CSS file to use in KTML and editors can apply styles using a dropdown menu. Entries in the menu are already styled so you know what the result will look like before applying it.
• Create ordered and unordered lists easily or organize your data into tables.
• Upload and manage site files, media, or documents, insert images into the page, or create links to files for download are all done using the integrated Remote File Explorer.
• Create forms. If you have to create a quick submit form you can do it without resorting to the Webmaster.

Where to Go from Here
You can find out more about KTML from these articles:

• The KTML live demo page, accessible here at www.interaktonline.com/Products/Online-HTML-Editor/KTML-for-.NET/Live-Demos/, where you can use the editor and discover what it can do.
• The Unveiling KTML article at www.interaktonline.com/Products/Online-HTML-Editor/ KTML-for-.NET/Documentation/Articles/Unveiling+KTML+4.html?id_art=28 shows off the features and several uses of the editor.
• The user manual is available online in Flash format at www.interaktonline.com/Documentation/KTML/index.html.
• If you want to push the limits of KTML and extend what it can do for you, don't miss the API at www.interaktonline.com/Documentation/KTMLLITE-API/index.html.
• KTML 4 Lite also has a big brother, the full version that adds more Property Panels for almost all the elements you can insert from the editor, spellchecking, XHTML compliance, and even an integrated image editor. You can find out what are the differences between the two versions at www.interaktonline.com/Products/Online-HTML-Editor/KTML-for-.NET/VersionComparison/.

Add Your Feedback

In order to post a comment you need to be registered and logged in.

Register | Log in

Please wait while we process your request...