Checkbox display in ItemTemplate

9 posts, 0 answers
  1. Sandhya
    Sandhya avatar
    9 posts
    Member since:
    Apr 2012

    Posted 03 May 2012 Link to this post

    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!
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 08 May 2012 Link to this post

    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.
  3. Sandhya
    Sandhya avatar
    9 posts
    Member since:
    Apr 2012

    Posted 08 May 2012 Link to this post

    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;
    }
  4. Sandhya
    Sandhya avatar
    9 posts
    Member since:
    Apr 2012

    Posted 11 May 2012 Link to this post

    Any Help on this issue Please?
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 11 May 2012 Link to this post

    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.
  6. Sandhya
    Sandhya avatar
    9 posts
    Member since:
    Apr 2012

    Posted 15 May 2012 Link to this post

    Thanks Alot for your Help Kate! It worked.
  7. Rev
    Rev avatar
    6 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    Hi all,

    I use same type of RadComboBox. I need CheckAll check box for selecting all items.
    pls help.
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Apr 2013 Link to this post

    Hi,

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

    Thanks,
    Shinu
  9. Rev
    Rev avatar
    6 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    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.
Back to Top