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

Radcombobox inside radpanel

6 Answers 145 Views

ComboBox

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

Gauri asked on 16 Jan 2012, 06:08 PM

I will really appreciate if you can help me with the following.

In our application we have some controls with parent child functionality inside rad panel.

We need the dropdown1 ="Yes" enable the remaining controls and "No" to disable them.
On disable/enable the backcolor should change too.
We need to achieve this clientside using javascript.

The other controls include 1 textbox, 1 radDatepicker and 3 radcombobox.

The enable/disable should also change the backcolor.

What's happening is .......
1. TextBox is enabling and disabling also changing the backcolor.
2. Radcombobox is enabling and disabling but not changing the backcolor.
3. RadDatepicker is neither enabling and disabling also not changing the backcolor.

Here is the script

function

OnPriorCathChange() {

// alert("Inside OnPriorCathChange");

var PriorCath;

var ProcedureLookupCombo;

// var ProcedureLookupComboJs;

var ProcedureID;

PriorCath = $telerik.$(

"[id$='UIPriorCath']");

ProcedureLookupCombo = $telerik.$(

"[id$='UIProcedureLookupCombo']");

// ProcedureLookupComboJs = $find(ProcedureLookupCombo[0].id);

var LastCathDate;

var MostRecCathProcID;

var NumPriorCath;

LastCathDate = $telerik.$(

"[id$='UILastCathDate']");

MostRecCathProcID = $telerik.$(

"[id$='UIMostRecCathProcID']");

NumPriorCath = $telerik.$(

"[id$='UINumPriorCath']");

ProcedureID = $telerik.$(

"[id$='ProcedureID']");

var HFConfirm = $telerik.$("[id$='HFConfirm']");

// var LastCathDatetextBox = LastCathDate[0].get_textBox();

if (PriorCath[0].selectedIndex != 1)

{

// if (!confirm('All child records will be deleted. Are you sure you want to proceed?')) {

// HFConfirm.val('0');

// PriorCath[0].selectedIndex = '1';

// return false;

// }

// else {

// HFConfirm.val('1');

//__doPostBack(PriorCath[0].id, '');

// access the select DOM element and set the selected index

ProcedureLookupCombo[0].selectedIndex = 0;

ProcedureLookupCombo[0].attributes(

'disabled').value = true

// ProcedureLookupCombo[0].style.backgroundColor = "Beige";

ProcedureLookupCombo[0].style.backgroundColor =

"Beige";

//document.getElementById(ProcedureLookupCombo[0].id).style.backgroundColor = "Beige";

LastCathDate[0].value =

'';

LastCathDate[0].attributes(

'disabled').value = true

//LastCathDate.attr("disabled", "disabled");

// LastCathDatetextBox.css("backgroundColor", "Beige");

MostRecCathProcID[0].selectedIndex = 0;

MostRecCathProcID.attr(

"disabled", "disabled");

MostRecCathProcID.css(

"backgroundColor", "Beige");

ProcedureID[0].selectedIndex = 0;

ProcedureID.attr(

"disabled", "disabled");

ProcedureID.css(

"backgroundColor", "Beige");

NumPriorCath[0].selectedIndex = 0;

NumPriorCath.attr(

"disabled", "disabled");

NumPriorCath.css(

"backgroundColor", "Beige");

NumPriorCath.val(

'');

// }

}

else {

if (ProcedureLookupCombo.attr("disabled"))

ProcedureLookupCombo.removeAttr(

"disabled");

ProcedureLookupCombo.css(

"backgroundColor", "#05EDFF");

if (LastCathDate.attr("disabled"))

LastCathDate.removeAttr(

"disabled");

LastCathDate.css(

"backgroundColor", "#05EDFF");

if (MostRecCathProcID.attr("disabled"))

MostRecCathProcID.removeAttr(

"disabled");

MostRecCathProcID.css(

"backgroundColor", "#05EDFF");

if (NumPriorCath.attr("disabled"))

NumPriorCath.removeAttr(

"disabled");

NumPriorCath.css(

"backgroundColor", "#05EDFF");

}

}

Thanks,
Gauri

6 Answers, 1 is accepted

answered on 17 Jan 2012, 05:00 PM

Here is the aspx file
-------------------------

<%@ Page Title="" Language="C#" MasterPageFile="~/Common/MasterPages/Content.master" AutoEventWireup="true" CodeFile="EpisodeofCare.aspx.cs" Inherits="Acc_EpisodeofCare" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script src="../Common/Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

    function OnClientItemsRequesting(sender, eventArgs) {
        if (eventArgs.get_text().length < 3)
            eventArgs.set_cancel(true)
        else
            eventArgs.set_cancel(false);
    }

    //global variables for device comboboxe
    var devicesCombo;
    var procCombo;
    var SearchCombo;

    function pageLoad()
    {
        procCombo = $find("<%= UIProcedureID.ClientID %>");
    }

    function OnPriorCathChange() {
        // alert("Inside OnPriorCathChange");
        var PriorCath;
        var ProcedureLookupCombo;
        // var ProcedureLookupComboJs;
        var ProcedureID;
        PriorCath = $telerik.$("[id$='UIPriorCath']");
        ProcedureLookupCombo = $telerik.$("[id$='UIProcedureLookupCombo']");

// ProcedureLookupComboJs = $find(ProcedureLookupCombo[0].id);

        var LastCathDate;
        var MostRecCathProcID;
        var NumPriorCath;
        LastCathDate = $telerik.$("[id$='UILastCathDate']");
        MostRecCathProcID = $telerik.$("[id$='UIMostRecCathProcID']");
        NumPriorCath = $telerik.$("[id$='UINumPriorCath']");
        ProcedureID = $telerik.$("[id$='ProcedureID']");

var HFConfirm = $telerik.$("[id$='HFConfirm']");
// var LastCathDatetextBox = LastCathDate[0].get_textBox();

        if (PriorCath[0].selectedIndex != 1) {
            //        if (!confirm('All child records will be deleted. Are you sure you want to proceed?')) {
            //            HFConfirm.val('0');
            //            PriorCath[0].selectedIndex = '1';
            //            return false;
            //        }
            //        else {

// HFConfirm.val('1');
//__doPostBack(PriorCath[0].id, '');

            // access the select DOM element and set the selected index
            ProcedureLookupCombo[0].selectedIndex = 0;
            ProcedureLookupCombo[0].attributes('disabled').value = true

            //        ProcedureLookupCombo[0].style.backgroundColor = "Beige";
            ProcedureLookupCombo[0].style.backgroundColor = "Beige";
            //document.getElementById(ProcedureLookupCombo[0].id).style.backgroundColor = "Beige";
            LastCathDate[0].value = '';
            //LastCathDate[0].attributes('disabled').value = true
            LastCathDate.attr("disabled", "disabled");
            LastCathDate.css("backgroundColor", "Beige");
            MostRecCathProcID[0].selectedIndex = 0;
            MostRecCathProcID.attr("disabled", "disabled");
            MostRecCathProcID.css("backgroundColor", "Beige");
            ProcedureID[0].selectedIndex = 0;
            ProcedureID.attr("disabled", "disabled");
            ProcedureID.css("backgroundColor", "Beige");

            NumPriorCath[0].selectedIndex = 0;
            NumPriorCath.attr("disabled", "disabled");
            NumPriorCath.css("backgroundColor", "Beige");
            NumPriorCath.val('');

// }

}
else {

            if (ProcedureLookupCombo.attr("disabled"))
                ProcedureLookupCombo.removeAttr("disabled");
            ProcedureLookupCombo.css("backgroundColor", "#05EDFF");

            if (LastCathDate.attr("disabled"))
                LastCathDate.removeAttr("disabled");
            LastCathDate.css("backgroundColor", "#05EDFF");

            if (MostRecCathProcID.attr("disabled"))
                MostRecCathProcID.removeAttr("disabled");
            MostRecCathProcID.css("backgroundColor", "#05EDFF");

            if (NumPriorCath.attr("disabled"))
                NumPriorCath.removeAttr("disabled");
            NumPriorCath.css("backgroundColor", "#05EDFF");

}

//    function OnSeqClientItemsRequesting(sender, eventArgs) {
//        SurgeryIDLookupCombo.set_text("");
//    }


    function LoadSurgeryTypes(combo, eventArqs) {
        var item = eventArqs.get_item();
        devicesCombo.set_text("Loading...");

        if (item.get_index() > 0) {
            devicesCombo.requestItems(item.get_value(), false);
        }
        else {
            devicesCombo.set_text(" ");
            devicesCombo.clearItems();
        }
    }
    function LoadProcedureTypes(combo, eventArqs) {
        var item = eventArqs.get_item();
        procCombo.set_text("Loading...");

        if (item.get_index() > 0) {
            procCombo.requestItems(item.get_value(), false);
        }
        else {
            procCombo.set_text(" ");
            procCombo.clearItems();
        }
    }

    function ItemsLoaded(combo, eventArqs) {
        if (combo.get_items().get_count() > 0) {
            // pre-select the first item
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
        combo.showDropDown();
    }

    function OnInsNoneChange() {
        var InsPrivate;
        var InsMedicare;
        var InsMedicaid;
        var InsMilitary;
        var InsState;
        var InsIHS;
        var InsNonUS;
        var InsNone;

        InsPrivate = $telerik.$("[id$='UIInsPrivate']");
        InsMedicare = $telerik.$("[id$='UIInsMedicare']");
        InsMedicaid = $telerik.$("[id$='UIInsMedicaid']");
        InsMilitary = $telerik.$("[id$='UIInsMilitary']");
        InsState = $telerik.$("[id$='UIInsState']");
        InsIHS = $telerik.$("[id$='UIInsIHS']");
        InsNonUS = $telerik.$("[id$='UIInsNonUS']");
        InsNone = $telerik.$("[id$='UIInsNone']");

        if (InsNone[0].selectedIndex == 2) {
            InsPrivate[0].selectedIndex = 2;
            InsPrivate.removeAttr("disabled");
            InsPrivate.css("backgroundColor", "#05EDFF");

            InsMedicare[0].selectedIndex = 2;
            InsMedicare.removeAttr("disabled");
            InsMedicare.css("backgroundColor", "#05EDFF");
            InsMedicaid[0].selectedIndex = 2;
            InsMedicaid.removeAttr("disabled");
            InsMedicaid.css("backgroundColor", "#05EDFF");
            InsMilitary[0].selectedIndex = 2;
            InsMilitary.removeAttr("disabled");
            InsMilitary.css("backgroundColor", "#05EDFF");
            InsState[0].selectedIndex = 2;
            InsState.removeAttr("disabled");
            InsState.css("backgroundColor", "#05EDFF");
            InsIHS[0].selectedIndex = 2;
            InsIHS.removeAttr("disabled");
            InsIHS.css("backgroundColor", "#05EDFF");
            InsNonUS[0].selectedIndex = 2;
            InsNonUS.removeAttr("disabled");
            InsNonUS.css("backgroundColor", "#05EDFF");
        }
        else {
            InsPrivate[0].selectedIndex = 0;
            InsPrivate.attr("disabled", "disabled");
            InsPrivate.css("backgroundColor", "Beige");
            InsMedicare[0].selectedIndex = 0;
            InsMedicare.attr("disabled", "disabled");
            InsMedicare.css("backgroundColor", "Beige");
            InsMedicaid[0].selectedIndex = 0;
            InsMedicaid.attr("disabled", "disabled");
            InsMedicaid.css("backgroundColor", "Beige");
            InsMilitary[0].selectedIndex = 0;
            InsMilitary.attr("disabled", "disabled");
            InsMilitary.css("backgroundColor", "Beige");
            InsState[0].selectedIndex = 0;
            InsState.attr("disabled", "disabled");
            InsState.css("backgroundColor", "Beige");
            InsIHS[0].selectedIndex = 0;
            InsIHS.attr("disabled", "disabled");
            InsIHS.css("backgroundColor", "Beige");
            InsNonUS[0].selectedIndex = 0;
            InsNonUS.attr("disabled", "disabled");
            InsNonUS.css("backgroundColor", "Beige");

}

    }
    function ConfirmDelete(controltovalidate) {
//       var ControlName = document.getElementById(controltovalidate.id);

//       if (ControlName.value == 2) {
//            if (!confirm('All child records will be deleted. are you sure you want to proceed?')) {return false;}
//            if (!confirm('All child records will be deleted. are you sure you want to proceed?'))
//            { return false; }
//            else
//            {return true;}
      // }
    }

</script>
</telerik:RadScriptBlock>

   <telerik:RadAjaxManager ID="CaAjaxManager" runat="server">
    </telerik:RadAjaxManager>

<telerik:RadTabStrip Skin="Office2007" ID="EOCTab" runat="server"
        MultiPageID="mEOCPage" OnClientTabSelecting="ClientTabSelectedHandler"
        OnClientTabUnSelected="ClientTabUnSelectedHandler">
        <Tabs>
            <telerik:RadTab Text="Episode of Care" runat="server" SelectedIndex="0"></telerik:RadTab>
             <telerik:RadTab Text="History & Risk Factors" runat="server"   SelectedIndex="1"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

     <telerik:RadMultiPage ID="mEOCPage" Runat="server" CssClass="width100" SelectedIndex="0">
        <telerik:RadPageView ID="vEOC" runat="server" CssClass="width100">

    <asp:TextBox ID="UITodaysDate" CssClass="hideCode" runat="server"></asp:TextBox>

<telerik:RadPanelBar Skin="Office2007" Width="100%" ID="RadPanelBar1" runat="server">
        <Items>
<telerik:RadPanelItem Value="radpanel2" runat="server" Text="Payor Information" Expanded="true" ImagePosition="Right">
                <Items>
                <telerik:RadPanelItem runat="server" Value="rpiPayor">
                <ItemTemplate>
                <strong>Insurance Payors:</strong>
                <table>
                <tr>
                <td><asp:Literal ID="LInsPrivate" runat="server" Text="Private Health Insurance"></asp:Literal></td><td><asp:DropDownList ID="UIInsPrivate" runat="server"></asp:DropDownList></td>
                <td><asp:Literal ID="LInsMedicare" runat="server" Text="Medicare"></asp:Literal></td><td><asp:DropDownList ID="UIInsMedicare" runat="server"></asp:DropDownList></td>
                <td><asp:Literal ID="LInsMedicaid" runat="server" Text="Medicaid"></asp:Literal></td><td><asp:DropDownList ID="UIInsMedicaid" runat="server"></asp:DropDownList></td>
                <td><asp:Literal ID="LInsMilitary" runat="server" Text="Military Health Care"></asp:Literal></td><td><asp:DropDownList ID="UIInsMilitary" runat="server"></asp:DropDownList></td>
                </tr>

<table>

</telerik:RadPageView>

</telerik:RadMultiPage>
</asp:Content>

answered on 17 Jan 2012, 05:02 PM

Here is the .cs
------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class Acc_EpisodeofCare : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            UIPriorCath.Attributes.Add("onChange", "return OnPriorCathChange();");
        }

    }

protected void UIMostRecCathProcID_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
{

        for (int i = 0; i < 10; i++ )
        {
            RadComboBoxItem itm = new RadComboBoxItem();
            itm.Text = "ProcedureName_" + i.ToString();
            itm.Value = i.ToString();
            UIProcedureID.Items.Add(itm);
        }

}

    protected void UIProcedureID_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        for (int i = 0; i < 10; i++)
        {
            RadComboBoxItem itm = new RadComboBoxItem();
            itm.Text = "ProcedureName_" + i.ToString();
            itm.Value = i.ToString();
            UIProcedureID.Items.Add(itm);
        }

    }
    protected void UIProcedureGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {

    }
    protected void UIProcedure_DeleteCommand(object sender, GridCommandEventArgs e)
    {

    }
    protected void UIProcedureGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {

    }
    protected void UIProcedureGrid_RowDrop(object sender, GridDragDropEventArgs e)
    {

    }
    protected void UIProcedureLookupCombo_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {

}
}

answered on 18 Jan 2012, 09:14 AM

Hi Gauri,

Please try this. Its now working at my end.

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function OnPriorCathChange() {

var PriorCath;

PriorCath = $telerik.$("[id$='UIPriorCath']");

ProcedureLookupCombo = $find("<%= UIProcedureLookupCombo.ClientID %>");

var LastCathDate = $find("<%= UILastCathDate.ClientID %>");

var MostRecCathProcID = $find("<%= UIMostRecCathProcID.ClientID %>");

var NumPriorCath = $telerik.$("[id$='UINumPriorCath']");

var ProcedureID = $find("<%= UIProcedureID.ClientID %>");

if (PriorCath[0].selectedIndex != 1) {

ProcedureLookupCombo.disable();

ProcedureLookupCombo._element.style.backgroundColor = "Beige";

LastCathDate.clear();

LastCathDate.set_enabled(false);

LastCathDate.get_dateInput()._textBoxElement.style.backgroundColor = "Beige";

MostRecCathProcID.disable();

MostRecCathProcID._element.style.backgroundColor = "Beige";

NumPriorCath.attr("disabled", "disabled");

NumPriorCath.css("backgroundColor", "Beige");

NumPriorCath.val('');

ProcedureID.set_enabled(false);

ProcedureID._element.style.backgroundColor = "Beige";

}

else {

if (ProcedureLookupCombo.attr("disabled"))

ProcedureLookupCombo.removeAttr("disabled");

ProcedureLookupCombo.css("backgroundColor", "#05EDFF");

if (LastCathDate.attr("disabled"))

LastCathDate.removeAttr("disabled");

LastCathDate.css("backgroundColor", "#05EDFF");

if (MostRecCathProcID.attr("disabled"))

MostRecCathProcID.removeAttr("disabled");

MostRecCathProcID.css("backgroundColor", "#05EDFF");

if (NumPriorCath.attr("disabled"))

NumPriorCath.removeAttr("disabled");

NumPriorCath.css("backgroundColor", "#05EDFF");

}

</script>

</telerik:RadScriptBlock>

Regards,

Kaushal Jani