Loading images into PanelBar on page load

[Justyn Hunter]

I have a page where I am using a RadPanelBar as a menu.

I want to kick off an ajax process when a page loads that does some database work and then changes an image on each item in the panelbar according to the results.

So far I have:

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        function pageLoad(sender, eventArgs) {
            if (!eventArgs.get_isPartialLoad()) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialLoad");
            }
        }
    </script>
</telerik:RadCodeBlock>

Which successfully kicks off my process when the page loads, so I'm good there.

The problem is that the images in the PanelBar never change.

My RadAjaxManager looks like so:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        onajaxrequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pbMenu">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pbMenu" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

and the work code looks like:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e) {
            if (e.Argument == "InitialLoad") {
                RunLoadSim(pbMenu.Items);
            }
        }

        private void RunLoadSim(RadPanelItemCollection items) {
            foreach (RadPanelItem i in items) {
                i.ImageUrl = "~/images/menublocks/grey.png";
                RunLoadSim(i.Items);

                var start = new ParameterizedThreadStart(Sim);
                var thread = new Thread(start);
                thread.Start(i);
            }
        }

        private static void Sim(object arg) {
            var r = new Random();
            var i = r.Next(200, 5000);
            Thread.Sleep(i);

            var green = r.Next(0, 2) == 0;

            var imgUrl = green ? "green" : "red";
            ((RadPanelItem) arg).ImageUrl = "~/Images/MenuBlocks/" + imgUrl + ".png";
        }

The "work" code is just garbage to simulate db look ups right now.

Basically it sets the image in every panelbaritem to a grey square, then runs a fake worker process that sits for .2 to 5.0 seconds then loads either a green or red image in place of the grey one.

None of the colored squares ever appear though.

What am I doing wrong?

Thanks.

[Tsvetina]

Hi Justyn,

Try adding an AjaxSetting where RadAjaxManager1 updates pbMenu. It is requried when making an ajax request through the manager's client api.

All the best,
Tsvetina
the Telerik team