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

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

5 Answers 82 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
neebs
Top achievements
Rank 2
neebs asked on 30 Jul 2010, 05:22 PM
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

5 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 04 Aug 2010, 01:18 PM
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
0
neebs
Top achievements
Rank 2
answered on 06 Aug 2010, 06:10 AM
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
0
Kamen Bundev
Telerik team
answered on 06 Aug 2010, 08:14 AM
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
0
neebs
Top achievements
Rank 2
answered on 09 Aug 2010, 06:27 PM
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
0
Kamen Bundev
Telerik team
answered on 10 Aug 2010, 12:15 PM
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
Tags
ListBox
Asked by
neebs
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
neebs
Top achievements
Rank 2
Share this question
or