Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
480
Word wrap nodes in WebDataTree
posted

Hi,

 

I'm using a WebDataTree (Infragistics4.Web.v12.1)  inside a WebDropdown like this:

          <ig:WebDropDown ID="wddTree" runat="server" Width="170px" DropDownContainerWidth="200px" StyleSetName="Claymation" EnableCustomValues="true" EnableCustomValueSelection="true" DisplayMode="DropDown">

                <ClientEvents Initialize="wucpcDropDown.initializeDropDown"  />

                <Items>

                    <ig:DropDownItem TemplateId="TmpID" HoverCssClass="igdd_itemhover" ActiveCssClass="igdd_itemhover" SelectedCssClass="igdd_itemhover" CssClass="igdd_itemhover"></ig:DropDownItem>

                </Items>

                <Templates>

                    <ig:ItemTemplate TemplateID="TmpID">

                        <Template>

                            <ig:WebDataTree ID="WebDataTree1" runat="server" CheckBoxMode="TriState" StyleSetName="Claymation">                                                             

                                <ClientEvents NodeExpanded="wucpcDropDown.setFocus" NodeCollapsed="wucpcDropDown.setFocus" NodeChecking="wucpcDropDown.nodeChecking" Initialize="wucpcDropDown.initializseTree" NodeCollapsing="wucpcDropDown.nodeCollapsing" NodeClick="wucpcDropDown.nodeClicking" />

                            </ig:WebDataTree>

                        </Template>

                    </ig:ItemTemplate>

                </Templates>

          </ig:WebDropDown>

 

 

My problem is when one item is too long, without spaces like this:

>All

       >012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

       >Item 1

       >Item 2

 

The text  expands and a horizontal scroll bar appears. When this happens, there is another side effect. If you open the dropdown and use the horizontal scroll bar, it will keep the focus, and if after this you open another WebDropDown, the first one won't close, resulting in two open dropdowns unless you close the first one manually.

 

Is there a way to make the nodes "wrap" so this wont happen?

 

Thanks

  • 20255
    Offline posted

    Hello,

    Thank you for contacting us.

    About your question, my suggestion is to override our CSS classes in order to change the white-space and text-wrap attributes. Modify them like this and let me know about the results.

    Code snippet:

    1. <style>
    2.         .igdt_IGNode
    3.         {
    4.             width: 11em;
    5.             word-wrap: break-word;
    6.         }
    7.         .igdt_IGNodeHolder
    8.         {
    9.             white-space:normal;
    10.         }
    11.     </style>