1. How to install?

See our download page for details.

2. How to run examples? I am new to web programming.

First install the component. See how to install.
Open IIS console.
Expand tree on left side down to your web site and see folder 'Editor/examples'.
On right side you will see list of example files.
Make right click on any file and select 'Browse' (not 'Open'!).


TIP: How to add reference to dll in Visual Studio project?

Go to toolbar menu Project > Add Reference > Click button 'Browse' >
> Find obout_Editor.dll > Click 'Open' > Click OK

Note: You don't need to create VS project to run examples.

3. How can I use the Editor with code behind?

Download Obout Editor with complete examples. Look at CB_Sample.aspx and CB_Sample.aspx.cs files.

4. How can I use the Editor in my asp.net page?

At the top of your ASP.NET source-code page add:
      <%@ Register TagPrefix="obout" Namespace="OboutInc.Editor" Assembly="obout_Editor" %>

5. How to set PathPrefix correctly?

Imagine, you have Web Application in Visual Studio like in the picture to the left. Folder Editor_data is taken from downloaded zip file. Here you have three ASP.NET pages: EditorPage1.aspx, EditorPage2.aspx, EditorPage3.aspx. If this Web Application is in the root site folder, you can set the PathPrefix property in the Editor component for all these ASP.NET files in the following way:      PathPrefix="/Editor_data/" Also you can set this property for each ASP.NET file particularly next way:    EditorPage1.aspx - PathPrefix="../Editor_data/"    EditorPage2.aspx - PathPrefix="../../Editor_data/"    EditorPage3.aspx - PathPrefix="Editor_data/"

6. How can I change the default font style in Editor panel?

The default font style is set in editor.css file. This file is contained in Editor/ed_styles/special folder in downloaded zip file.

By default, the css file contains next lines:

body,table td
           {
            font-family: verdana,sans-serif;font-size: 10pt;
           }
                        

By default, we see the following Editor panel:


Now, let's change those lines in the css file:

body,table td
           {
            font-family: courier new,courier;font-size: 12pt;
           }
                        

We'll see the following Editor panel:

7. How can I change the cell spacing in Editor grid?

The default cell spacing for the grid is set in style.css file. This file is contained in Editor/ed_styles folder in downloaded zip file.

By default, the css file contains next lines:

.HC_grid th     {
                       width:99%;vertical-align:top;margin:0px;border-width:0px;
                       padding:8px;  /* spacing between cells inside main Table */
                      }
.HC_grid td     {
                       width:110px;vertical-align:top;border-width:0px;
                       margin:0px;padding:0px;
                       padding-top:8px;padding-bottom:8px;padding-right:8px; /* spacing between cells inside main Table */
                      }
                        

By default, we see the following grid appearance:

Now, let's change those lines in the css file:

.HC_grid th     {
                       width:99%;vertical-align:top;margin:0px;border-width:0px;
                       padding:1px;  /* spacing between cells inside main Table */
                      }
.HC_grid td     {
                       width:110px;vertical-align:top;border-width:0px;
                       margin:0px;padding:0px;
                       padding-top:1px;padding-bottom:1px;padding-right:1px; /* spacing between cells inside main Table */
                      }
                        

We'll see the following grid appearance: