Custom Summary Item Template

[n/a]

We have a requirement to show

- the item that is selected if only one items is selected

- the first item + a summary item count if multiple items are selected

How can this be accomplished.   See examples below.

Example 1 item summary template:

State/Municipality
ARLN - AIMS PLATFORM 

 

Example multiple item summary template:

State/Municipality

ARLN - AIMS PLATFORM (+1 others) 

[n/a]

I see an online sample that may help me figure this out but none of the samples are working correctly in Angular 9.  Is there a beta or dev build available for Angular 9?

[Svet]

Hi John,

The summary-tag mode of the MultiSelect component allows to configure it as per the requirement. Please check the available configuration options at the following article:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/

About the specific use case scenario, it can be achieved following this example (from the referenced article above):

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/#toc-avoiding-line-breaks-after-a-number-of-selections

Here is an adapted example where the value of the MultiSelect will be put in summary tag mode only after selecting a second option:

https://stackblitz.com/edit/angular-dvca3a?file=app/app.component.ts

Last but not least, the MultiSelect component as well as all Kendo UI for Angular components are supported for Angular 9 as well. Please make sure that you are using the latest official package version of the DropDowns 4.2.6:

 https://www.telerik.com/kendo-angular-ui/components/dropdowns/changelog/

I hope the provided information helps. Please let me know in case additional details or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[n/a]

I am trying to combine this functionality with check boxes and am getting strange behavior.

See:  https://ihuror.run.stackblitz.io/

1.  The checkboxes and name clicks don't change selected state as expected.

2.  The initially selected item does not show up defaulting as expected on initial load.

 

[n/a]

I figured it out.  I needed the value change event

<kendo-textbox-container style="margin-right:15px;width: 300px;" floatingLabel="Partner">
  <kendo-multiselect kendoMultiSelectSummaryTag [tagMapper]="tagMapper" [data]="listItems"
                     [textField]="'text'"
                     [valueField]="'value'"
                     [allowCustom]="true"
                     (valueChange)="onSizeChange($event)"
                     [autoClose]="false" >
    <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
      <span *ngIf="dataItems.length > 1">
        {{ dataItems[0].text }} + {{ dataItems.length - 1 }} others
      </span>
      <span *ngIf="dataItems.length == 1">
        {{ dataItems[0].text }}
      </span>
    </ng-template>
    <ng-template kendoMultiSelectItemTemplate let-dataItem>
      <input type="checkbox" class="k-checkbox"
             [checked]="isItemSelected(dataItem.text)">
      <label class="k-checkbox-label">{{ dataItem.text }}</label>
    </ng-template>
  </kendo-multiselect>
</kendo-textbox-container>