How do I hide "Empty" results in Angular 2 Kendo UI Sortable?

Question

I am using Angular 2 Kendo UI Sortable in my app to display some dynamically-generated lists of values. Sometimes, the list is empty. Kendo insists on displaying a big ugly "Empty", and I can't understand how to get rid of it.

                     <kendo-sortable [navigatable]="true" [data]="newTree | treeBuilder:item.id">
                      <ul>
                        <ng-template *ngIf="item" let-item="item"> // Nope this doesn't work.
                          <li>
                            <div class="child-2">{{item}}</div>
                          </li>
                        </ng-template>
                      </ul>
                    </kendo-sortable>

Answer 1

OK, it is actually mentioned in the docs . There are 3 relevant attributes:

emptyItemClass

Defines the class which is applied to the empty item when the Sortable has empty data.

emptyItemStyle

Defines the CSS styles applied to an empty item.

emptyText

Sets the text message that will be displayed when the Sortable has no items.

Setting the empty text to "" simply makes it default to "Empty" again. So the solution I found is to use the emptyItemStyle attribute and specify display:none , and that's finally got rid of it. Phew.

Stupid feature. Why not just leave it up to users to specify their own custom content if they need it using template conditionals?...

Answer 2

假设item是一个Array ，请尝试*ngIf="item.length > 0"

Answer 3

You can use like this:

...
<kendo-sortable [navigatable]="true" [data]="newTree | treeBuilder:item.id" [emptyText]="''">
</kendo-sortable>
...

with

[emptyText]="''"

you can custom your message for empty result or put it empty like me, it will not show empty again.