Telerik Forums
Kendo UI for jQuery Forum
5 answers
1.1K+ views

We have 2 weird problems in MultiSelect when autoClose is set to false. They were reproduced in the following example: http://dojo.telerik.com/InicU

Problem 1: Delete input text keeps the items selected

Steps to Reproduce: 

1.Write in the text "le", and then click "enter"

2. Erase in the text everything. The item "Lebanon" remains selected

Problem 2: the entered text remains

Steps to Reproduce:

1. Write in the text "le", and then click "enter". The item "Lebanon" is selected (which is correct), but the text "le" remains (which should be removed)

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 answered on 10 May 2023
1 answer
102 views

I have a kendo multiselect with virtualization set to true. I want to clear out the data from the search input after each item is selected so the user can start a new search. I tried this solution but found a bug. In my example, if the user selects 1 and then 20, the selected items get cleared and the multiselect becomes unusable from that point forward. The x won't clear anything and you can't select anything. How do I fix this?

Here is a dojo showing the problem

Failed Attempt:
I attempted to fix this by adding .trigger("input") to the e.sender.input.val("") line but that ends up creating duplicates of the same item selected and causes occasional errors like this in the console and doesn't clear the box: 

Uncaught TypeError: r.select(...).done is not a function
    at init._removeTag (kendo.all.js:311085:87)
    at HTMLSpanElement.<anonymous> (kendo.all.js:311085:87)
    at Function.each (jquery.min.js:2:2976)
    at fn.init.each (jquery.min.js:2:1454)
    at init._clearValue (kendo.all.js:311085:87)
    at HTMLSpanElement.dispatch (jquery.min.js:2:43090)
    at v.handle (jquery.min.js:2:41074)

 

Neli
Telerik team
 answered on 10 May 2023
1 answer
201 views

I have been asked to make the filter input (search box) appear at the top of the dropdown list in a multiselect exactly like it does in the dropdownlist component. Is there a way to move the filter input out of the box at the top and into the search area? The expected behavior is this:

  1. User clicks on the dropdownlist (or the down arrow)
  2. The list opens displaying a search (filter) input at the top just like the dropdownlist does.
  3. User types in the filter and the list filters the results.
  4. User clicks on one of the items and it adds a chip above.
Georgi Denchev
Telerik team
 answered on 10 May 2023
1 answer
1.0K+ views

Extension of below question  

For reference link bellow: https://www.telerik.com/forums/how-to-set-data-attribute-for-multiselect-dropdown-li-element#5647546

Neli
Telerik team
 answered on 28 Apr 2023
1 answer
311 views

I would like to disable partly multiselect dropdown li elements on basis of specific condition. To achieve this I tried to set data attributes on li elements  and check that data while rendering these li elements and apply CSS to disable it. But neither I find any related data in data object returned by KendoMultiselect nor in documentation.

$(itemIdservicetypes).on('change', function (e) {
			// Here we can get the value of selected item
			var seletctedValueST = $(itemIdservicetypes).data("kendoDropDownList").text();
			var data = $(itemIdSIMultiSelect).data("kendoMultiSelect");

			data.ul.children().each(function () {
				if (seletctedValueST == $(this).data("ServiceType") {
					$(this).addClass("k-disabled");
				} else {
					$(this).removeClass("k-disabled");
				}
			})

		});
Appreciate your help.

 

Georgi Denchev
Telerik team
 answered on 21 Apr 2023
1 answer
61 views

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/checkboxes/ (looking to implement something like this but with Kendo UI for jQuery)

I am looking to implement a multi-select with checkboxes. I found kendo provides an option for Angular, but I am looking to see if this is provided with Kendo UI for jQuery, if so, any documentation I can look into?

I am also looking to add, a Select All checkbox which will select all options if checked, if unchecked, need to unselect all the options. Is there any built-in functionality to achieve this?

 

Neli
Telerik team
 answered on 24 Mar 2023
1 answer
246 views
I have a requirement to align the selected chips to the right of a kendo multi select's k-input-values block. The issue I have is that there is a hidden input field in the last position. I attempted to remedy this by adding flex-direction: row-reverse to the k-chip-list class, however that makes all the selected items appear in reverse order which the client doesn't like. Is there a way to right align the chips without changing their order?
Martin
Telerik team
 answered on 14 Mar 2023
1 answer
520 views

Hi, I recently created a grid with a multiselect filter and noticed that the selected values are not showing if the user selects more than one item and then filters. I could reproduce the behaviour in a short dojo script which comes from the telerik examples.

Is there any reason for this behaviour or did I forget something that makes the filter control fail? If this is a bug, is there a workaround?

In the example, the field that contains the filter is "Name" (2nd column).

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <div id="grid"></div>
    <script>
      var data = [
        { id: 1, name: "Fred", key: 1, value: "Green" },
        { id: 2, name: "Jed", key: 11, value: "Jorgensen" },
        { id: 3, name: "Red", key: 2, value: "Blah" },
        { id: 4, name: "Ted", key: 23, value: "Bleh" },
        { id: 5, name: "Ed", key: 3, value: "Toast" },
        { id: 6, name: "Zed", key: 4, value: "Smith" },
        { id: 7, name: "Ed", key: 41, value: "Johnson" }
      ];

      $(function() {
        var names = _.sortBy(_.uniq(_.pluck(data, "name")), function(n) { return n; });

        function createMultiSelect(element) {         
          element.kendoMultiSelect({
            dataSource: names
          });
        }

        var dataSource = new kendo.data.DataSource({
          data: data,
          schema: {
            model: {
              fields: {
                id: { type: "number" },
                name: { type: "string" },
                key: { type: "number" },
                value: { type: "string" }
              }
            }
          }
        });

        var grid = $("#grid").kendoGrid({
          dataSource: dataSource,
          sortable: true,
          filterable: true,
          columns: [
            {field: "id", title: "Id"},
            {
              field: "name",
              title: "Name",
              filterable: {
                ui : createMultiSelect,
                extra: false
              }
            },
            {field: "key", title: "Key"},
            { field: "value", title: "Value"}
          ]
        });
      });
    </script></body>
</html>
Martin
Telerik team
 answered on 16 Feb 2023
1 answer
185 views

I am trying to move away from using select2 multi-select. Ideally, I would like to call a function that returns the value for the kendo multi-select during initialization. The value will be retrieved by an AJAX call. Is there any way I could implement this? I tried using dataBound, but it looks like anything inside the data-bound will be called every time user clicks on the multi-select control. 

During initialization, I don't want to call the dataSource. This will be updated every time user clicks open. I just need to update the value field based on the AJAX result.
$("#multiselect").kendoMultiSelect({
  dataSource: {
    transport: {
      read: {
        url: "https://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    }
  },
  open: function(e){
    // datasource is dynamic and should be updated with every click.
    $('#multiselect').data('kendoMultiSelect').dataSource.read();
  },
  dataTextField: "ProductName",
  dataValueField: "ProductID",
  autoBind: false,
  value: "IS IT POSSIBLE TO GET DATA FROM AJAX DURING INITIALIZATION?"
});
Is this possible with telerik multiselect?
Martin
Telerik team
 answered on 17 Jan 2023
2 answers
223 views

Hi,

I have a requirement for a multi-select drop down within each cell of a specific column within a Kendo spreadsheet control.

Is this possible? I can't find any documentation around this. I would be really appreciative if someone could help me with code samples/demos

Thanks

Ian

Ian
Top achievements
Rank 1
Iron
 answered on 07 Nov 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?