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

Disable Control/Set id property

4 Answers 5 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 01 Oct 2020, 03:24 PM

I want to disable a combobox.  I have my example below.  The only way I see to do it is through a script, also shown.  If this script isn't the best way I'm open to suggestions.

However, for my script to work I need to know the id of the control.  My approach was picked up off other posts but doesn't seem to do anything.

ComboBox:

@(Html.Kendo().ComboBoxFor(x => x.Item.CountryCode)
    .Placeholder("Select Country...")
    .DataTextField("Name")
    .DataValueField("Code")
    .Filter(FilterType.Contains)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetCountries", "Persons");
        });
    })
    .HtmlAttributes(new { style = "width: 100%", @id = "countryCodes" }))

 

What I get when I press F12 and get the source in the browser:

<span class="k-widget k-combobox k-combobox-clearable" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input name="Item.CountryCode_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" placeholder="Select Country..." style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="countryCodes_listbox" aria-busy="false" aria-activedescendant="79fa18f7-e213-4d76-be7a-e4eb980f85f2"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="countryCodes_listbox"><span class="k-icon k-i-arrow-60-down"></span></span></span><input id="countryCodes" name="Item.CountryCode" style="width: 100%; display: none;" type="text" value="" data-role="combobox" aria-disabled="false" aria-readonly="false"></span>

 

Form definition & Script:

<form asp-action="Edit" asp-all-route-data="routeKeys" onsubmit="onSubmit()">
...
 
<script>
 
    function onSubmit(e) {
 
        $("#name").attr("disabled", true);
        $("#Item_CountryCode").attr("disabled", true);
...

 

4 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 01 Oct 2020, 03:27 PM
Disregard.  Such a thorough post... so thorough I see that the id value is actually in the result set.  lol
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 01 Oct 2020, 08:31 PM

Actually, don't disregard. I picked this from the same example above.  Performing a "disable" on "countryCodes" does nothing.  I need it to prevent keyboard entry and prevent the drop-down. 

Not only do I need to disable a ComboBox, but I need to disable CheckBox, DatePicker and NumberTextBox.  The picker on the right side of each of these controls does not get disabled.  How do I do this?

<span class="k-widget k-combobox k-combobox-clearable" style="width: 100%;">
  <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
    <input name="Item.CountryCode_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" placeholder="Select Country..." style="" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="countryCodes_listbox" aria-busy="false" aria-activedescendant="c992e6b3-cbbc-479d-946a-4865b2e12cc4">
      <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
      <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="countryCodes_listbox">
        <span class="k-icon k-i-arrow-60-down"></span>
      </span>
  </span>
  <input id="countryCodes" name="Item.CountryCode" style="width: 100%; display: none;" type="text" value="US" data-role="combobox" aria-disabled="false" aria-readonly="false" disabled="disabled">
</span>

 

 

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 05 Oct 2020, 09:21 PM

So, what I was trying to do... overall... is to prevent duplicate post-backs.  So, this was an attempt to disable the form.  I found a work around.  Seems like a simple control that Telerik could build.  Here is my code:

IsBusy.css

.isbusy {
    position: fixed;
    z-index: 99;
    opacity: .7;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
}
 
.isbusy > img {
    width: 100px;
    opacity: 1;
}

Button Click: showIsBusy()

<div class="row">
    <div class="col-md-4">
        <form name="form" asp-action="Edit" asp-all-route-data="@routeKeys">

 

...
            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-default" onclick="showIsBusy()" />
                <input type="button" value="Cancel" onclick="history.go(-1)" class="btn" />
            </div>
        </form>
    </div>
</div>
 
<div class="isbusy" id="isbusy">
    <img src="~/images/IsBusy.gif" alt="Processing..." />
</div>
 
<script>
 
    $(document).ready(function () {
 
        $("#isbusy").hide();
    });
 
    function showIsBusy() {
        //alert("isBusy");
        $("#isbusy").show();
        $("form").submit();
    }
 
</script>

 

 

 

 

0
Ivan Danchev
Telerik team
answered on 06 Oct 2020, 11:56 AM

Hello Joel,

The editor components (ComboBox, Pickers, etc.) can be disabled initially through the Enable configuration:

.Enable(false)

As for disabling them after initialization, this can be done through the enable API method. For example:

var combobox = $("#combobox").data("kendoComboBox");
combobox.enable(false);

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ComboBox
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Ivan Danchev
Telerik team
Share this question
or