Saturday, June 21, 2014

Display Checkbox in Telerik RadCombobox and select any specific value using JQuery

Step 1: Display checkbox in Telerik Combobox 

<telerik:RadComboBox ID="ddlStream" runat="server" EmptyMessage="Type Program Name" DataTextField='Program' DataValueField='Code' Style="display: none; width: 300px;" ZIndex="999999" Filter="Contains">
 <ItemTemplate>
   <asp:CheckBox runat="server" ID="chk1" Width="300" Text='<%#Eval("Program") %>' onclick="onCheckBoxClick(this)" />
 </ItemTemplate>
</telerik:RadComboBox>

Step 2: Function to select any checkbox in the RadCombobox

function onCheckBoxClick(element) {
            var text = "";
            var values = "";

            var combo = $find("<%= ddlStream.ClientID %>");
            var items = combo.get_items();

            for (var i = 0; i < items.get_count() ; i++) {
                var item = items.getItem(i);


                var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                if (chk1.checked) {
                    text += item.get_text() + ",";    
                         //Text of selected checkbox of ComboBox
                    values += item.get_value() + ", ";   
                         // Values of selected checkbox of ComboBox
                }
            }

            text = removeLastComma(text);
            $("#<%=txtBox.ClientID %>").val(text);  // Text generated above displayed in textbox.
            prg = text;
        }

        //This method removes the ending comma from a string.
        function removeLastComma(str) {
            return str.replace(/,$/, "");
        }

Step 3. (OPTIONAL) CSS changes that may be required to display the combobox if displayed in popup (Values added need to be updated as per requirement.)

<style type="text/css">
        .RadComboBoxDropDown
        {
            z-index: 999999999999 !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream_DropDown
        {
            width: 320px !important;
        }

        .rcbFocused
        {
            width: 320px !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream table
        {
            width: 320px !important;
        }
</style>

No comments:

Post a Comment

Saturday, June 21, 2014

Display Checkbox in Telerik RadCombobox and select any specific value using JQuery

Step 1: Display checkbox in Telerik Combobox 

<telerik:RadComboBox ID="ddlStream" runat="server" EmptyMessage="Type Program Name" DataTextField='Program' DataValueField='Code' Style="display: none; width: 300px;" ZIndex="999999" Filter="Contains">
 <ItemTemplate>
   <asp:CheckBox runat="server" ID="chk1" Width="300" Text='<%#Eval("Program") %>' onclick="onCheckBoxClick(this)" />
 </ItemTemplate>
</telerik:RadComboBox>

Step 2: Function to select any checkbox in the RadCombobox

function onCheckBoxClick(element) {
            var text = "";
            var values = "";

            var combo = $find("<%= ddlStream.ClientID %>");
            var items = combo.get_items();

            for (var i = 0; i < items.get_count() ; i++) {
                var item = items.getItem(i);


                var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                if (chk1.checked) {
                    text += item.get_text() + ",";    
                         //Text of selected checkbox of ComboBox
                    values += item.get_value() + ", ";   
                         // Values of selected checkbox of ComboBox
                }
            }

            text = removeLastComma(text);
            $("#<%=txtBox.ClientID %>").val(text);  // Text generated above displayed in textbox.
            prg = text;
        }

        //This method removes the ending comma from a string.
        function removeLastComma(str) {
            return str.replace(/,$/, "");
        }

Step 3. (OPTIONAL) CSS changes that may be required to display the combobox if displayed in popup (Values added need to be updated as per requirement.)

<style type="text/css">
        .RadComboBoxDropDown
        {
            z-index: 999999999999 !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream_DropDown
        {
            width: 320px !important;
        }

        .rcbFocused
        {
            width: 320px !important;
        }

        #ctl00_ContentPlaceHolder1_ddlStream table
        {
            width: 320px !important;
        }
</style>

No comments:

Post a Comment