Disable the RadDropDownList using Javascript

[Swanand]

Hi,

I am facing troubles disabling a RadDropDownList using Javascript. The given RadDropDownList is being added as a control from back code file with an ID as shown in attachment.

I am accessing the the element by ID on client side as shown in the attachment. 

I have tried a few suggestions like h.disable(); h.disabled = true; h.enable = false; from various online help sources but none of them seemed to work.

Can someone please help me find a way to disable the control?

I want it to work without having to disable the pointer methods to the block.

 

Thanks in advance,

Swanand Nalawade

 

 

 

 

[Vessy]

Hi Swanand,

You can disable the DropDownList by passing "false" to its set_enabled()  client-side method:

        <telerik:RadButton ID="RadButton1" runat="server" Text="Disable the dropdown" AutoPostBack="false" OnClientClicked="disableDropdown"></telerik:RadButton>

        <script>
            function disableDropdown(e) {
                $find("RadDropDownList1").set_enabled(false);
            }
        </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadDropDownList rdd = new RadDropDownList();
            rdd.ID = "RadDropDownList1";
            rdd.Enabled = true;
            rdd.Width = Unit.Pixel(600);

            DataTable dt = GetData();
            int colIndex = dt.Columns.IndexOf("Description");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                DropDownListItem ddli = new DropDownListItem();
                ddli.Value = dt.Rows[i].ItemArray[colIndex].ToString();
                ddli.Text = dt.Rows[i].ItemArray[colIndex].ToString();
                rdd.Items.Add(ddli);
            }
            Page.Form.Controls.Add(rdd);
        }

    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Description");

        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add("Description_" + i);
        }

        return dt;
    }

 

In addition, I would like to kindly ask you to paste any code snippets as text, so we can easily copy and test them. You can paste it directly into the message reply, use the "Format code Block tool", or attach a text file containing the snippet. Thank you in advance for your understanding an cooperation.

 

Regards,
Vessy
Progress Telerik

[Swanand]

Hi Vessy,

 

The ID of my RadDropDownList is generated by my code based on it's configuration ID and it changes over multiple records.

I have 2 variables in my script that fetches the clientID and serverID of the radDropDown.

$find() doesn't fetch me element for either of them.

I tried using document.getelementbyID or document.getelementbyNames.

ByID: I could access the element. But it doesn't have set_enabled function in it.

ByName: element is undefined

 

Can you guide me through this issue please?

Thanks in advanced.

Swanand Nalawade

[Vessy]

Hi Swanand,

The set_enabled() function is a method of the DropDownList client-side object of the control this is why it is not found when called for an html element (which is returned by the standard  There are several possible things that can prevent be breaking the $find() functionality:

• if $find() is called too early and the target object is still not initialized
• if the passed ID does not match the actual ID of the control's main element

You can easily test if any of the above is the problem by disabling the DropDownList in its client-side OnLoad handler. You can also check the actual ID of the control here:

        <script>
            function onDropDownListLoad(ddl, args) {
                var dropDownListId = ddl.get_id();
                alert("The actual client ID of the DropDownList object is: " + dropDownListId);
                ddl.set_enabled(false);
            }
        </script>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadDropDownList rdd = new RadDropDownList();
            rdd.ID = "SomeRandomId_" + DateTime.Now.Millisecond;
            rdd.Enabled = true;
            rdd.Width = Unit.Pixel(600);
            rdd.OnClientLoad = "onDropDownListLoad";

            DataTable dt = GetData();
            int colIndex = dt.Columns.IndexOf("Description");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                DropDownListItem ddli = new DropDownListItem();
                ddli.Value = dt.Rows[i].ItemArray[colIndex].ToString();
                ddli.Text = dt.Rows[i].ItemArray[colIndex].ToString();
                rdd.Items.Add(ddli);
            }
            Page.Form.Controls.Add(rdd);
        }

    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Description");

        for (int i = 0; i < 10; i++)
        {
            dt.Rows.Add("Description_" + i);
        }

        return dt;
    }

Regards,
Vessy
Progress Telerik