Visual Studio Tips & Tricks 1- Re-register the controls in the .designer.cs file (recovering .designer.cs file)

Okay, I suppose all of you know what the .designer.cs file is, but I will shortly explain...

When you add a control to the page (via the markup editor), this control is also registered in the .designer.cs file, so you can have a reference to it in the code behind class (.cs).
So if you have a page Test.aspx, you will have a group of 3 files in it:

1. Test.aspx - this is the markup code, containing HTML and ASP markup, defining the control, css and so on.
2. Test.aspx.designer.cs - the designer file, where all controls are registered as a variables so you can reference them,
3. Test.aspx.cs - the code behind where you add your code. There you can use the controls, referencing them by the ID you gave them in the markup.
What happens behind the scene is that each runat="server" control is registered as a variable in the designer class like this:

protected global::System.Web.UI.WebControls.DetailsView dvMine

I recently did the following mistake - after added a lot of controls, then a lot of code, and a lot of changes to other files, I accidently got the latest version of the designer file (from the source control) of one of my aspx pages. This way I was having the controls markup, but the control registrations were lost. I wasn't able to CTRL + Z until I got my things back as I had already closed / opened the Visual Studio few times.

As a result When I hit F5 to start in debug mode, I got about 20 compilation errors, stating that I am referencing objects that don't exist.
I didn't want to re-register those controls manually in the .designer.cs, neither to delete them in the markup and re-create them (thus registration in the .designer.cs file will be automatically created).

I was wondering what to do, so I finally got the idea. I hit CTRL + K + D (which should reformat your markup) and the missing controls were auto re-created in the .designer.cs file.

Hope this helps someone out there.

Nice tool to help you build IE ready sites

I found accidently this tool:



It can help you make your site run smoother under all versions of IE.
It's name is DebugBar go to the official site here.

MindFusion Diagramming Trick 1 - Create transparent brush

As I wasn't able to find a way to create a transparent brush for the mindfusion diagrams, I thought this may be helpful for someone struggling to do the same thing.
Here is a code you can use in the code behind to create a transparent brush (in the following example I am setting the brushes for all tables to be transparent).

Here is the magic line:

DiagramView1.Diagram.TableBrush = DiagramView1.Diagram.ScriptHelper.CreateSolidBrush(System.Drawing.Color.Transparent.A, System.Drawing.Color.Transparent.R, System.Drawing.Color.Transparent.G, System.Drawing.Color.Transparent.B);

(it is kind of long but I think you will get the idea - i tought if I assign the Transparent color properties in the brush constructor, it may produce a transparent brush for me).

Note: this is for the code behind, not in JavaScript, but I think there is a way to do the same thing with JavaScript.

I think the System.Drawing.Color.Transparent.A is the field that makes the magic, this field carries the alpha channel value.

MindFusion diagramming Part 5 - Changing pen colors with JavaScript (ClientMode)

In order to change the pen (borders) of a shape you first need to instantiate a pen class.
It is in the com.mindfusion.diagramming namespace (Java class).

So you need to do the following:


var pen = new Packages.com.mindfusion.diagramming.Pen();


Now, to set the color of the pen we need a java.awt.Color instance. Luckily there are static properties which will return a color instance for the most used colors. See what I mean:

var blackColor = Packages.java.awt.Color.black;
var greenColor = Packages.java.awt.Color.green;

Now, to set the pen color to the color we will use setColor() method:

pen.setColor(Packages.java.awt.Color.green);

To set the width to be 1 pixel we need to use the floating point 0.1, not 1:

pen.setWidth(0.1);

Here is the function return a pen with 1 px border and green color:
function getGreenPen()
{
var pen = new Packages.com.mindfusion.diagramming.Pen();
pen.setWidth(0.1);
pen.setColor(Packages.java.awt.Color.green);
return pen;
}

You can now use an instance of a shape and set its pen. For example, you can use the OnNodeActivatedScript and add the following function:

function onNodeActivated(diagram, args)
{
var node = args.getNode();
node.setPen(getGreenPen());
}


Hope it helps a bit.

Instantiate Java class in JavaScript

I know I am mostly writing about C# and .NET and so on and you may wonder way do I write about java but I found this interesting and useful even in .NET projects.
I was playing with the mindfusion diagram latelly (you can check my posts under the Mind Fusion Diagramming in the blog categories) and found myself in a situation where I needed to instantiate a class from the mindfusion package (i think it was table cell but this doesn't matter right now).

So in order to instantiate Java class in JavaScript you may do this from the Packages object.
For example if you have a class like:
java.MyClass

you can instantiate it this way in javascript:

var myClass = Packages.java.MyClass();

Let's suppose the class has Name property, you can call it like this:

alert(myClass.Name); // If the class has a property "Name", call it ...

Hope this helps somebody out there...
So long and thanks for al the fish ;)

NOTE : I haven't tested this under browsers other than Internet Explorer 7. Hopefully it will work ...

Operation could not be completed message when trying to open Linq to SQL (dbml) designer

That was really strange.

The annoying Operation could not be completed error message appeared each time I tried to open the dbml designer.

I did some search and found that I need to start the Visual Studio 2008 Command prompt and type the following command:

devenv/resetskippgs

But this didn't helped a lot. The annoying message was still appearing.
Then I found something which made me laugh. It was so unexpected...
If you had the same problem and the devenv/resetskippgs couldn't resolve it, try going to Control Panel -> Administrative Tools -> Event Viewer.
Select the Application node and right click it. Then delete all events.

This would hopefully resolve your problem.

Funny isn't it?

To shim or not to shim, or why telerik radContextMenu will not show over applet in FireFox?

It was a nightmare last night.
I have a Java applet in my pages and needed to display telerik context menu over it when the user right clicks it. So far so good, the component had nice JS events to attach to. I was able to atach to its Click event, find the telerik radContextMenu and call it's showAt(x, y) method. It worked like a charm. I was very happy to have done this in less than 20 minutes as I know mixing different technologies often cause headaches.
I started the project in IE 8, worked just as expected ...
... until I run it in FireFox to see how it looks there.

The telerik radContextMenu wasn't displaying. It take me about an hour to understand that it is displaying but under the Applet DOM object (an hour is relatively fast for me ;). No problems, I will kick some z-indexes and everything will be just fine.
This didn't worked either. So I googled. And google told me what I consider one of the worst news a developer can read - the Applet object is something like the browse button - it exist there and only there and only the way it is and the way the browser developers decided. Or in other words - it will be on top of everything no matter what z-Index will you put there ...
I decided to search for some hacks to apply. And guess what? I found. And guess what the hack is? (it is known as "shim IFrame" or "Shim" or "IFrame shim" not quite sure)
1. You add an IFrame the size of the div you will display over the applet, the IFrame is the only element which respects the z-Index style ...
2. Then you put a div with greater z-Index over the IFrame and this DOM mess should fly ...

Do I look kind of angry? That's ok, because I want to look like I am angry, because I am ...

3-4 hours and still couldn't make it work. I suppose this may have something to do with the layout of my page. When I have some spare time I will try to fix this thing.
One more time - this works perfectly in IE ...
And one more time - it is not Telerik fault too ...

MindFusion diagramming Part 4 - Cancel link creation between specific kinds of shapes

You can check between what kind of shapes the link is created and remove it if you need to do so. I will give you an example on how to cancel the connection between Actor and Actor shapes.

First - add LinkCreatedScript to your diagram and make it point a JavaScript function, here is mine declaration:

     <ndiag:DiagramView ID="diagramView" runat="server" Style="left: 0px; width: 800px;
        position: absolute; top: 0px; height: 505px" Behavior="DrawControls" BackColor="White"
        AllowInplaceEdit="true" LinkCreatedScript="onLinkCreated" />

Now add the onLinkCreated function in the page head :

   <script type="text/javascript">
     function onLinkCreated(diagram, args) {
        var link = args.getLink();
        var shapeOrigin = link.getOrigin().getShape();
        var shapeDestination = link.getDestination().getShape();
        if (shapeDestination.getDisplayName() == 'Actor' && shapeOrigin.getDisplayName() == 'Actor') {
           diagram.getLinks().remove(link);
           alert('Cannot crate link between ' + shapeOrigin.getDisplayName() + ' and ' + shapeDestination.getDisplayName());
        }
     }
   </script>

1. What we did is - we get the link that was just created from the args.
2. We get the Origin and Destination shapes from the link.
3. We then checked their display names and verify they are Actor and Actor.
4. We asked the diagarm object to remove a link, to be more specific - our link, the one that was just created.


I think there may be more elegant ways to achieve this, but currently this is the only I could think of.
Hope it helps somebody out there ...

MindFusion diagramming Part 3 - adding Overview control to the form.

Here is the third part of the tutorial.
Adding overview isn't realy a big deal. You only need to add the following markup in your page (the solution we created in the previous two samples):

<ndiag:Overview Style="position:absolute; top: 320px; height: 180px; left:810px; width:160px;" runat="server" DiagramViewID="diagramView" />

The thing you need to obey here is to give the diagram overview control a correct DiagramViewID property, which should be the ID of the DiagramView control you have on your form.

Here is what we have so far (the tree tutorials combined):

MindFusion diagramming Part 2 - adding shapes list

In the previous example, I show you how to add simple diagram to your web forms. Now I am going to show you how to add a simple shapes list, containing all the shapes that comes with the MindFusion product.

It is very simple, actually, only 1-2 lines of markup:

<ndiag:ShapeListBox ID="shapeList" runat="server" Style="left: 810px; width: 160px; position: absolute; top: 1px; height: 320px; background-color: white" />

This should be added to the code you built in the previous example : http://donchevp.blogspot.com/2009/04/mindfusion-diagramming-part-1-adding.html.

Let's see what we got now:

MindFusion diagramming Part 1 - adding simple diagram to the form.

We worked quite a bit with this product and I must say it is a good one.
It can be used to easilly draw diagrams. It has a lot of built-in shapes and a designer to draw new one.
Let's add a digaram on the form.
First of all, download the product from here : http://mindfusion.eu/download-netdiagram.html and install them.
Add the following lines to your web.config:

In page / controls section, add the following:
<add tagPrefix="ndiag" namespace="MindFusion.Diagramming.WebForms" assembly="MindFusion.Diagramming.WebForms"/>

Then add reference to :
MindFusion.Common
MindFusion.Diagramming
MindFusion.Diagramming.WebForms

Open your page and add the following markup to create a diagram:

<ndiag:DiagramView ID="diagramView" runat="server" Style="left: 0px; width: 800px;
position: absolute; top: 0px; height: 505px" Behavior="DrawControls" BackColor="White" AllowInplaceEdit="true" />

I added few additional properties to decorate and set behaviours. We will discuss them later. I also allowed InplaceEdit, which means that when you double click on a shape, you will be able to edit the text.
Finally, copy the JDiagram.jar into your root directory (you can place it in a directory of your choice, but you will need to set the JarLocation property to point to this file.

Let's see what we did so far:





Pretty nice for 1 minute of work, huh?
There is more ;). This product seems to come from Bulgaria, so there will be no problem with it :).

Make telerik controls work with IE 8

A friend of mine told me she has problems running telerik controls under Internet Explorer 8. I recalled reading somewhere there is a tag you need to add to your page in order to force IE 8 behave like IE 7 (where telerik controls work great), I did some search and here is the tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Add it to your pages head section and you should be ok with telerik controls.

Edit: as Veskoni commented out, telerik controls are fully compaitable with IE 8 since Q1 2009 SP1, so it will be a lot better to upgrade to that version (or above).

Using JavaScript functions over a string in C#.

I needed to find a way to invoke the real escape / unescape javascript function over a string in C#.
It appeared to be easy to do so by using the Microsoft.JScript namespace classes.

Add a reference to it and then you can simply do something like this:

string escaped = Microsoft.JScript.GlobalObject.escape("This will be JS escaped for sure!");

"escaped" variable will then have the value of :

This%20will%20be%20JS%20escaped%20for%20sure%21

I am still very new to this namespace, there were a lot of things to find out there ...

Check it out. It may appear to be very useful for those of you who are processing JS on-the-fly...

ASP.NET PRO readers choice awards

You can vote for ASP.NET readers choice awards here:

http://www.aspnetpro.com/awards/default.asp

give a hand to your favorite components, controls, utilities, editors and so on!

Nice UML Diagram

Here is a very nice and informative UML diagram I created while I was bored ;)






Just kidding :)

Removing the left "placeholders" in telerik radMenu (where the images should be)

I needed to remove this placeholder as our menu was without icons. First I thought it is impossible, but then I found very helpful thread in telerik forums.
It says you need to apply the following CSS to your form:

.RadMenu_[SkinName] .rmGroup .rmLink
{  
   padding-left: 0px !important;  
}  
    
.RadMenu_[SkinName] .rmGroup .rmLink .rmText
{
   padding-left: 5px !important;  
}  
.RadMenu_[SkinName] .rmGroup
{
   border: 1px solid #979797 !important;  
   background: #f0f0f0 !important;
}

Where [SkinName] stands for the skin of the menu.


By the way - it happens this to be my post #100! ;). Hope I helped someone with all my posts :).

Read various elements from the connection string.

I saw a question in ASP.NET forums. There was a guy asking how to extract the Username and Password from a connection string, stored in the web.config.

I recalled doing something like this but was not able to recall which class I used.

After about a day another guy posted an answer on this question - the class was SqlConnectionStringBuilder. You can use this class to easilly manage SqlConnection string properties such as DataSource, Username, Password etc.

Here is my post on how to get a connection string from the web.config:
Read connection string from web.config

Here is some more info about SqlConnectionStringBuilder from MSDN:
SqlConnectionStringBuilder class

Combining both resources will help you manage your connection strings easilly.

Read the connection string from the web.config file

Here is this code, it is replicated bilions of time in Internet, yet I fill obliged to paste it here...

This is the first way, which I took from Microsoft.
It checks if there is a connection strings section, then it checks if the count of connection strings is more than zero:

        System.Configuration.Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("/MyWebSiteRoot");
        System.Configuration.ConnectionStringSettings connString;
        if (0 < rootWebConfig.ConnectionStrings.ConnectionStrings.Count)
        {
           connString =
             rootWebConfig.ConnectionStrings.ConnectionStrings["MyConnectionString"];
           if (null != connString)
           {
             // Do something with the string, for example - create SqlConnection object:
             SqlConnection con = new SqlConnection(rootWebConfig.ConnectionStrings.ConnectionStrings["MyConnectionString"].ConnectionString);
           }
        }


This one is the short line (no checks if anything fails, after all if you don't have a connection string in 99% of the scenarios you will want to have exception rised).

string cString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["mine"].ConnectionString;

Fixing sup - sub for radEditor example

I made few posts on telerik radEdit. There was something I considered a small issue. Which actually may appear not to be issue, but to me it was.
So i decided to get a bit more familiar with the telerik radEdit client side scripting API (thanks to Tervel for his valuable comments).
So the problem for me was that if you type normal text, then click on the sub icon to make index and then click on the sup to raise to the power of something, the result was a text on the same level as the normal text.

Digging a bit in the client API of radEdit I found that you can obtain the editor undo manager. You can also fire commands so the problem should be easy to fix (I should mention here that I am really happy with the architecture of radEditor, it has everything a developer may need in order to extend the control to fit his / her needs.

Ok, now to the problem. I thought all I need to do is to make radEdit check if a sup is selected when you click sub and switch it off if so. Same thing should happen for sub. Luckily radEdit has client side event handler OnClientCommandExecuting which is rised prior command execution. So you will need an event handler like this:

OnClientCommandExecuting="cmdPreExec"

Having the eventhandler attached, you need to write a function to check if the user clicks either sup or sub. Then to check if the other command was recently fired, if so - it will fire it again to switch it off. Here are the functions:

     function cmdPreExec(editor, args) {
        var strCommand = getLastCommandReal(editor);
        if (strCommand) {
           cmd = args.get_commandName();
           if (cmd == "Superscript") {
             if (strCommand == "Subscript") {
                editor.fire("Subscript");
             }
           }
           if (cmd == "Subscript") {
             if (strCommand == "Superscript") {
                editor.fire("Superscript");
             }
           }
        }
     }

     function getLastCommandReal(editor) {
        var manager = editor.get_commandsManager();
        var commands = manager.get_commands();
        var lastCommand = null;
        
        if (!commands) {
           return null;
        }
        else {
           for (i = commands.length - 1; i > -1; i--) {
             if (!commands[i]) {
                return null;
             }
             if (commands[i]._title != "Typing...") {
                return commands[i]._title;
             }
           }
        }
     }

The second function is to get the last command name from the undo manager, excluding the "Typing..." which is also registered there.
Please note that I see some potential problems which I haven't considered yet, you may have some side effects.
This post is more to show you how to work with some of the client side objects / events and methods than to use in real life.

Actually I am 99.99999 % sure there will be a problem with this code ;). This code was written in abouth 15 - 20 minutes so there should be a bug for sure. I can think of at least two bugs ;).

Here is a video on how this code performs for me:

tinyMCE has the sup - sub issue too

Just to inform you that tinyMCE cannot handle the sup / sub correctly also.

Here is a video: