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

Complex CellTemplate to expandable column

3 Answers 14 Views
TreeList (beta)
This is a migrated thread and some comments may be shown as answers.
Benedetta
Top achievements
Rank 1
Veteran
Iron
Benedetta asked on 10 Feb 2021, 04:19 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 12 Feb 2021, 08:37 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Benedetta
Top achievements
Rank 1
Veteran
Iron
answered on 09 Mar 2021, 08:20 AM

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

 

0
Svet
Telerik team
answered on 11 Mar 2021, 06:00 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeList (beta)
Asked by
Benedetta
Top achievements
Rank 1
Veteran
Iron
Answers by
Svet
Telerik team
Benedetta
Top achievements
Rank 1
Veteran
Iron
Share this question
or