1

I have been playing now for some time with the kendo-ui angular components and I have created this plunker:

http://plnkr.co/edit/zrr3nlxQl7uxbdtH4oEA?p=preview

For setting the width of the detail row I have implemented css:

.detailRow{
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100px;
  white-space: normal;
}

And the html:

    <template kendoDetailTemplate let-dataItem>
      <section *ngIf="dataItem.Category">
        <article ><div class='detailRow'>{{dataItem.Category?.Description}}</div></article>
      </section>
    </template>

  1. Is this the way to control the detailrow width?

  2. Is it possible to render html in the detailrow (show bold and italic)?

  3. Is it possible to auto-expand every single row on loading?

Sagar
  • 470
  • 1
  • 6
  • 13
Maniac_1979
  • 879
  • 3
  • 10
  • 26

1 Answers1

2
  1. Yes, using width on the detail row content is fine for controlling its width.
  2. If the Category.Description field contains HTML, you may need to bind it using the innerHTML binding, as shown in this thread. Be sure to sanitize the HTML, or XSS attacks may follow.
  3. There is no provided way for controlling all detail rows at this time. This has been logged and can be tracked in the feature request in the kendo-angular2 repo.
Community
  • 1
  • 1
Alex Gyoshev
  • 11,929
  • 4
  • 44
  • 74