Complex CellTemplate to expandable column

[ICT]

Hi,

I'm trying to apply a cell template to the expandable column but the expand icon NOT remains aligned with the cell content (see attachment).

I need to create a complex decoration templates and i need to nest a div or something i can decorate with border color and background color and perform some ngIf.

I could reproduce the problem here:

https://stackblitz.com/edit/angular-ysa33j

How can i do?

Thanks again,

B

 

[Svet]

Hi Benedetta,

Thank you for the provided details.

In general the div is a block element. That is why it is placed on the bottom of the expand arrow. What could be done to place it next to the expand arrow is to set its display style to inline:

      <kendo-treelist-column
        [expandable]="true"
        field="id"
        title="ID"
        [width]="100"
      >
        <ng-template
          kendoTreeListCellTemplate
          let-dataItem
          let-rowIndex="rowIndex"
        >
          <div style="display: inline">
            Row: {{ rowIndex }} /
            <strong>{{ dataItem.name }}</strong>
          </div>
        </ng-template>
      </kendo-treelist-column>

Indeed the kendoTreeListCellTemplate shouldn't affect the default appearance and functionality of the expand/collapse arrow.

Please let me know in case any further information is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[ICT]

Hi Svetlin,
Thanks for your help, unfortunately my template is a lot more complex.

Cos i have to implement complex decorations.

  <div
            class="sedapta-grid-cell"
            [ngStyle]="
              dataItem['cellStyles'] && dataItem['cellStyles'][column.field]
            "
            title="{{ dataItem[column.field] }}"
          >
            <div class="sedapta-grid-value" *ngIf="column.editor !== 'boolean'">
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isLeft &&
                  !dataItem['icon'][column.field].url
                "
                class="{{ dataItem['icon'][column.field].iconClass }} cell-icon"
                [ngStyle]="dataItem['icon'][column.field]"
              ></div>
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isLeft &&
                  dataItem['icon'][column.field].url
                "
                class="img-container"
              >
                <img
                  width="25"
                  height="25"
                  [src]="dataItem['icon'][column.field].url"
                />
              </div>
              <div
                class="sedapta-grid-value-label"
                [ngClass]="{
                  'sedapta-grid-value-label-icon':
                    dataItem['icon'] &&
                    dataItem['icon'][column.field] &&
                    dataItem['icon'][column.field].iconClass
                }"
                [ngStyle]="
                  dataItem['textStyles'] && dataItem['textStyles'][column.field]
                "
              >
                <div class="sedapta-grid-value-label-innner">
                  {{ dataItem | sedaptaCoreCellPipe: column }}
                </div>
              </div>
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isCenter &&
                  !dataItem['icon'][column.field].url
                "
                class="{{
                  dataItem['icon'][column.field].iconClass
                }} cell-icon-wide"
                [ngStyle]="dataItem['icon'][column.field]"
              ></div>
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isCenter &&
                  dataItem['icon'][column.field].url
                "
                class="img-container img-container-wide"
              >
                <img
                  width="25"
                  height="25"
                  [src]="dataItem['icon'][column.field].url"
                />
              </div>
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isRight &&
                  !dataItem['icon'][column.field].url
                "
                class="{{ dataItem['icon'][column.field].iconClass }} cell-icon"
                [ngStyle]="dataItem['icon'][column.field]"
              ></div>
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].isRight &&
                  dataItem['icon'][column.field].url
                "
                class="img-container"
              >
                <img
                  width="25"
                  height="25"
                  [src]="dataItem['icon'][column.field].url"
                />
              </div>
            </div>
            <div
              style="width: 100%; text-align: center"
              *ngIf="column.editor === 'boolean'"
            >
              <div
                *ngIf="
                  dataItem['icon'] &&
                  dataItem['icon'][column.field] &&
                  dataItem['icon'][column.field].iconClass
                "
                class="{{
                  dataItem['icon'][column.field].iconClass
                }} cell-icon sedapta-text-centered fillWidth"
                [ngStyle]="dataItem['icon'][column.field]"
              ></div>
              <span
                class="k-icon k-i-checkbox chk-icon"
                (click)="
                  gridEditService.checkClick(
                    columnIndex,
                    rowIndex,
                    dataItem[column.field]
                  )
                "
                *ngIf="
                  !dataItem[column.field] &&
                  (!dataItem['icon'] ||
                    !dataItem['icon'][column.field] ||
                    !dataItem['icon'][column.field].iconClass)
                "
              ></span>
              <span
                class="k-icon k-i-checkbox-checked chk-icon"
                (click)="
                  gridEditService.checkClick(
                    columnIndex,
                    rowIndex,
                    dataItem[column.field]
                  )
                "
                *ngIf="
                  dataItem[column.field] &&
                  (!dataItem['icon'] ||
                    !dataItem['icon'][column.field] ||
                    !dataItem['icon'][column.field].iconClass)
                "
              ></span>
            </div>
            <div
              *ngIf="dataItem.editable && dataItem.editable[column.field]"
              class="editable-placeholder"
            ></div>
          </div>

I'll probably have to play around with CSS a bit.
Thanks

 

[Svet]

Hi Benedetta ,

I see how the requirement gets more complicated. Since a template is used, the full control over the used content is in the hands of the developer. Indeed some custom CSS and HTML modifications seem required for this case.

Regards,
Svetlin
Progress Telerik