Undesirable behavior on listbox with templates and multiple columns on multi-select

6 posts, 0 answers
  1. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 30 Jul 2010 Link to this post

    I'm trying to implement a listbox with transfer, using templates to render multiple columns in each listbox. If I select multiple items, I get confusing behavior in which part of the text in the top and bottom items, and all of the text in the middle items are selected as if you were going to copy the text to the clipboard. You can see this clearly in the online demo titled "Item Templates" under "Functionality" in the ListBox demos. To see it best, set the skin to Office2007 for high contrast. Select a block of items and you'll see the behavior in the attached image. Is there a way to prevent this?

    Steve
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Aug 2010 Link to this post

    Hi Neebs,

    Replace the style in the demo with this CSS rule and javascript pageLoad() handler:
    <style type="text/css">
        div.RadListBox .rlbTemplate
        {
            display: inline-block;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }
    </style>

    <script type="text/javascript">
        function pageLoad() {
            if ($telerik.isIE)
                $telerik.$('.rlbTemplate').live('selectstart', function () { return false; });
        }
    </script>


    Best wishes,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 06 Aug 2010 Link to this post

    Not sure if this works or not yet. It renders the list items invisible. I can still select list items, and there is a scrollbar indicating the list boxes are populated. However no text appears in the list box.

    Steve
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 06 Aug 2010 Link to this post

    Hello Neebs,

    Can you post the resulting HTML? The list items were not invisible when I tested it.

    Sincerely yours,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 09 Aug 2010 Link to this post

    Hi Kamen,

    I believe I resolved this. I had to remove the display:inline-block; For review, here are the items of interest here:

    Your RadListBox style with my modification:

    div.RadListBox .rlbTemplate
    {
        /*display: inline-block;*/
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }

    (Note: Resharper complains about the user-select line saying it is not a known CSS property name)

    My RadListBox aspx code:

    <telerik:RadListBox ID="RadListBoxAvailableBins" runat="server" 
        AllowTransfer="True" TransferToID="RadListBoxSelectedBins" Width="240px" 
        DataTextField="MeterBinNameSort" Height="180px" 
        SelectionMode="Multiple" Skin="Web20" DataValueField="Id" 
        AutoPostBackOnTransfer="True" 
        ontransferred="RadListBoxSelectedBins_Transferred">
        <ButtonSettings TransferButtons="Common, TransferAllTo"></ButtonSettings>
        <HeaderTemplate>
            <div class="JobEditListboxHdr">
                <div class="JobEditListboxCol1Hdr">
                    Meter
                </div>
                <div class="JobEditListboxCol2Hdr">
                    Bin
                </div>
            </div>
        </HeaderTemplate>
        <ItemTemplate>
            <div class="JobEditListboxLine">
                <div class="JobEditListboxCol1Line">
                    <%# DataBinder.Eval(Container.DataItem, "MeterName") %>
                </div>
                <div class="JobEditListboxCol2Line">
                    <%# DataBinder.Eval(Container.DataItem, "Name") %>
                </div>
            </div>
        </ItemTemplate>
    </telerik:RadListBox>

    and my styles:

    div.JobEditListboxHdr
    {
        position:relative;
        left:0px;
        height:16px;
    }
    div.JobEditListboxCol1Hdr
    {
        position:absolute;
        left:4px;
        height:20px;
        font-weight:bold;
    }
    div.JobEditListboxCol2Hdr
    {
        position:absolute;
        left:144px;
        height:20px;
        font-weight:bold;
    }
    div.JobEditListboxLine
    {
        position:relative;
        left:0px;
        height:16px;
    }
    div.JobEditListboxCol1Line
    {
        position:absolute;
        left:0px;
        height:20px;
        font-weight:normal;
    }
    div.JobEditListboxCol2Line
    {
        position:absolute;
        left:140px;
        height:20px;
        font-weight:normal;
    }


    Thanks, Steve
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Aug 2010 Link to this post

    Hello Neebs,

    Well, I was talking about the demo, so I just left the display: inline-block from there in my code. Sorry about that.

    User-select is part of CSS3 specs, maybe you didn't set ReSharper to handle CSS3 declarations? The two browser-specific variants are likely to be marked as wrong though.

    Best wishes,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017