TreeMapItem auto resize or auto fill?

7 posts, 0 answers
  1. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 06 Nov 2014 Link to this post

    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?
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 11 Nov 2014 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 12 Nov 2014 in reply to Nencho Link to this post

    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?



  5. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 12 Nov 2014 in reply to Nencho Link to this post

    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
  6. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 12 Nov 2014 in reply to MO Link to this post

    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'
  7. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 13 Nov 2014 in reply to MO Link to this post

    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();
        });
    })
  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 17 Nov 2014 Link to this post

    Hello Matt,

    Thank you for sharing your solution with the community.

    Regards,
    Nencho
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017