Set Width of RadPanelItem In OnClientItemExpand

[jfkrueger]

Is there a way to set the width of a RadPanelItem through client script in the OnClientItemExpand event?

[Atanas Korchev]

Hi Joe,

You can use something similar to this:

args.get_item().get_element().style.width = "200px";

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jfkrueger]

Ok, that works but after seeing the results I guess it is not what I am really after. I want to change the width of the entire RadPanelBar, not just one of the RadPanelItems. I thought the RadPanelBar would expand out to the same width as the longest item but that is not the case, the Item expands out to the desired width but all the other items stay smaller which does not look right. I've tried this:

function OnClientItemExpand(sender, args) {

     radPanelBar = $find("<%= rpbCSRLists.ClientID %>").width = "800px";

}

Any ideas?

Thanks!

[jfkrueger]

More info:

I also have OnClientItemCollapse event which was supposed to set the RadPanelItem back to it's shortened state - it only needs to expand out to a larger width when it is expanded, then it should shrink back to a smaller width so as to save real-estate on the page. If I use the OnClientItemCollapse to reset the width back down to the original width, when I expand a different item it does grow out to 800px, but any of the previous items I have selected stay at the shortened width. So while the header of the expanded item grows out to 800px, the headers of any of the other RadPanelItems that have already been expanded are staying at the shortened width, which looks funny.

[jfkrueger]

I need to either set the width of the entire RadPanelBar or do something like this:

function OnClientItemExpand(sender, args) {

        var panel = $find("<%= rpbCSRLists.ClientID %>");
        var items = panel.get_items();

        for (var i = 0; i < items.get_count(); i++) {
            items.getItem(i).style.width = "800px";
        }

    }

However, this throws a Javascript error stating that "style" is null or not an object.

[jfkrueger]

Ok, I got it:

<script type="text/javascript" language="javascript">

    function OnClientItemExpand(sender, args) {

        var panel = $find("<%= rpbCSRLists.ClientID %>");
        var items = panel.get_items();
        var attributes;

        for (var i = 0; i < items.get_count(); i++) {
            items.getItem(i).get_element().style.width = '800px';
        }

    }

    function OnClientItemCollapse(sender, args) {

        var panel = $find("<%= rpbCSRLists.ClientID %>");
        var items = panel.get_items();
        var attributes;

        for (var i = 0; i < items.get_count(); i++) {
            items.getItem(i).get_element().style.width = '100%';
        }

    }

</script>

Just an FYI - the only reason I have to do this is because it is on a page using asp.net web parts framework. If another web part is on the page next to this part, it doesn't expand out all the way and columns get squished together. I just needed to force it to expand out to a width that the users can still easisly see the values in the columns.

Thanks!