Hi,

I have a MultiSelect which has default values set. User should not deselect these default values. itemDisabled only disables the items in the selection list but not tag list. removeTag event can be used to prevent tag item from being removed. But the default tag items still showing as normal tags, just nothing happens when clicking it. This is confusing users. Is there any way I can set a tag item to "disabled" so user can tell it's not clickable from UI directly. Or other suggestions?

Thanks in advance,

Randy

Hi!

Our company is considering to buy a license for Angular UI. At the moment we are testing functionality that is provided by angular components. I've been trying to implement virtual scroll with data load on scroll end, but I didn't find any event for it.  What I want to achieve is a functionality that loads more data to dropdown when user scrolls to the end of list. Is it possible with kendo MultiSelect/MultiColumnComboBox? Here is an example of what I mean. 

Thank you!

Hi

We are using kendo-multiselect in our application. When an item is selected from the dropdown list, it is not appearing in the input field ( please see the attached image)

Inspecting the elements in the console indicates kendo-taglist is not being populated. What can cause this?

The valueChange even is emitted. and we are able to capture the chaned value. But the problem is, we cannot see what is being selected as the input field of the dropdown is empty.

 onValueChange(selectedData: any, programmatic: boolean = true ) {

....

}

trace:

1. (3) [{…}, {…}, {…}]
1. 0: {name: 'Benny F Summry - M', id: 12345}
2. 1: {name: 'Maryanne Summry - Wife', id: 223344, disabled: false}
3. 2: {name: 'Talia J Summry - Daughter', id: 33445566, disabled: false}
4. length: 3
5. [[Prototype]]: Array(0)

Any insight on this is greatly appreciated.

Thanks,

Jyothi

Hi,

I took an example from kendo website (from stackblitz) and tried it. 

Overview - MultiSelect - Kendo UI for Angular (telerik.com)

For some reason

1. The dropdown input box  is very small. Not able to adjust the size.

2. Upon selection, the selected item is appearing above the dropdonText Box.

Here is the html, pretty much from the website

I am new to Kendo UI because of client requirement. I have faced problem during binding multi column combobox at first place the combobox loads very slow so I applied virtual property to combobox then it does not bind the last column with data

here is my ts code

exportclass CreateEsubsidyComponent extends BaseComponent implements OnInit, OnDestroy {
   /**
    * Define the Globals Variables
    */virtual: any = {
    itemHeight: 50,
    pageSize: 100// @progress/kendo-theme-default default item height
  };
}

 <kendo-multicolumncombobox [data]="esubsidyGeneralInputVariables.positiveListData"
                                        id="fundingObject" [listHeight]="300" [textField]="'herstellerbezeichnung'"
                                        [valueField]="'id'" formControlName="fundingObject"
                                        [virtual]="virtual"
                                        [popupSettings]="{
                                          width: '800px'
                                        }"
                                        (opened)="onMouseOverDescription()"
                                        (selectionChange)="selectFundingObject($event)" class="pop-reg-text"
                                        [filterable]="true" (filterChange)="handleMultiComboFilterChange($event)">

                                        <kendo-combobox-column [field]="'id'" [title]="'Id'" [width]="200"
                                            media="(min-width: 740px)">
                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'hersteller'" [title]="'Hersteller'"
                                            [width]="200" >
                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'herstellerbezeichnung'"
                                            [title]="'Herstellerbezeichnung'" [width]="200" media="(min-width: 500px)">

                                        </kendo-combobox-column>
                                        <kendo-combobox-column [field]="'typenbezeichnung'" [title]="'Typenbezeichnung'"
                                            [width]="200" media="(min-width: 565px)">
                                        </kendo-combobox-column>

                                    </kendo-multicolumncombobox>
                                </div>

Dear forum/support,

I'm trying to figure out how to deselect the last item that was selected in my filtered autocomplete list.

To more easily explain the situation I'm facing I edited the example Stackblitz and captured a small video of the issue.

Stackblitz: https://stackblitz.com/edit/angular-9eoskl?file=app%2Fapp.component.ts

You can find the video attached as a ZIP as I couldn't upload the mp4.

The video shows how I auto-select "Volleyball" from the autocomplete values after typing 'volley'. When I type 'ball' I need to have the internal state which item was selected last to be reset inbetween so that I can hit 'Enter' to select 'Baseball'. But instead 'Volleyball' is still selected and pressing 'Enter' will deselect it.

I was hoping that the new focusItemAt method would allow me to do such a thing by calling focusItemAt(null) in an event handler that listens on the autocomplete's 'closed' event. However the focusItemAt method does not really do what I was expecting (still don't know what it really does).

Best regards

Philip

My current angular project uses latest angular version with some kendo grids. We have a requirement where I need to have a kendo grid and use kendo multiselects for two of the columns -State, County. So while adding/editing data in the grid, user should be able to select multiple states and the county column should filter the data based on the selected states. I'm not sure how to achieve this.

I've added some basic code as below. State column works fine and lets me pick multiple states. I'm unable to properly filter the County column data based on selected states and bind the data.

My html code:

<kendo-grid style="height:600px" [kendoGridBinding]="statesData">

<kendo-grid-column field="capital" title="Capital City" width="140"></kendo-grid-column>                

<kendo-grid-column field="stateName" title="State" width="140" id="stateColumn"> 

<ng-template kendoGridCellTemplate >

<kendo-multiselect [data]="statesData" textField="stateName" valueField="stateId"  (valueChange)="onStateChange($event)">

</kendo-multiselect>

</ng-template>

</kendo-grid-column>

<kendo-grid-column field="countyName" title="County" width="140" id="countyColumn">

<ng-template kendoGridCellTemplate >

<kendo-multiselect [data]="countiesData" textField="countyName"    valueField="countyId">                          

</kendo-multiselect>

</ng-template>

</kendo-grid-column>                

</kendo-grid>

TS code:

public statesData: IState[] = states;

public countiesData: ICounty[] = counties;         

public onStateChange(values) {         

  const selStateIds = values.map(s => s.stateId);        

  const selectedCounties = this.countiesData.filter( c => selStateIds.includes( c.stateId ) );

  this.countiesData = selectedCounties;

}

My states data:

export const states: IState[] =

[

{

stateId: 1,

        stateName: "Delaware",

        capital: "DelCaptital"

},

{

stateId: 2,

        stateName: "New York",

        capital: "NY Captital"

},

{

stateId: 3,

        stateName: "New Jersey",

        capital: "NJ Captital"

}, 

    {

stateId: 4,

        stateName: "Virginia",

        capital: "VA Captital"

},      

];

County Data:

export const counties: ICounty[] = [

{

              countyId: 1,

stateId: 1,

              countyName: "Delaware County 1"     

},

{

            countyId: 2,

stateId: 1,

            countyName: "Delaware County 2"  

},

{

              countyId: 3,

stateId: 1,

              countyName: "Delaware County 3"  

}, 

           {

              countyId: 4,

stateId: 4,

              countyName: "VA County 1" 

},

          {

              countyId: 5,

stateId: 4,

              countyName: "VA County 2" 

},

      {

              countyId: 6,

stateId: 4,

              countyName: "VA County 3" 

},

];

Thank you.

Neelima