This is a migrated thread and some comments may be shown as answers.

Different class for each item

4 Answers 854 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Iuliana Maria
Top achievements
Rank 1
Iron
Iuliana Maria asked on 12 Apr 2019, 08:49 AM

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?

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 15 Apr 2019, 03:06 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Iuliana Maria
Top achievements
Rank 1
Iron
answered on 17 Apr 2019, 09:54 AM

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 

0
Martin
Telerik team
answered on 19 Apr 2019, 07:41 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Iuliana Maria
Top achievements
Rank 1
Iron
answered on 19 Apr 2019, 07:57 AM
Ok Martin, I understand! Thank you!
Tags
Sortable
Asked by
Iuliana Maria
Top achievements
Rank 1
Iron
Answers by
Martin
Telerik team
Iuliana Maria
Top achievements
Rank 1
Iron
Share this question
or