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

Checkbox display in ItemTemplate

8 Answers 306 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Sandhya
Top achievements
Rank 1
Sandhya asked on 03 May 2012, 02:22 PM
Hello,

I need a help to display checkbox in proper format using item template.

My scenorio is to select mutiple rows from mutilpe column combo and display the count of selected rows either in Footer or displaying a alert box( using OnClientDropDownClosing) after selecting the items .If I use builtin Checkbox (CheckBoxes="true" ) ,I am able to get the count in alert box but I am not able to format the content(mutilple coulmn) properly(Checkbox and Item Template contents are coming in different rows) . In order to format the content I am using Checkbox control in Item Template but not able to get the count using the code given in Telerik site for OnClientDropDownClosing. My code is as below.

<
telerik:RadComboBox ID="rcbPorts" runat="server" EnableLoadOnDemand="true"
                        HighlightTemplatedItems="true" OnClientItemsRequested="UpdateItemCountField" OnClientDropDownClosing
                        OnDataBound="rcbPorts_DataBound" OnItemDataBound="rcbPorts_ItemDataBound" MarkFirstMatch="true"
                        EmptyMessage="Select Ports" AutoPostBack="true" Width="500px" DataTextField="PortName"
                        DataValueField="PortCode">
                          <HeaderTemplate>
                            <ul>
                                <li class="col1">Select</li>
                                <li class="col2">Country Name</li>
                                <li class="col3">Port Name</li>
                                <li class="col4">Port Type</li>
                            </ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <ul>
                                <li class="col1">
                                    <asp:CheckBox runat="server" ID="chkport" Text="" onclick="stopPropagation(event);" />
                                </li>
                                <li class="col2">
                                    <%# DataBinder.Eval(Container.DataItem, "PCountryName")%></li>
                                <li class="col3">
                                    <%# DataBinder.Eval(Container.DataItem, "PortName")%></li>
                                <li class="col4">
                                    <%# DataBinder.Eval(Container.DataItem, "PortType")%></li>
                            </ul>
                        </ItemTemplate>
                        <FooterTemplate>
                            A total of
                            <asp:Literal runat="server" ID="RadComboItemsCount" />
                            items
                        </FooterTemplate>
                    </telerik:RadComboBox>

Please provide me solution for either of the below 2 isuues:
- If we use Checkbox control in Item Template,how to get the count?
- If we use builtin checkbox,how to format the Item Template and Header Template?

Thanks in Advance!

8 Answers, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 08 May 2012, 08:42 AM
Hi Sandhya,

Can you paste here the css styles that you use ("col1", "col2", "col3", "col4")?

Greetings,
Kalina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Sandhya
Top achievements
Rank 1
answered on 08 May 2012, 08:47 AM
Hi Kalina,

Please find the css styles I used for ComboBox as below:
.rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
{
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
.col1, .col2, .col3, .col4
{
    float: left;
    width: 110px;
    margin: 0;
    padding: 0 5px 0 0;
    line-height: 14px;
}
 
.multipleRowsColumns .rcbItem, .multipleRowsColumns .rcbHovered
{
    float: left;
    margin: 0 1px;
    min-height: 13px;
    overflow: hidden;
    padding: 2px 19px 2px 6px;
    width: 125px;
}
0
Sandhya
Top achievements
Rank 1
answered on 11 May 2012, 10:04 AM
Any Help on this issue Please?
0
Kate
Telerik team
answered on 11 May 2012, 10:07 AM
Hello Sandhya,

You can use the following css classes with when you have the CheckBoxes property set to true:
<style type="text/css">
        .rcbItem ul, .rcbHovered ul, .rcbDisabled ul
        {
            width: 100%;
            display: inline;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
         
        .rcbHeader ul, .rcbFooter ul
        {
            width: 100%;
            margin: 0;
            padding: 0;
            list-style-type: none;
            min-height: 0;
            _zoom: 1;
        }
        .rcbHeader ul:after, .rcbFooter ul:after
        {
            content: "";
            clear: both;
            display: block;
        }
        .col1h, .col2h, .col3h, .col4h
        {
            float: left;
            width: 110px;
            margin: 0;
            padding: 0 5px 0 40px;
        }
         
        .col1h
        {
            padding: 0;
            margin-right: -10px;
            width: auto;
            float: left;
        }
         
        .col1, .col2, .col3, .col4
        {
            float: left;
            width: 110px;
            margin: 0;
            padding: 0 5px 0 40px;
        }
         
        div.RadComboBoxDropDown .rcbCheckBox, div.RadComboBoxDropDown .rcbCheckAllItemsCheckBox
        {
            vertical-align: middle;
            float: left;
            margin: 0;
            padding: 0 5px 0 0;
            line-height: 14px;
        }
         
    </style>

markup:
<telerik:RadComboBox ID="rcbPorts" runat="server" EnableLoadOnDemand="true" HighlightTemplatedItems="true"
            MarkFirstMatch="true" EmptyMessage="Select Ports" AutoPostBack="true" Width="500px"
            CheckBoxes="true" DropDownWidth="550px">
            <HeaderTemplate>
                <ul>
                    <li class="col1h">Select</li>
                    <li class="col2h">Country Name</li>
                    <li class="col3h">Port Name</li>
                    <li class="col4h">Port Type</li>
                </ul>
            </HeaderTemplate>
            <ItemTemplate>
                <ul>
                    <li class="col2">"PCountryName"</li>
                    <li class="col3">"PortName"</li>
                    <li class="col4">"PortType"</li>
                </ul>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem Text="item1" />
                <telerik:RadComboBoxItem Text="item2" />
            </Items>
            <FooterTemplate>
                A total of
                <asp:Literal runat="server" ID="RadComboItemsCount" />
                items
            </FooterTemplate>
        </telerik:RadComboBox>

All the best,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Sandhya
Top achievements
Rank 1
answered on 15 May 2012, 10:14 AM
Thanks Alot for your Help Kate! It worked.
0
Rev
Top achievements
Rank 1
answered on 29 Apr 2013, 07:27 AM
Hi all,

I use same type of RadComboBox. I need CheckAll check box for selecting all items.
pls help.
0
Shinu
Top achievements
Rank 2
answered on 29 Apr 2013, 07:42 AM
Hi,

Setting the EnableCheckAllItemsCheckBox property to "true" will display the "Check All" section. Check the demo for more.
ComboBox - CheckBoxes

Thanks,
Shinu
0
Rev
Top achievements
Rank 1
answered on 29 Apr 2013, 10:13 AM
Hi Shinu ,
Thanks for ur reply..
I have RadComboBox with <HeaderTemplate> and <ItemTemplate> as mentioned above.
I set EnableCheckAllItemsCheckBox ="true"; I got "Check All " checkbox in dropdown.
but  items are not selected when I select checkAll check box.


Pls help.
Tags
ComboBox
Asked by
Sandhya
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Sandhya
Top achievements
Rank 1
Kate
Telerik team
Rev
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or