0.8.15 Changelog


Breaking Changes

0 Changes

Bugs

3 Bug Fixes

Released

April 13, 2017

Sketch template

Light Theme

Highlights

  • Updates to the Datagrid Selection Behavior

    Datagrid selection is now preserved when:

    • The user navigates to a different page in the datagrid
    • The data is updated, provided the smart iterator is used in the datagrid
  • Expandable rows for Datagrid

    This feature can be used when a Datagrid row has additional data or details that can be shown when interacting with the row. It supports many options, including:

    • Overall details for the row
    • Per-cell details
    • Replacing the original row rather than expand under it
    • Lazy-loading of details

    Here is an example of how to make a row expandable:

    
    <clr-dg-row *clrDgItems="let user of users">
        <clr-dg-cell>{{user.id}}</clr-dg-cell>
        <clr-dg-cell>{{user.name}}</clr-dg-cell>
    
        <clr-dg-row-detail *clrIfExpanded>
            This user likes ducks.
        </clr-dg-row-detail>
    </clr-dg-row>

    If you include the same amount of <clr-dg-cell> elements in the row details as anywhere else in the datagrid, they will properly align as a way to display details for each cell individually. Details are only instantiated when the row becomes expanded, so they are naturally lazy loaded: just make any AJAX call you need in the constructor or ngOnInit() of the component you put inside the *clrIfExpanded structural directive. To notify us that you want a spinner to be displayed while lazy loading, just include a [clrLoading]="myLoadingBoolean" anywhere inside the details or even the row itself. As long as myLoadingBoolean is true, a spinner will be displayed.

Bug Fixes

  • Fixed the click event listener for buttons inside of a button group.
  • Fixed animation to value 0 in progress bars in webkit.
  • Separators for clr-dg-column components have been correctly positioned.