[Solved] 'style.getPropertyValue' is null or not an object

[Ahmet Özgür]

Hi,
I have a Radmenu which has an item template inside it. I am using onmouseover and onmouseout events inside the radmenu.
Here is the error which internex explorer gives. (the error occurs if i fastly mouve the mouse over the items)

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.30729; FDM; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.0.30729)
Timestamp: Thu, 27 Aug 2009 14:19:42 UTC


Message: 'style.getPropertyValue' is null or not an object
Line: 176
Char: 1
Code: 0
URI: http://www.arkadas.com.tr/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0d787d5c-3903-4814-ad72-296cea810318%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.1.311.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3af48f6488-574a-46fe-9b15-624f013d8c03%3a16e4e7cd%3a874f8ea2%3af7645509%3a24ee1bba%3a19620875%3a33108d14%3abd8f85e4%3ae330518b%3a1e771326%3ac8618e41

 Below is my RadMenu.

<telerik:RadMenu Width="150px" DataFieldID="OID" DataValueField="OID"
    DataTextField="Name" ID="MenuCategories" runat="server"
    DataSourceID="DataSourceMenu"
    AppendDataBoundItems="False" DefaultGroupSettings-Flow="Vertical"
    Flow="Vertical" Skin="MyDefaultLeft" EnableEmbeddedSkins="false"
    ondatabound="MenuCategories_DataBound" DataFieldParentID="OIDParent"
    MaxDataBindDepth="2" EnableAutoScroll="True">
      <ItemTemplate>
        <table width="140px">
            <tr>
                <td id="td" runat="server" onmouseover='<%#Open(Eval("OID"))%>' onmouseout='<%#Close(Eval("OID"))%>'>
                    <asp:LinkButton ID="linkButton" Font-Underline="false" OnClick="linkButton_Click" CommandArgument='<%#Eval("OID") %>' runat="server" Text='<%#Eval("Name")%>'></asp:LinkButton>
                </td>
            </tr>
        </table>
      </ItemTemplate>
</telerik:RadMenu>

Here is my code for "Open" and "Close"

public string Open(object o)
        {
            string ret = "";

            if (!Categories.Exists(x => x.OIDParent == new Guid(o.ToString())))
            {
                ret = string.Format( "newwindow=window.radopen('../PageReproductionDetails.aspx?oid={0}',null);" , o.ToString() ) + "newwindow.moveTo(520,300);";
            }
            return ret;

        }

public string Close(object o)
        {
            string ret = "";
            if (!Categories.Exists(x => x.OIDParent == new Guid(o.ToString())))
                ret = "newwindow.close();";
            return ret;
        }

I could not find any solutions.

Regards.

[Kamen Bundev]

Hi Ahmet,

You're opening a RadWindow on mouseover and closing it on mouseout. One possible problem is that RadWindow can't initialize fast enough for all those events. Why do you need to open a RadWindow on every mouseover?

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ahmet Özgür]

Hi,

I have list of painters on a rad menu. When users come over a name of a painter. I want to open a pop up and show some picture of the painter. When mouse goes over the item it will close the popup.

[Kamen Bundev]

Hi Ahmet Özgür,

Why don't you use item templates, it should be much faster? Check this example for more information about them:
http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx

Greetings,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ahmet Özgür]

I am also using an item template. But this is not an effective way for me. Because i have lots of painter (more thane 30). If i make the pictures load when the menu is created it will take a lot of time. I dont want the picture to be loaded at the first menu creating. I want it the be loaded on demand only. I mean only when the mouse is over the item. At the example you sent, as i understand, the picture of the items are loaded when the menu is created. Each picture at my system is nearly 10 kb. If i have 30 painter and 3 picture foreach painter ite meanse 90*10 kb. This will make it realy slow.

Can you please suggest another solution for me.

Regards.

[Kamen Bundev]

Hi Ahmet,

You can easily get around that with some javascript. First you need a menu with item templates and images with set width and height:
<telerik:RadMenu runat="server" ID="Menu" OnClientItemOpening="clientOpening">
    <Items>
        <telerik:RadMenuItem Text="Painter 1">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <img src="images/blank.gif" alt="images/footer_products.jpg" width="299" height="71" />
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Painter 2">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <img src="images/blank.gif" alt="images/footer_teams2.jpg" width="299" height="71" />
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Painter 1">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <img src="images/blank.gif" alt="images/favorites.jpg" width="299" height="71" />
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Painter 1">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <img src="images/blank.gif" alt="images/resources.jpg" width="299" height="71" />
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Painter 1">
            <Items>
                <telerik:RadMenuItem>
                    <ItemTemplate>
                        <img src="images/blank.gif" alt="images/teams.jpg" width="299" height="71" />
                    </ItemTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>
By default the images have a blank image set and the real image in the alt attribute (of course you can use defferent technique to store the real images locations). When we have the menu, we replace the images the first time the submenus are opened in the OnClientItemOpening event handler, like this:
function clientOpening (sender, args) {
    var $ = $telerik.$;
   
    var image = $('img', args.get_item().get_element())[0];
   
    if (image.src != image.alt)
        image.src = image.alt;
}

Let me know if this helps.

Best wishes,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ahmet Özgür]

As you can see at the Image of my menu, the area which a made a red circle is the last element of the menu. Here the menü has only two levels. But this is dynamic also. It can be 1-2-3. When the mouse comes over the item if check if it is the last item on the menu. When the situation is true a generate a pop up windows, i am sending some parameters to the popup windows. When the popup windows is create the first thing is looks is the parameters coming. According to the parameters it make an sql query to find the place of the images of the painter which the mouse is over. Lastly it generates the pictures.

At your example the menu is not dynamic it is static as i understand. Of course it can by made dymaic. But the problem is if there are more then 1 level. Like at my example.

Regards.

[Kamen Bundev]

Hello Ahmet,

Only a level check is needed to make the preload working only above 1st level:
function clientOpening (sender, args) {
    var $ = $telerik.$;
   
    if (args.get_item().get_level() >= 1) {
        var image = $('img', args.get_item().get_element())[0];
       
        if (image.src != image.alt)
            image.src = image.alt;
    }
}

The markup goes like this:
<telerik:RadMenu runat="server" ID="Menu" OnClientItemOpening="clientOpening">
    <Items>
        <telerik:RadMenuItem Text="Root 1">
            <Items>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/footer_products.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 2">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/footer_teams2.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/favorites.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/resources.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/teams.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Root 2">
            <Items>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/footer_products.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 2">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/footer_teams2.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/favorites.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/resources.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Painter 1">
                    <Items>
                        <telerik:RadMenuItem>
                            <ItemTemplate>
                                <img src="images/bullet.gif" alt="images/teams.jpg" width="299" height="71" />
                            </ItemTemplate>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Let me know how it goes.

Best wishes,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.