Different class for each item

[Iuliana Maria]

Hello! 

I need to style some sortable items using the bootstrap grid system. If I set the itemClass to col-6 to all of them, everything works nice. I attached two pictures, one with the code and one with the result of this case.

But, I want some groups to be large and some small. (so depending on an item property, to have col-6 or col-12). If I set the col-{{group.size}} class to a div inside the template, bootstrap grid does not work correctly anymore.

Is it possible to achieve this behavior in some way?

[Martin Bechev]

Hi Iuliana Maria,

Thank you for the provided screenshots.

itemClass option applies the same CSS class on every element in the Sortable Component. The root of the issue is caused by Bootstrap, that applies the proper style (.col-sm in the code snippet below) for each child element of a parent element with class 'row'. Check this article from the Bootstrap documentation:
https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

However, the only way to set custom CSS styles for the items of a Kendo UI for Angular Sortable component is by using <ng-template> directive. But then the generated DOM structure is modified. Between the <div> with class 'row' and the element with specific size (for example 'col-6'), is rendered another <div>. This breaks the Bootstrap logic and doesn't apply the expected Bootstrap styles. Check the screenshot (example.png)

In order to achieve the desired behavior, I have prepared the following example:
https://stackblitz.com/edit/angular-k6eu18?file=app/app.component.ts

The first style is attached to 'itemClass' which is applied to all Sortable items:

div.item {
  display:inline-block;
  width: auto;
}

We can add any desired custom class (like the .custom-small class below) to any HTML element using the following common angular approach:

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <h6>Items: {{items | json}}</h6>
    </div>
    <div class="container-fluid">
        <kendo-sortable
            [kendoSortableBinding]="items"
            [navigatable]="true"
            [animation] = "true"
            class="row"
            itemClass="item"
            activeItemClass="item active"
        >
          <ng-template let-item="item" let-index="index">
                <div [class.custom-small]="index%2">
                  {{item}}
              </div>
            </ng-template>
        </kendo-sortable>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  styles: [`
   div.item {
     display:inline-block;
     width: auto;
   }

   div.item div.custom-small{
     width:100px;
     border: 1px solid pink;
   }
  `]
})

I hope this points you in the right direction of achieving the desired custom design. Do let me know if I am missing something or any further assistance is required for this case.

Regards,
Martin
Progress Telerik

[Iuliana Maria]

Hi Martin,

Thanks for your reply! I have a complex object as item and already applied custom style inside the ng-template, just this is the problem, that I cannot build the correct boostrap logic structure, as you also said. The solution you provided still does not apply a different boostrap class on the item. But, if there is no possibility to do it, then I will use my custom classes inside the template and set the witdh inside, as in your example.

 

Thank you,

Iuliana 

[Martin Bechev]

Hi Iuliana,

I understand that using bootstrap to style the items causes an inconvenience in this use case. But I am afraid that because of our specific rendering of the HTML elements and the structure that Bootstrap requires, using directly its classes, is not applicable in this case. Indeed, the way to achieve the desired look is by using custom styles as you already applied in the <ng-template>. 

Let me know if any further assistance is required for Kendo UI for Angular.

Regards,
Martin
Progress Telerik

[Iuliana Maria]

Ok Martin, I understand! Thank you!