1

Kendo UI kendoDatePickerウィジェットをテキストボックスから削除する方法を説明するいくつかの回答をここhttp://www.kendoui.c​​om/forums/ui/general-discussions/method-for-removing-controls.aspxとここhttp ：で見つけました。 //www.kendoui.c​​om//forums/ui/date-time-pickers/datepicker-becomes-static.aspx

残念ながら、NumericTextBoxのプロパティを削除しようとすると、上記の例は役に立たないようです。私は以下のソースに行き着きました。

var numericTextBox = $(selector).data("kendoNumericTextBox");
    var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
            : numericTextBox.element;

    // unwrap element
    var input = numericTextBox.element.show();
    input.removeClass("k-input").css("width", "12.4em");
    input.removeClass("numerictextbox");
    input.insertBefore(numericTextBox.wrapper);

    numericTextBox.wrapper.remove();

    input.removeAttr("data-role");
    input.removeAttr("role");

最終的には単純なテキストボックスのようなテキストボックスになりますが、それでも数字以外のものを追加することは許可されていません。さらに、input.removeData（ "kendoNumericTextBox"）;という行も追加してみました。これは私が上に投稿したリンクで提案されているものに近いですが、この行が何をしているのか特定できませんでした。

4

1 に答える 1

2

テキストから数値に、またはその逆に変換するウィジェット装飾をいじる代わりに、両方を持ち、常にどちらかを非表示にする方がはるかに簡単です。クラスを追加/クラスを削除して、正しいクラスを表示するだけです。

次の CSS 定義があるとします。

.ob-hide {
    display: none;
}

次の HTML:

<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>

次に、私の JavaScript は次のようになります。

$("#combobox").kendoDropDownList({
    dataSource: {
        data: [ "string", "number" ]
    },
    value     : "string",
    change    : function (e) {
        console.log("change");
        if (this.value() === "string") {
            console.log("string");
            $("#number").closest(".k-numerictextbox").addClass("ob-hide");
            $("#text").closest(".k-autocomplete").removeClass("ob-hide");
        } else {
            console.log("number");
            $("#number").closest(".k-numerictextbox").removeClass("ob-hide");
            $("#text").closest(".k-autocomplete").addClass("ob-hide");
        }
    }
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});
于 2013-02-11T09:55:53.717 に答える