Telerik Style Builder

It is available, yes.
You can test it on the following address:

Telerik Style Builder



I think this is a great service, that will help the collaboration between designers and developers a lot.
Currently only few of the controls have the fine tune interface implemented but I think it is a very good start.

radGrid - check if there was a row selected, before selecting another one [2]

The previous post on this topic was about pointing some solution, which doesn't always work.
I think I was able to identify the problem for this issue.

It is becasue the chain of events is the following when you select a new row:

1. RowDeselected.
2. RowSelecting.
3. RowClick.
3. RowSelected.

I am not quite able to find the logic here.
I think in normal english I should be able to say:

"I am clicking on a row."
"I am in a process of selecting a row." (if not canceled)
"I am deselecting the old row."
"I have selected the new row."

At least the RowClick in my opinion should be fired prior the events described above as it occurs before everything else. You are initiating the above chain of events by clicking on a row so all of them should follow in my opinion.

To me the fact that RowDeselected is before RowSelecting is not such a bad solution. I just can't get why the RowClick is between RowSelecting and RowSelected events.

Any clues?

radGrid - check if there was a row selected, before selecting another one.

Okay, we had the radGrid with AllowMultiRowSelection property turned off.
But we needed to check if there is already a selection in the grid (on the client side), then get the item and do some calculations.

So far so good.
But it appeared that it is very difficult to get the previous item selected in a grid when selecting a new one.

The OnRowSelected event as you may suspect is raised too late in order to get this information as the selection is already changed.
So I thought the OnRowSelecting event will be the best time to perform this.

Guess what? It wasn't. At least for me.
Each time I checked the

sender.MasterTableView.get_selectedItems().length > 0

The statement evaluated to false (which means to me that when the OnRowSelecting event is raised AFTER the selection is Clear()).

So I found a workaround to help myself persist the previous selected item of the grid:

var lastRow = null;

function RowDeselected(sender, eventArgs) {
lastRow = sender;
}

function RowSelecting(sender, eventArgs) {
if (lastRow) {
     // There was a selection before we try to select. Do whatever you need here.
}
     else {
     // There wasn't any selected item, this is the first one.
     }
}

To me it seems that problems may arise. I will test some more to see for side effects and will report back.


Any comments are appreciated.

telerik radGrid - be careful with the virtual scrolling under Firefox

Again some issues under Firefox.
We have found a great example of how to populate on demand a radGrid (when scrolling grid scrollbar down to the end it will make ajaxRequest and ask for some more items to fill in the grid with).

We loved this feature and decided to incorporate it into one of our projects.
Unfortunatelly I discovered it won't work pretty well under the FireFox browser.
Let me briefly explain what does the code and then what is the problem, then I will suggest a simple fix.

Here is the demo:
http://www.telerik.com/help/aspnet-ajax/grdvirtualscrollpaging.html

Now, it shows you how to request the items and then reload the grid. So far everything works perfect.
If you however reach the end of the grid items (meaning you are at the last page, or the page count is 1), when you pull the scrollbar down to the bottom, firefox will execute the function which should pull some more records.
Then it will append them and.
So far everything is great!
But it will then magically decide to fire the OnScroll event once again, it will not pull any more records as you already have them in the grid.
And then it will append them.
Then it will again fire the OnScroll event ....
... then it will again fire the OnScroll event ...


Hm, sounds like endless trips to the server and back. That's what happened when we tested.

Now here is the code we had to achieve this:

<ClientEvents OnScroll="HandleScrolling" />

And here is the JS HandleScrolling function:

function HandleScrolling(sender, eventArgs) {
if (eventArgs.get_isOnBottom()) {
$find("<%= RadAjaxManager.GetCurrent(this.Page).ClientID %>").ajaxRequest(sender.get_masterTableView().get_name());
}
}

Now to be hones - I never have even dream of achieving such functionality with 4 lines of code. Kudos to telerik team for architecting the controls this way.
The fix to this issue also bring another feature ;) (not bad but good) - you will not need to go to the server when you already have all the records in your radGrid.

Here is the fixed version of the HandleScrolling javascript function:

function HandleScrolling(sender, eventArgs) {
if (eventArgs.get_isOnBottom() && sender.get_masterTableView().PageCount > 1) {
$find("<%= RadAjaxManager.GetCurrent(this.Page).ClientID %>").ajaxRequest(sender.get_masterTableView().get_name());
}
}

Did you spot the difference?
All i did was to add logical "and" operator to check if the masterTableView page is only one (which means that we don't have anything on the server which should be loaded on the client) and voilla!


Hope this helps someone!

Firefox with Plugins may lead to some problems with telerik controls

I had an issue with the telerik radTabStrip control.
It wouldn't switch the tabs. In some cases you are only able to navigate between the first and the last tab, in some cases you may not be able to change tabs at all.

I was very surprised as telerik is famous for supporting cross browser functionality for all the controls.
I thought the problem may be in my TV but wasn't able to find anything.
A collegue of mine also had some problems using firefox full of plugins with the telerik controls but we never thought the problem may be in the plugins.

In my case the problem was in Interclue add-on used to preload a page for you (when you point a link, the plug in will give you a screenshot of the page that stands behind the link).


So if you ever have problems using telerik controls under FF - please check your plugins first.

Some casing problems I experienced.

As far as I understand, the settings for the code format are in the following Visual Studio menu:

Tools -> Options ->Text Editor

There you have the ability to change things.
I was having some problems reguarding the way my markup is formatted (few of the tags are made lowercase when I hit CTRL + K + D (format whole document)).
So I think the settings for this should be under the HTML -> Format, or the whole path for the menu should be :

Tools -> Options ->Text Editor -> HTML -> Format

I then checked the "Server Tag:" dropdown. It says "Assembly definition", the other options are "As entered", "Lowercase", "Uppercase" but I don't like them :).
Now the issue comes when I have a radGrid with <ClientSettings> or <PagerStyle> sections. To me they must be in Pascal notation (as all other sections and properties), but when I hit CTRL + K + D they are re-formatted to be lowercase.
The issues may be in
1. The telerik assembly itself.
2. Some AddIn conflicts.

It is not a big issue, just decided to share with you.
Please share your thoughts if you faced such issues.

5 minutes C# - get windows special folders path

Just a two lines of code in order to retrieve the path to a special folder of your choice (My Documents, ApplicationData etc):

string strAppData = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData);
DirectoryInfo diMyDocuments = new DirectoryInfo(strAppData);

Here is the Environment.SpecialFolder Enum:

Environment.SpecialFolder.ApplicationData - the data which some applications store about the current user (mostly used for personalized settings), this is for roaming users.
Environment.SpecialFolder.CommonApplicationData - Application data which is common for all users.
Environment.SpecialFolder.CommonProgramFiles - "The directory for components that are shared across applications"
Environment.SpecialFolder.Cookies - The folder where the user cookies are stored.
Environment.SpecialFolder.Desktop - The logical desktop.
Environment.SpecialFolder.DesktopDirectory - this is the directory which is used to store file objects on the desktop.
Environment.SpecialFolder.Favorites - Current user favorite items.
Environment.SpecialFolder.History - Current user Internet History.
Environment.SpecialFolder.InternetCache - Internet cached files.
Environment.SpecialFolder.LocalApplicationData - As the first one but for non-roaming users.
Environment.SpecialFolder.MyComputer - I'll let you figure this out ...
Environment.SpecialFolder.MyDocuments - I'll let you figure this out too ...
Environment.SpecialFolder.MyMusic - ... and this one ...
Environment.SpecialFolder.MyPictures - ... and this one ...
Environment.SpecialFolder.Personal - this one is more important, this directory is used as a repository for documents...
Environment.SpecialFolder.ProgramFiles - this one is clear, I believe
Environment.SpecialFolder.Programs - Contains user program groups.
Environment.SpecialFolder.Recent - Users most recently used documetns.
Environment.SpecialFolder.SendTo - This directory is used for the Send To > item in the context menu. By adding folders here, they will appear in the Send To -> item when you click on a file or folder.
Environment.SpecialFolder.StartMenu - Contains the Start Menu items.
Environment.SpecialFolder.Startup - The Startup group (Start Menu -> All Programs -> Startup).
Environment.SpecialFolder.System - The system directory (%Windir%\System32)
Environment.SpecialFolder.Templates - Document templates repository.


Hope I helped a bit.
Have a great coding.

telerik radGrid - select a row without using select links / buttons and allow it to postback

I was in a need to enable the user to select a row by clicking on it (not by clicking on some Select link or image or button).
I also wanted this click to postback so I can do some processing on the server side.

It is not so hard to achieve, but I was puzzled for quite a while so I decided to share it.

In order to allow the grid to select a row by clicking on the row, you need to add the ClientSettings to the radGrid and configure the following:

<ClientSettings EnablePostBackOnRowClick="true">
<Selecting AllowRowSelect="true" />
</ClientSettings>

AllowRowSelect is the property to enable / disable row selection.
EnablePostBackOnRowClick will tell the grid to post back on row selection. It is really strightforward when you think of it, but checking so much properties / section to find out if the radGrid has the one you need is annoying sometimes.

Anyway, I am glad that the radGrid has this functionality built-in.

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).