size of the nodes

7 posts, 0 answers
  1. Michael
    Michael avatar
    7 posts
    Member since:
    Jun 2012

    Posted 21 Nov 2011 Link to this post

    does anyone know how to reduce the size of the nodes to display more nodes on a page? Specifically the Width?
    I've used the css properties to shrink the size of the fonts and image but I don't know what I have to change to reduce the node size without messing up the whole chart.

    code:

     

     

    <telerik:RadOrgChart ID="OrgChart" runat="server" DataFieldID="ID" DataFieldParentID="ParentID" Enabled="true" Width="100%">

     

    <RenderedFields>  

     

    <ItemFields>

     

    <telerik:OrgChartRenderedField DataField="BusinessTitle" />

     

    <telerik:OrgChartRenderedField DataField="EmployeeName" />

     

    </ItemFields>

     

    </RenderedFields>

     

    </telerik:RadOrgChart>

     



    Thanks,
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 22 Nov 2011 Link to this post

    Hi Michael,

    It's quite easy to override the width of the nodes. Just use the following snippet:

    html .RadOrgChart .rocItem {
        width: 150px;
    }

    Note: we do plan to add attributes for the width, but that would be for a later release.

    Regards,
    Ivan Zhekov
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    7 posts
    Member since:
    Jun 2012

    Posted 22 Nov 2011 Link to this post

    Thank you very much for the quick response.
    and it was easy :)

    Does your team have any plans to add a zoom in/out feature to your chart?
  5. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 23 Nov 2011 Link to this post

    Hello Michael,

    We are contemplating the possibility to implement zoom feature for our RadOrgChart for the future versions of the product. This, however, will most likely not happen for the next major release of the component.

    Kind regards,
    Sebastian
    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
  6. Kuldeep
    Kuldeep avatar
    2 posts
    Member since:
    Nov 2011

    Posted 10 Apr 2012 Link to this post

    Thanks for the Fruitful Tip!!
    But how to adjust the height of the node??
    when i use 

    html .RadOrgChart .rocItem {
        Height: 60px;}

    it adjusts spaces b/w the levels of the chart not the item height!!

  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 16 Apr 2012 Link to this post

    Hi, Kuldeep.

    Adjusting the height of the nodes is not a matter of simple CSS snippet, as there are more things connected to it.

    For now, you could use the following snippet:

    html .RadOrgChart .rocItem {
        height: 60px; /** Was 100 */
    }
     
    html .RadOrgChart .rocItemContent,
    html .RadOrgChart .rocItemTemplate {
        height: 38px; /** Was 78 */
    }

    In addition might you need to recalculate the exact position of the .rocLineDown.

    But on the long term, you can file a new item in the PITS and vote for it.

    All the best,
    Ivan Zhekov
    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.
  8. Kuldeep
    Kuldeep avatar
    2 posts
    Member since:
    Nov 2011

    Posted 28 Apr 2012 Link to this post

    Thanks Ivan!
    I already made it working before your belated reply,
    anyway it's good to see your reply,
    Thanks a lot.
    Have a good time.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017