Kendo Combobox在过滤时失去了html字段

时间:2015-10-02 11:25:59

标签: javascript html filter combobox kendo-ui

我有一个Kendo Combobox,之前我问过question。过滤工作正常,但在完成过滤后,选择列表中的选项将失去其属性。有什么理由吗?请告诉我。

这是Dojo

过滤前:

<select id="users">
                <option value="1" code="user1" data-message="OK1">User 1</option>
                <option value="2" code="user2" data-message="OK2">User 2</option>
              <option value="3" code="user3" data-message="OK3">User 3</option>
              <option value="4" code="user4" data-message="OK4">User 4</option>

                  </select>

过滤后:

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
< select id="users" data - role="combobox" aria - disabled="false" aria - readonly="false" style="display: none;">
  <option value="2">User 2</option>// lost code and data-message
      <option value="3">User 3</option> // lost code and data-message
          </select>
&#13;
&#13;
&#13;

干杯。

更新 问题是控件已经在服务器端初始化,我只是在客户端执行过滤。如果不重新初始化控件,是否无法执行过滤?

1 个答案:

答案 0 :(得分:1)

我可能会采取一种稍微不同的方法并按照这种方式进行。

  • 为组合框项目创建模板
  • 从某处加载数据(在我刚刚在JS中创建了一个数组的例子中。
  • 创建Kendo Combobox并分配数据源和模板。
  • 对数据执行过滤

Example Dojo here

<!-- Template for Combobox Items -->  
<script id="template" type="text/x-kendo-template">

  <span value="#: value #" code="#: code #" data-message="#: message#">#: displayText #</span>
</script>

  <!-- Element to convert to Kendo Combobox -->

  <div id='users'></div>


          <script>
            // Data for the ComboBox
            var data = [{value: "1", code: "user1", message:"OK1", displayText: "User 1"},
                       {value: "2", code: "user2", message:"OK2", displayText: "User 2"},
                        {value: "3", code: "user3", message:"OK3", displayText: "User 3"},
                        {value: "4", code: "user4", message:"OK4", displayText: "User 4"}
                       ]



              $(document).ready(function() {

                // Create the ComboBox 
                $('#users').kendoComboBox({

                  dataSource: data,
                  dataTextField: "displayText",
                  dataValueField: "value",
                  template: kendo.template($("#template").html())

                });

                //filtering
               var _flt = { logic: "or", filters: [] };

                _flt.filters.push({ field: 'value', operator: "contains", value: "2" });
                _flt.filters.push({ field: 'value', operator: "contains", value: "3" });

                $('#users').getKendoComboBox().dataSource.filter(_flt);
                //select the first item
                $('#users').getKendoComboBox().select(0);



              });

          </script>