How to allign items in horizontal direction inside listbox

[jeevitha]

Hi,

I need to allign My listbox items in Horizontal ditection inside listbox. how to do it

Thsnk,
Jeevitha

[Genady Sergeev]

Hi jeevitha,

I suggest that you try the following CSS:

<style type="text/css">
        .rlbItem
        {
            float:left !important;
        }
        .rlbGroup, .RadListBox
        {
            width:auto !important;
        }
    </style>

Greetings,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[towpse]

Can anyone follow up on this?
Should the proposed answer work as expected?

[Vesko]

It should work, why don't you try it?

[towpse]

I did after which nothing was being rendered in the list box...

[Genady Sergeev]

Hello guys,

I have once again tested the provided CSS and on my machine the result was correct. I have attached a screenshot for reference.


Sincerely yours,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sukhi S.S]

What is the xaml equivalent of ur CSS style ?pls provide.
also,

<ListBox.ItemTemplate >
 <DataTemplate >
<Image Source="{Binding IconPath}" Margin="0 0 3 0" HorizontalAlignment="Center" Width="35" Height="30" Grid.Row="0"/>

 <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" Foreground="Gold" Grid.Row="1"/>

 <TextBlock Text="{Binding Author}" HorizontalAlignment="Center"  Foreground="Gold" Grid.Row="2"/>

</DataTemplate>
</ListBox.ItemTemplate>

One set of listbox item includes 1 image n 2 textboxes which align vertically in rows 0,1, and 2.
second set onwards : regular behaviour is items gets added vertically ,
instead, every set has to align horizontally.ie, next image n textboxes has to adjust in next grid.column dynamically

[Devendra]

<style type="text/css">

        .rlbItem

        {

            float:left !important;

        }

        .rlbGroup, .RadListBox

        {

            width:auto !important;

        }

    </style>

Hi i tried to your style to align items horizontally inside RadListBox and it works, only problem is if say there are more than one RadListbox and i want to apply the style only to specfic list box how to do I do it.

[Yana]

Hello Devendra,

You should set CssClass property of the needed listbox for example to "horizontalListbox" and then change your styles like this:

<style type="text/css">
        .horizontalListbox .rlbItem
        {
            float:left !important;
        }
        .horizontalListbox  .rlbGroup, .RadListBox
        {
            width:auto !important;
        }
    </style>

the styles will be applied only to this listbox.

Regards,
Yana
the Telerik team

[vivek]

Hi,

I am populating data in RadListBox at runtime. Problem is the data into the RadListbox ia not left alligned. Could you please help me to align my data from the left. Currently it is center alligned. Is there any property to set. Please provide me sample.

Thanx in advance
Vivek

[Jerry]

This style works good.  Is there a way style the drag and drop functionality of list items in a horizontal listbox (similar to column drag and drop in a grid view)? 
Thanks
, Jerry

[Princy]

Hi Jerry

Try the following code snippet to style the dragged item.

JS:

<script type="text/javascript">
    function OnClientDragStart(sender, args) {
        args.get_htmlElement().style.backgroundColor = "Red";
    }
</script>

Hope this helps.

Thanks,
Princy.

[Jerry]

Thanks for the response, though I did not see red effect.  What I'm trying to do is get the reorder arrows to behave horizontally to identify where the item will be dropped.   As it stands the arrows jump around to the left of the horizontal list.  I also can't get the box around the list to go away, but that's not as important.  Below is test code.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>test</title>
    <style type="text/css">
        .horizontalListbox {
            border: 0px;
        }
        .horizontalListbox .rlbItem {
            float: left !important;
        }
        .horizontalListbox .rlbGroup, .RadListBox {
            width: auto !important;
        }
    </style>
    <script type="text/javascript">
        function OnClientDragStart(sender, args) {
            args.get_htmlElement().style.backgroundColor = "Red";
        }
    </script>
</head>
<body>
    <form runat="server" id="mainForm" method="post">
    <telerik:RadScriptManager ID="RadScriptManager" runat="server" />
        <telerik:RadListBox runat="server" EnableViewState="false" CssClass="horizontalListbox"
            ID="demoListBox" CheckBoxes="true" AllowReorder="true" EnableDragAndDrop="true">
            <ButtonSettings ShowReorder="false" />
            <Items>
                <telerik:RadListBoxItem Text="Item 1" Checked="true" />
                <telerik:RadListBoxItem Text="Item 2" Checked="true" />
                <telerik:RadListBoxItem Text="Item 3" />
                <telerik:RadListBoxItem Text="Item 4" Checked="true" />
            </Items>
        </telerik:RadListBox>
    </form>
</body>
</html>

[Princy]

Hi Jerry,

After inspecting your code I found that you are not attaching the events to the RadListBox. Here is the full code that I tried.

CSS:

<style type="text/css">
    .horizontalListbox
        {
            border: 0px;
        }
    .horizontalListbox .rlbItem
        {
            float: left !important;
        }
    .horizontalListbox .rlbGroup, .RadListBox
        {
            width: auto !important;
        }
</style>

ASPX:

<telerik:RadListBox runat="server" EnableViewState="false" CssClass="horizontalListbox" OnClientDragStart="OnClientDragStart" ID="demoListBox" CheckBoxes="true" AllowReorder="true" EnableDragAndDrop="true" OnClientDropped="OnClientDropped">
      <ButtonSettings ShowReorder="false" />
      <Items>
           <telerik:RadListBoxItem Text="Item 1" Checked="true" />
           <telerik:RadListBoxItem Text="Item 2" Checked="true" />
           <telerik:RadListBoxItem Text="Item 3" />
           <telerik:RadListBoxItem Text="Item 4" Checked="true" />
      </Items>
</telerik:RadListBox>

JS:

<script type="text/javascript">
    function OnClientDragStart(sender, args) {
        args.get_htmlElement().style.backgroundColor = "Red";
    }
    function OnClientDropped(sender, args) {
        args.get_sourceItem()._element.style.backgroundColor = "";
    }
</script>

Hope this helps.

Thanks,
Princy.

[akshay]

For the first one row the items are displayed horizontally. But once the items cross the first row, when it enters second row the arrangement changes to vertical. How can i keep the arrangement horizontally?

[ELNG]

Hi,

Can anybody advice how to apply width% for the horizontal orientation of the radlistbox, i am using the below css:

       .clsHorizontal .rlbItem
    {
        float: left !important;
    }
    .clsHorizontal .rlbGroup, .clsHorizontal .RadListBox
    {
        width: auto !important;
    }

 

Thank you