Applying k-state-disabled class to text inputs - Kendo UI

Question

Here is my jsfiddle demo.

    <div id="example" class="k-content">
        <div class="demo-section">
            <p>
                <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
            </p>

            <p>
                <label>Text:</label><input id="textboxtest" type="text" class="k-textbox" disabled="disabled" value="test" style="width: 300px" />
            </p>
        </div>
    </div>
<script>
$(document).ready(function() {
    var products = $("#products").kendoComboBox({
        cascadeFrom: "categories",
        filter: "contains",
        placeholder: "Select product...",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            data: [{"ProductName": "ProductName1", "ProductID": "1"}, {"ProductName": "ProductName2", "ProductID": "2"}]
        },
        index: 0
    }).data("kendoComboBox");
});
</script>

As you see the disabled text input is visually different from the kendoComboBox widget. Is there a way to add or remove k-state-disabled class to text inputs when the disabled state changes in application scope? I want to have the same behaviour as widgets for my text inputs.

score 27 · Accepted Answer · edited Oct 07 '14 at 19:31

27

I think that easiest and more portable way of doing it is by adding / removing k-state-disabled when you set the disabled property value.

Example for enabling you textbox:

$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");

for disabling it:

$("#textboxtest").prop("disabled", true).addClass("k-state-disabled");

Your JSFiddle modified with two buttons for enabling / disabling it http://jsfiddle.net/KrW6f/5/

Edit: Another possibility is defining the field as an autocomplete without a dataSource. Then you actually not need to define any CSS class. Your input field definition would be:

<input id="textboxtest" data-role="autocomplete" type="text" disabled="disabled" value="test" style="width: 300px" />

And you can see it in this other JSFiddle: http://jsfiddle.net/OnaBai/94HDF/2/

edited Oct 07 '14 at 19:31

Kylok

767
6
15

answered Dec 10 '13 at 10:58

OnaBai

40,767
6
96
125

But I have to call this piece of code, after all possible changes of states of textboxes. And some part of my textboxes are loading dynamically by ajax calls. – xkcd Dec 10 '13 at 12:02
Is this acceptable for you http://jsfiddle.net/OnaBai/94HDF/1/? I know that it requires two instructions but you are not adding so much logic to the code. – OnaBai Dec 10 '13 at 14:26
Yes @OnaBai you're right. I know this piece of code works fine but I'm looking for a more generic way to do that. Think of a detailed ui with lots of text inputs and lots of logic that triggers enabling / disabling. Because of this I don't want to add addClass / removeClass lines for each case or call another function for this purpose. Shortly I want a texbox that works like the combobox widget. I wonder if it's possible using kendo ui framework. – xkcd Dec 10 '13 at 14:59
There are two options: 1) Create your own widget, might seem too much but it is not that complicate but of course you need to write code. 2) Defining the `input` as an `autocomplete` with no `dataSource` (see this here: http://jsfiddle.net/OnaBai/94HDF/2/ – OnaBai Dec 10 '13 at 15:27
The second one is so practical. I think I'll go by there. Thanks a lot. – xkcd Dec 10 '13 at 16:09

score 0 · Answer 2 · answered Dec 10 '13 at 11:03

0

If you need to do this in the on ready then this might help:

if ($('#textboxtest').attr('disabled')=='disabled')
    $('#textboxtest').addClass('k-state-disabled');
else
    $('#textboxtest').removeClass('k-state-disabled');

answered Dec 10 '13 at 11:03

MohQut

206
2
10

But I have to call this piece of code, after all possible changes of states of textboxes. And some part of my textboxes are loading dynamically by ajax calls. – xkcd Dec 10 '13 at 12:02
As a follow up to your conversation with @OneBai if you want to go with text boxes you can select them all like this `($('.k-textbox').addClass("k-state-disabled"))` or `($('input[type=text]').addClass("k-state-disabled"))`, this way you do not have to select each text box by id – MohQut Dec 11 '13 at 05:51

Applying k-state-disabled class to text inputs - Kendo UI

2 Answers2

Linked