Kendo Combobox losing html fields on filtering

Question

I have a Kendo Combobox and I have asked this question earlier. The filtering works fine but after the filtering is done, the options in the select list lose their attributes. Any reason why? Kindly let me know.

Here is the Dojo for that.

Before Filtering:

<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>

After Filtering:

<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>

Cheers.

Update: The issue is that the control is already initialized server-side and I am just performing the filtering on the client side. Is there no way to perform the filtering without re-initializing the control all over again?

score 1 · Answer 1 · answered Oct 02 '15 at 13:28

I would probably take a slightly different approach and do it this way.

Create a template for the combobox items
load the data from somewhere (in the example I have just created an array in JS.
create the Kendo Combobox and assign the datasource and template.
perform the filtering against the data

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>

hello @codingbadger, thanks for your answer. The issue is that the control is already initialized server-side and I am just performing the filtering on the client side. Is there no way to perform the filtering without re-initializing the control all over again? — Neophile, Oct 05 '15 at 11:10
Not too sure what you mean by initialised server side? Are you using the MVC wrappers ? — codingbadger, Oct 05 '15 at 19:06
As in they have been done on the server-side (I dont have control over it) and all I can do is manipulate it client side. Do you reckon you could help me with a client side solution for this please? — Neophile, Oct 07 '15 at 13:27
By server-side I mean, just do `$('#users').kendoComboBox().data("kendoComboBox");` for initialization and then imagine that the select list is converted into a comboBox. Now once we have this, run through my code in the Dojo and try to achieve the same without losing HTML attributes. — Neophile, Oct 08 '15 at 00:22
This is not possible. When you convert the already defined `select` element to a kendo ComboBox it does not copy all attributes across to the new Kendo element. You would have to do this manually. — codingbadger, Oct 12 '15 at 10:09

Kendo Combobox losing html fields on filtering

1 Answers1