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

[neebs]

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

[Kamen Bundev]

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

[neebs]

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

[Kamen Bundev]

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

[neebs]

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

[Kamen Bundev]

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