Having column display name in RadGrid Column chooser but not in the header of the grid

A little bit of background for this one.

I had a Telerik RadGrid that was having few columns ...

It had the column chooser enabled. Few of the columns were icons (for example “Answered”, “Rating”).

I wanted to have them without header text so I added the Template column and everything was just fine.

Until I right clicked on the header in order to show the column chooser. It was displaying the columns with auto generated names like “GridTemplateColumn7”, “GridTemplateColumn10”.

My goal was to keep the header of the grid clean (e.g. no label) because the icons were 16x16 and that’s all the space I needed to occupy with those columns, having a header “Answered” would extend the entire column. So to solve this case here is what I did:

Solution:

1. Added header text to the column and saw that the header text is appearing in the column chooser.

2. To hide it from the header of the column I added an empty <HeaderTemplae>.

The column should look like this:

<telerik:GridTemplateColumn HeaderText="Bookmark">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
    </ItemTemplate>
</telerik:GridTemplateColumn>

 

This would solve the problem for Template columns (and all column types that allow you to define HeaderTemplate). This will not work for GridBoundColumn for example as this type doesn’t have HeaderTemplate.

 

Hope this helps someone out there …

Rad Ajax controls Q3 2010 is now live!

Just a quick post to let you know that you can download and play with the Q3 2010 version of Telerik's Asp.Net AJAX controls.

What's new:
1. RadTreeList, a control that is hybrid, combining treeview and a list view.
2. RadButton - inherits the functionality of LinkButton, Button and ImageButton and ads more such as the abillity to combine text and image, toggle modes and more. Combined with rich client side API.
3. RadCalendar now has long anticipated feature - the range selection will allow you to select date ranges.
4. Multi month view with postback enabled.


And many more.
Visit Stefan Rahnev's blogpost or the Telerik Labs for more details on the beta.

Q2 2010 is comming!

Telerik RadControls for Asp.Net Ajax and



Telerik Extensions for ASP.NET MVC are released.


See this post for more information on the cool new things included!


Enjoy!

First day at Telerik

Just to update you that tomorrow is my first day at Telerik.
Wish me luck!

W3C Zoom CSS property. I really want this feature included!!!

Lot's of people are discussing this.
And the designers are often saying something like:
"I cannot imagine a scenario where you will need to use the Zoom CSS property."
To the readers that haven't yet hit this problem - the CSS Zoom property seems to be proprietary and to be working for IE (I think version 6 and above).

To all those designers - there ARE scenarios where you will want to let the user zoom everything proportionally without using the browser buttons / sliders / shortcuts, but with CSS / JS only.
I will give you few examples:

1. I needed to create an overview control of page. It should represent the page in a smaller percentage and, upon scroll, the page should scroll proportinally. I can have a div with the same DOM tree (or even an IFrame loading the same page or something). In this case I URGENTLY need the CSS Zoom property.
2. Telerik radReporting - the ReportViewer has a dropdown to let the user choose a zoom level to preview the page (web based and not after clicking print preview or something). Actually the Print Preview browser command isn't an option as the report viewer may be on the page with other controls and the user SHOULD BE ABLE to zoom in and out only the portion of the page where the report is (it is an IFrame with the data rendered as HTML, I believe). In telerik case - there seems to be some browser detection and when the browser isn't capable of zooming in / out - the dropdown with the zooming levels is simply hidden (they have no other choice unfortunatelly and I support them for this decision).

Now, as you may expect - in my scenario I cannot simply hide the overview control as the page heavilly depends on it.
Should I now have my revenge now? I've seen all those messages accross the web telling you that there are better browsers to use than IE.
Should I now display a message like:
"Sorry, your browser isn't capable of zooming in and out, only IE supports this, so please switch to IE."

I really hate those browser wars and if you really want to know my opinion - yes, IE may be harder to design. It may be messing up the containers, it may not be passing the ACID N test.
But it is the only browser that is suitable for my scenario (at least from my search in IE all the posts were following the same line - "zoom is IE proprietary, it won't work under other browsers").
Why are all other browsers sleeping then?


P.S. I have found something like -moz-zoom or something but wasn't able to make it work under FireFox (if it works under Firefox it should also probably work under Google Chrome as they are using the same engine I think).
P.P.S. - haven't tested but I think the zoom CSS property should also be available under Opera as they (as far as I know) use the IE core.

P.P.P.S - if anyone know how can we ask W3C to reconsider this for at least the next revision of CSS I would be glad to give my vote. I also advice telerik to do the same. Not only the reporting will work in all browsers but they may be able to do some other great controls using this property.

Really annoying ...

Insignifficant inconvience in telerik radReports

This one is not a big deal but it would be good if there is a workaround.
When you create a new report and choose to create a new datasouce (Database in my case) - the classes will be created in the project root and not where the report is created.
I tried to find some option or something in order to be able to place the datasource in a different folder in my project but with no luck. The datasource was always created in the root of the project.
Here comes the Microsoft part - when you then try to move the classes in another folder (by dragging them in the solution explorer), Visual Studio seems to mess up the namespaces (although I am 99% sure I have moved classes accross the project and the result was I need to manually change the class namespace in order to reflect its path - for example I have been able to move classes from the root folder of the project to let's say a folder named Helpers and I needed to manually change the namespace from ProjectName.SomeClass to ProjectName.Helpers.SomeClass), just can't get it.

It may ofcourse be some of the endless options in the Visual Studio not checked :)
It's kind of pain when you have a large project and want to separate different files according to their role in the project.

radTextBox - get the client ID of the TextBox ...

As the radTextBox should be changing its behaviour depending on the mode in which the developer put it. It doesn't return the ID of the TextBox (I mean the input type="text" id) when you call something like:

rtb.ClientID.

So if you have a radTextBox with the name of

rtbName

You will need to say:

string.Format("{0}_text", rtbName.ClientID);

At least I couldn't find a property to return this information for me.
You can also write a simple extension to do the work for you. Something like:


public static string GetTextBoxID(this RadTextBox rtb)
{
return string.Format("{0}_text", rtb.ClientID);
}

So you can then call it like:

rtb.GetTextBoxID();

Hope it helps ...

telerik radReporting, am I missing something?

I was playing with the radReporting tool. I had a datasource with 1 master item, which has about 2500 child data items.
I was trying to generate a master / detail report with the telerik radReporting.

Here is what I have so far.
First of all - using their videos is a great help. I had everything I needed in order to start.
Second - the designer is really great. I am not designer and it really pisses me off when I had to do any kind of design but with the deep Visual Studio integration and all those little yellow overlap indicators even a guy like me can do the report design.

But then the ultimate test came - the speed.
I want to clarify that I am in the begining and I am more like rookie in the telerik reporting and the reporting at all so it may be my mistake and not their. But I did follow a video to show me how to do the master / details report and I feel I did everything as it was on the video so I was expecting some performance.

Unfortunatelly with the configuration above - 1 master item and about 2500 detail items I had to wait about 5-6 minutes for the report being generated as HTML in the report viewer.
It's OK, I can live with that. There is a lot of data, their matrixes are complex and it takes time to do all the calculations. So 5-6 minutes are OK. Then I selected Rich Text format from the export type dropdown to export my report to an RTF. I was expecting it to pass with the same speed or a bit slower but it took about 25 minutes to load. And sometimes the system was going in out of memory exception...

I wrote my own RTF epxort, which wasn't using telerik radReporting designer but some generations I did instead. I was the one to care about the overall layout. And guess what?
With the remakrs made above (that I need to manually create a class for the report and do the matrixes my way) it took about 10 - 15 SECONDS to load the report. This is about 150 TIMES faster.
When I managed to get a report from the telerik radReportViewer (I needed few tries until the server was in a good enough mood to provide me with one :) it was about 10 MB, while mine which is minimized and set up for just that layout was about 1 MB.

Again - I don't blame telerik as I am not quite sure if I did everything right when I was generating the reports with their designer. I am just learning how to walk in the field of reporting so I may be missing way too much things.
I can only check that my data is comming in 2-3 seconds (so it is not a slow DB issue I guess).
If I am right I may be having an idea that may be considered by them to speed up the performance. I am also now looking if I can connect to some event or override some method that will let me inject my reporting solution instead using their.
If I find a way to do this I will write another post.
If not - I will use telerik radReporting only to open the HTML report in the report viewer and replace the RTF generation with mine so the user can be happy.


Anyone who has some remarks / ideas / help is welcome to comment this post.

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.

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.

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

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

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

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: