Gilly Barr

Searching for a WYSIWYG editor :
I've been searching the internet these past few days for the best free WYSIWYG editor...
For those who aren't familiar with the term - WYSIWYG is an abbreviation for What You See Is What You Get editor. It's those small word editors you see on sites like this one that allow you to use rich text and even view your text in html.

I've been using these editors for sites i've been building for quite a while, finding them very comfortable.
I used to use fckEditor in the past (which is a great editor), when I programmed mostly in PHP. But now I wanted something more comfortable for .net...

tinyMCE and it's benefits :
Now I found tinyMCE which I think is the best, at least for the .net fans among us.
 - For starters, they have their own control you can add to your toolbox. You just download the dll, add it to your toolbox and drag it to your aspx design page!
 - Of course they have all the regular options you can ask for in a regular editor - colors, links, images, formatting text, numbering, etc....
 - Another thing I like is that it works great with "invisible" tables, meaning you can add a table and give it border=0 and still see the border while editing. This might sound trivial but i ran into an editor (even two) that couldn't do this.
 - It has a bunch of plugins you can choose from like automatic spell checker, emoticons, find/replace dialog, and more...
 - Compatible with all the main browsers (FireFox, IE, Opera...)

- The last benefit, which I'll explain in detail is:
Getting tinyMCE to work in an UpdatePanel :
My current project uses alot of UpdatePanels and partial updates. In some cases I need to load the WYSIWYG editor in a partial update. I thought this would be easy, and at first I tried with two other editors. I tried tweeking the code and getting it to work, but the closest i got was making one of them work in IE but not in FireFox.

I got tinyMCE to work with minor fixes :
First add the tinyMCE with all the properties you want to your aspx page. (not inside an UpdatePanel for now, recommended just some test temporary page)


For the editor to work in any case, you need to make sure you downloaded the js files, placed them in your project, and add some settings to your web.config. I just downloaded the .net sample from their site and copied the new settings.
Now, open the page in your browser, and view the pages html source.
You need to copy the javascript part that initializes the editor and place it into a string in your code-behind.


The highlighted text is what you need to copy to a string in your code...



Notice the last function call to ScriptManager.RegisterStartupScript which is how our javascript code is triggered when the UpdatePanel is updated.

I hope you can enjoy it as much as I do...

* This is not meant to be a commercial (by that I mean that im not getting sponsored in any way to publish this post :)

The other day I wanted to add one of those nice floating "Loading" panels for an ajax site I created. For some reason I didn't think it would be this easy...
All I did was add an UpdateProgress control, and to that I added an AlwaysVisibleControlExtender from the ajaxControlToolkit.



Then I wanted the background to become gray and give the screen the disabled look while loading. All I did was insert an invisible div tag into my UpdatePanel, and when the user triggered an update event for the update panel, I turned the div visiblity property to true.

The div's style :

Isn't it annoying when you need to enter a line of code above some other code, the intellisense opens, perhaps the parameter info tooltip too (all these you need, of course), but you also need to see the name of the variable you have in the line beneath but just can't because all these small windows are blocking it...

You end up with something like this :


Well, in VS2008, there's this cool feature allowing you to hold down the 'ctrl' key, and turning these small tooltips and windows into transparent!
I won't upload an image of how it looks, so just try it on your own...

On a web application I have, I used the GridView control and binded it to some data source. Since all the data needed to go through some process, I did all the binding through the code-behind. I needed to add a column of checkboxes and have that column editable to the user. More what, I wanted some server reaction when the user triggers the CheckChanged event for every checkbox.
I searched the net for some solutions, and found a lot, but all seemed too complicated and involved too much code. So after a little brainstorming I came up with a simple workaround of my own to this problem.

First, I have the GridView in the aspx page :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
</asp:GridView>

And I have some databinding in the code (in the Page_Load event) :

List<Gilly> listGilly = new List<Gilly>();
listGilly.Add(new Gilly("Gilly", true));
listGilly.Add(new Gilly("Barr", false));

GridView1.DataSource = listGilly;
GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);

BoundField bf = new BoundField();
bf.DataField = "Name";
bf.HeaderText = "Names";
GridView1.Columns.Add(bf);
BoundField chkbx = new BoundField();
bf.DataField = "Check";
bf.HeaderText = "Checked?";
GridView1.Columns.Add(chkbx);

GridView1.DataBind();

As you can see, I attached an EventHandler for the RowDataBound event of the GridView control. This is so I can add the checkbox manually to each row.

void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        CheckBox cb = new CheckBox();
        e.Row.Cells[1].Controls.Add(cb);
    }
}

Now all what we need is to attach an EventHandler to the checkbox controls and we're set…
Inside the GridView1_RowDataBound method I added :

cb.CheckedChanged += new EventHandler(cb_CheckedChanged);

Now we just need to add the method cb_CheckedChanged with whatever we want to happen, and that's it! …Almost...

There's no reason the checkbox will trigger this server side event, since nothing in the client tells it to do so. So we need to add the correct client event. You probably realized that every button with on OnClick server event you add, automatically has the __doPostBack javascript code in it. This redirects the application back to the server with a certain control ID to raise the event.

So how do we add this?
Simple…

cb.Attributes["onclick"] = Page.GetPostBackClientEvent(cb, "arg");

Instead of the "arg" string I passed, you can pass any argument you want, and then pick it up server side…

Have fun :)