TreeMapItem auto resize or auto fill?

[MO]

Is there a way to have the TreeMapItems auto resize on browser window resize? Currently if the user shrinks the browser window, it shrinks the RadTreeMap but not the TreeMapItems so they get covered up. And in reverse, it expands the size of the RadTreeMap but the TreeMapItems stay the same so it leaves a blank area to the right of the TreeMapItems.

Is there a way to fix this?

[Nencho]

Hello Matt,

In order to achieve the desired behavior, I would suggest you to use jQuery, in order to capture the window resize event. In addition, you can use the KendoWidget object, nested in the RadTreeMap, in order to use its resize() method and achieve the desired behavior:

$(window).resize(function () {
             $find("TreeMap1").get_kendoWidget().resize();
         });

In addition, in the attachment you could find a simple example, demonstrating the implementation and the behavior of the suggested approach.

Regards,
Nencho
Telerik

[MO]

Forgive me, I've just started learning Javascript/JQuery for this project in the last month. That does not appear to work with wildcards... which I need to use since my RadTreeMap controls are created dynamically (I don't know how many I will need, so I create and add them to a placeholder for each agency). 

Every one of the RadTreeMap has an id that includes "tmAgency" (the control name on the server side is tmAgency_agencyidnumber) where agencyidnumber is the integer id of the agency, so I tried:

$find('[id^=tmAgency]').get_kendoWidget().resize();
and
$('[id^=tmAgency]").get_kendoWidget().resize(); 

And it gives an error saying "get_kendoWidget()" is undefined. What am I missing?

[MO]

I went in and found what it was naming the first control and tried to directly manipulate it:

Code:

?$find('ctl00_MainContent_RadPanelBar3_i0_tmAgencySubmission_1').get_kendoWidget().resize();

error: undefined

I get results when I leave off the .resize and when I leave off .get_kendoWidget, as I would expected. But when I add .resize() i get the "undefined" error

[MO]

Accidentally his post: this is the error it gives me in runtime on that line: 

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'resize'

[MO]

Ok, if you're using dynamic controls like I am, you have to do a little... modification. My controls all contain "tmAgency" so the following worked for me:

$(window).resize(function () {
    var tmcontrols = $("[id*='tmAgency']");

    $.each(tmcontrols, function (index, value) {
        $find(this.id).get_kendoWidget().resize();
    });
})

[Nencho]

Hello Matt,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik