Loading images into PanelBar on page load

2 posts, 0 answers
  1. Justyn Hunter
    Justyn Hunter avatar
    10 posts
    Member since:
    Jan 2006

    Posted 18 May 2012 Link to this post

    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.
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 23 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top