получить значение из входного кендо ComboBox с помощью JQuery

Question

получить значение из входного кендо ComboBox с помощью JQuery

0

Я использую kendo comboBox в своем приложении, и мне нужно получить значение и идентификатор записи из ComboBox, вне фактической функции ComboBox.... Я использую выпадающее меню comboBox в таблице для каждой записи, поэтому я не могу передать идентификатор css для получения значения comboBox... Мне удалось достичь ввода comboBox выбранной записи, и я сделал этот тест, применив цвет фона к нему. Я тестировал.val(), который отлично работает только для ввода текстового поля, но его не происходит для kendo ComboBox...

Большое спасибо

вход

  <td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkSchemeId_Input" })  </td>

Функция ComboBox

 $("._MarkSchemeId_Input").kendoComboBox({
        minLength: 1,
        filter: 'contains',
        dataTextField: "Name",
        dataValueField: "ID",
        dataSource: {
            type: "json",
            serverFiltering: false,
            transport: {
                read: "/Qualification/GetAllMarkScheme_JSON"
            },
        },
        change: function () {

           alert("value " + this.value() + "   " + this.text());                      
        }
    });

Функция jQuery

$("#ElementTable").on("click", ".k1-grid-confirm", function () {


   $(this).closest('table').find("._MarkSchemeId_Input").css("background", "red");

   var a1 = $(this).closest('table').find("._MarkSchemeId_Input").text(); // doesn't work

        alert("a1  " + a1);
 .....

toxic 01 апр. 2014, в 10:59

Источник

Теги:

javascript

jquery

kendo-ui

kendo-combobox

3 ответа

Ещё вопросы

Vojtiik · Answer 1 · 2014-04-01T06-35-00.000Z

3

Взгляните на демо Kendo, на самом деле это точно показывает, что вас интересует

 var fabric = $("#fabric").data("kendoComboBox");
                var select = $("#size").data("kendoComboBox");
                $("#get").click(function() {
                    alert('Thank you! Your Choice is:\n\nFabric ID: ' +   fabric.value() + ' and Size: ' + select.value());
                });

Поиск значения в вашем примере не работает, потому что вы вызываете метод в элементе html, а не в элементе управления Kendo. Рассмотрим этот пример:

$("#combobox").kendoComboBox({
  dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.value("Oranges");

Поэтому в вашем случае выполните следующие действия:

$(this).closest('table').find("._MarkSchemeId_Input").data("kendoComboBox").text()

Vojtiik 01 апр. 2014, в 06:35

0

Я использую data.kendo и использую value () вместе с ним для получения текста, но мое оповещение даже не вызывает .... так как у меня есть особенность, я использую класс с кендо ComboBox, так как у меня есть несколько его экземпляров в таблице ... вот мой код ... var ComboData = $ (this) .closest ('table'). find ("._ MarkSchemeId_Input"). data ("kendoComboBox"); alert (">>>" + ComboData.value ());
Toxic 01 апр. 2014, в 09:37
0

Поместите отладчик в метод «нажми» и посмотри, что селектор возвращает тебя в консоль. По звуку вы не назначаете событие правильно или JS ошибка перед предупреждением. find () может возвращать более одного элемента, в этом случае вы используете индексатор для выбора конкретного элемента. $(this).closest('table').find("._MarkSchemeId_Input")[0]
Vojtiik 01 апр. 2014, в 09:48
0

Я пробовал следующую строку, и CSS применяется только к выбранным входным данным comboxBox, что означает, что это находит запись ввода !! верный?? $ (this) .closest ('table'). find ("._ MarkSchemeId_Input"). css ("background", "red");
Toxic 01 апр. 2014, в 09:53
0

я скучаю по какой-либо библиотеке ??? это так запутанно
Toxic 01 апр. 2014, в 10:05
0

Сначала попытайтесь повторить то, что показано в демонстрации кендо, и начните с этого - вы можете отредактировать их пример, чтобы он стал хорошей отправной точкой. Если ваш комбобокс выглядит как комбобокс, вы ничего не упускаете. Сосредоточьтесь на селекторе, поскольку ваше событие не стреляет!
Vojtiik 01 апр. 2014, в 10:34
0

Хорошо, я нашел проблему, если я использую <input class = "._ MarkSchemeId_Input", тогда она не работает, но она работает с id = "._ MarkSchemeId_Input" СЕЙЧАС моя проблема в том, что у меня есть несколько экземпляров кендо ComboBox ...
Toxic 01 апр. 2014, в 10:58
0

у меня есть ответ на мой вопрос, как указано выше
Toxic 01 апр. 2014, в 15:15
0

Извините, что вы имеете ввиду ? надеюсь, я помог вам, и ваш комбобокс теперь работает как положено?
Vojtiik 01 апр. 2014, в 15:27
0

нет, я имею в виду хороший способ ... ваше руководство было очень полезным, и это привело меня к моему ответу ... большое спасибо
Toxic 02 апр. 2014, в 14:19

Показать ещё 7 комментариев

George K · Answer 2 · 2014-04-01T10-29-00.000Z

По дизайну виджет ComboBox копирует все стили и классы CSS из исходного элемента в видимый вход. Это описано здесь. Если вы просмотрите вынесенный HTML, он будет выглядеть так:

исходный элемент + код инициализации

    <input class="custom-class" />
    <script>
        $(function() {
            $(".custom-class").kendoComboBox();
        });
    </script>

результаты в этом HTML-формате

    <span class="k-widget k-combobox k-header custom-class">
      <span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default">
        <input class="k-input custom-class" type="text" autocomplete="off" style="width: 100%;">
        <span tabindex="-1" unselectable="on" class="k-select">
          <span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">
            select
          </span>
        </span>
      </span>
      <input class="custom-class" data-role="combobox" style="display: none;">
    </span>

Как вы можете видеть, пользовательский класс копируется в элемент оболочки и на видимый вход. Из-за этого вам нужно будет использовать более конкретный селектор, чтобы найти только исходные элементы ввода:

$(".custom-class[data-role=combobox]");

Обратите внимание, что это вернет список элементов ввода. Если вам нужно получить выбранные элементы данных, вам нужно будет их закодировать и получить экземпляр combobox для каждого элемента ввода.

Здесь я подготовил простую демонстрацию jsBin, в которой показано, как это сделать.

мое требование - получить только выбранное 1 при событии щелчка, и мне удалось достичь этого с помощью jQuery $ (this) .closest ('table'). find ("._ MarkSchemeId_Input"). css ("background", "red");

toxic · Answer 3 · 2014-04-01T13-13-00.000Z

Мне удалось решить проблему следующим образом:

<td class="N_td">@Html.TextBox("Input_MarkingSchemeTitle_Element", null, new { id = @item.ElementID + "_EMST", @class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3 _MarkScheme_Input" })  </td>


 //--get all the MarkScheme from database and put in drop-down 
    $("._MarkScheme_Input").kendoComboBox({
        minLength: 1,
        filter: 'contains',
        dataTextField: "Name",
        dataValueField: "ID",
        dataSource: {
            type: "json",
            serverFiltering: false,
            transport: {
                read: "/Qualification/GetAllMarkScheme_JSON"
            },
        },
        change: function () {

           // alert("value " + this.value() + "   " + this.text());                      //if it need to test selected record data...    
      }
    });


 $("#ElementTable").on("click", ".k1-grid-confirm", function () {


        $(this).closest('table').find("._MarkScheme_Input").css("background", "red");

        //read all the input 'comboxBox' in loop...
        //var _comboBoxInput = $(this).closest('table').find("._MarkScheme_Input").filter("[data-role=combobox]");
        //_comboBoxInput.each(function (idx, input) {
        //    alert("idx " + idx + "  \n input " + input);
        //    var combobox = $(input).data("kendoComboBox");
        //    alert("ID>>>  : " + combobox.value() + ", Text: >>> " + combobox.text());
        //});

        //-------------------------
        var input = $(this).closest('table').find("._MarkScheme_Input");
        var comboboxInput = input.filter("[data-role=combobox]");
        var combobox = comboboxInput.data("kendoComboBox");
        var selectedText = combobox.text();
        var selectedValue = combobox.value();
        var dataItem = combobox.dataItem();

        alert("ID>>>  : " + selectedValue + ", Text: >>> " + selectedText);