Questions on Kendo UI for jQuery Forum

1 answer

60 views

Change autoclose property of multiselect through Javascript after initialization?

I have a form with a bunch of kendo multiselects and I want to give the user the ability to change the "autoclose" property. Is there anyway to update the control after it was initialized through JavaScript to change the "autoclose" property?

MultiSelect

answered on 25 Aug 2022

1 answer

87 views

Kendo Multi Select AJAX POST Request

Hi,

I want to create the kendo multi-select using jquery ajax. Using ajax I have sent the request to the server every time when a user types a letter in multi-select. So for that, I have created this Script that is attached below :-

var searchTerm = params.term && params.term != "" ? params.term : islNewsArticle2LastSearchTerm;

var payload ={
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
};


var new1 = new kendo.data.DataSource({
  transport: {
                    read: function(s) {
                        $.ajax({
                             delay: 350, // wait 250 milliseconds before triggering the request
                             url: "https://"+'@Session.OrgUrl~'+"/searchapi/taskviews/tasklist",
                             type: "post",
                             data: JSON.stringify(payload),
							 dataType: 'json',
							 contentType: "application/json",
							 beforeSend: function(req) {
           req.setRequestHeader('Authorization', "Bearer @Session.AuthToken~");
       },           
        processResults: function (data) {   
                //console.log("results: "+data.results.length);
                var res = [];
                if(data && data.results){
                    for(var i  = 0 ; i < data.results.length; i++) {
                        res.push({id: data.results[i].objectId, text: data.results[i].title});
                    }
                }
                return {
                    results: res
                }
            },
			complete: function(){
            }
                        });
                    }
                }
});
$("#islTasks").kendoMultiSelect({
        placeholder: "Select Tasks...",
        filter: "contains",
        autoBind: false,
    dataValueField: "objectId",
    dataTextField : "title",
    dataSource : new1
});

Now I am not able to select the value that which user types in multi-select. So Can anybody help me with this how can I get the multi-select value using jquery and pass it to the variable payload inside "q"

The basic functionality I want is that when a user searches any term a request sends to the server. This is the payload data that i have to passv i.e,

{
  "valueFilters": [
    {
      "field": "preDistLocationIds",
      "values": [
        "2787"
      ]
    },
    {
      "field": "distLocationIds",
      "values": []
    },
    {
      "field": "createdByLocationLevelId",
      "values": []
    },
    {
      "field": "taskLevelId",
      "values": [
        "118"
      ]
    }
  ],
  "rangeFilters": [
    {
      "greaterThanOrEqual": "2022-06-11",
      "field": "startDate"
    },
    {
      "lessThanOrEqual": "2022-07-11",
      "field": "endDate"
    }
  ],
  "sorts": [],
  "limit": 50,
  "q": '+searchTerm+ '
}

Here q in the last include the value that which user search. Can anybody help me with this

MultiSelect

answered on 18 Jul 2022

0 answers

40 views

kendo.all.min.js:9 multiselect cannot read property 'style' of undefined at init._adjustListwidth

kendo.all.min.js:9 multi-select cannot read property 'style' of undefined at init._adjustListwidth

MultiSelect

asked on 16 Jul 2022

2 answers

434 views

Kendo MultiSelect won't stay open on first selection only

Using Kendo UI for ASP.MVC with jQuery, version 2022.1.301. Here are the steps:

Click in multi select
Drop down appears
Select any item
Drop down closes - This is the issue
Click in the multi select again
Drop down appears
Toggle any item(s) on or off and it will now stay open and work perfectly fine!
Click outside the multiselect and it closes as expected

The issue is step 4. I have been debugging through kendo.all.js and I can provide a small bit of inside. The issue lies at line 64,761 which is a function called _inputFocusout. When I click in the multiselect in step 1, the input box is focused and the cursor is blinking. When I click in it the second time the cursor doesn't show, rather "1 item(s) selected" is showing. So the focus out event doesn't happen now, and it works.

Oddly this works in the demos but I can't see anything I am doing wrong.

@(Html.Kendo().MultiSelectFor(m => m.SelectedEmployees)
   .AutoBind(true)
   .AutoClose(false)
   .BindTo(employeesSmall)
   .DataTextField("NameFirstLast")
   .DataValueField("Id")
   .Name("employees")
   .TagMode(TagMode.Single)
)

MultiSelect

answered on 15 Jul 2022

1 answer

250 views

Using MultiSelect column to achieve Mutli Column design

Hi,

I was researching available control in Kendo to achieve my requirements it seems that multi-select control is what I need. but I am unsure how i do the templating for the control. my markup for the dropdown is

<select id="users">
<option value="1" data-email="abc@email.com">User 1</option>
<option value="2" data-email="12@email.com">User 2</option>
<option value="3" data-email="adc@email.com">User 3</option>
<option value="4" data-email="anmf@email.com">User 4</option>
</select>

what I wanted to achieve is when the user is selecting the option to show User 1 - abc@email.com. then upon selected, the tag to show User 1.

I understand that multi-column combo box is able to achieve this but i need to be able to select multiple options. I also prefer to render the control via HTML way instead of using json data source

MultiColumnComboBox

MultiSelect

answered on 28 Jun 2022

1 answer

64 views

Add new Item containing \\ and \ ( paths)

I have a Grid, which has a column that uses a MultiSelect as an editor and also allows the user to add new items. This is all running off a remote data with crud etc

It's been 4 days to get it all working.. lost a bit of hair , but finally it all works! ( all the examples just were not applicable or when used together caused issues!)

It all looks good now, but I have got 1 more bit to sort and I'm struggling to keep going . Would really appreciate a little help.

The Multi Select is for selecting Shares / Paths. This is find if they are already defined in the database, but I cannot add them using the Add New approach.
e.g the user types \\Server\Share as a new item.. and then try's to add it... we end up with \ServerShare

The issue is what I am getting back from input.val

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    # var value = instance.input.val(); #
    # var id = instance.element[0].id; #
    <div>
        No data found. Do you want to add new item - '#= value #' ?
    </div>
    <br />
    <button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" onclick="addNew('#: id #', '#= value #')" ontouchend="addNew('#: id #', '#: value #')">Add new item</button>
</script>

I can't find a way to get a raw string of the instance.input.val();

Any ideas greatly appreciated,

Many thanks

MultiSelect

updated answer on 19 Jun 2022

1 answer

321 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

64 views

Multiselect wrong behaviour for clear icon-button

Hi team,

Seems that since release 2022 R1 SP2, I can see a weird behaviour clicking the clear button (cross) in multiselect. It opens the popup options list before clearing the values.

https://dojo.telerik.com/aGikiDam

Please advise.

Regards,

Laurent

MultiSelect

answered on 18 May 2022

0 answers

391 views

Height of multiselect varies when adding tags

Hi team,

I found that since 2022 R2, the height of a multiselect varies when adding tags. From 30px height with no values to 32px height with one or more tags.

https://dojo.telerik.com/UVUSaSIn

As a result, there is a nasty pumping effect in the page.

Please advise,

Best regards,

Laurent.

MultiSelect

asked on 13 May 2022

0 answers

151 views

Multiple Accessibility Issues with Kendo Controls after Update

We updated Kendo UI for JQuery from v2021.2.511 to v2022.1.325 and we observed that certain screen reader functions were broken.

The following issues were observed when screen reader is activated on any KendoMultiSelect control:

a. The selected item and tag are not being announced. The selected item and the tag were announced by narrator before the update.

b. The number of available suggestions is not announced. This was announced before the update.

c. When scan mode is activated, users cannot navigate the list items using the up/down arrow keys.

d. When a user enters a search string that is not in the datasource, narrator does not announce that. Before the update, narrator would announce "Selection contains zero items".

For other controls like checkboxes, narrator does not announce the name or label of the controls when in focus.

Is there a different attribute other than aria-label that we need defined on these controls to get screen readers to announce them?

I'd appreciate any help to get these issues fixed.

Thanks!

OS: Windows 11

Browser: Edge Chromium.

Kendo UI version: v2022.1.325

Screen Reader: Windows Narrator

Accessibility

MultiSelect