This is a migrated thread and some comments may be shown as answers.

TreeMapItem auto resize or auto fill?

6 Answers 47 Views
TreeMap
This is a migrated thread and some comments may be shown as answers.
MO
Top achievements
Rank 1
MO asked on 06 Nov 2014, 04:26 PM
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?

6 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 11 Nov 2014, 10:03 AM
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
0
MO
Top achievements
Rank 1
answered on 12 Nov 2014, 06:14 PM
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?



0
MO
Top achievements
Rank 1
answered on 12 Nov 2014, 07:53 PM
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
0
MO
Top achievements
Rank 1
answered on 12 Nov 2014, 07:55 PM
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'
0
MO
Top achievements
Rank 1
answered on 14 Nov 2014, 12:25 AM
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();
    });
})
0
Nencho
Telerik team
answered on 17 Nov 2014, 08:27 AM
Hello Matt,

Thank you for sharing your solution with the community.

Regards,
Nencho
Telerik
Tags
TreeMap
Asked by
MO
Top achievements
Rank 1
Answers by
Nencho
Telerik team
MO
Top achievements
Rank 1
Share this question
or