feat(pinnedRowCellRenderer) add declarative pinned rowCellrenders

[mroseboom]

Hi, first of all awesome work on this aurelia-plugin!

I was wondering if it would be possible to add pinned rowcellrenders with declarative markup.

See below for usage example:

// create your cellRenderer as an Aurelia template
<ag-grid-aurelia style="width: 100%; height: 100%;" class="ag-fresh"
                 grid-options.bind="gridOptions">
  <ag-grid-column header-name="Mood" field="mood" width.bind="150" editable.bind="true">

    <ag-cell-template>
      <img width="20px" if.bind="params.value === 'Happy'" src="images/smiley.png"/>
      <img width="20px" if.bind="params.value !== 'Happy'" src="images/smiley-sad.png"/>
    </ag-cell-template>

    <ag-pinned-row-cell-template>
       <my-awesome-component></my-awesome-component>
    </ag-pinned-row-cell-template>

  </ag-grid-column>
</ag-grid-aurelia>

See Interfacing - Columns for the pinnedRowCellRenderer property.

[seanlandsman]

Hi

Thanks!

This isnt something I've worked on yet, but seems like a reasonable request - realistically though it wont be something I get to until the new year though, so if its an urgent requirement you may be better off trying to implement something yourself.

Otherwise I'll pick this up in the new year and document it too

thanks

[mroseboom]

Hi,

It's not urgent. For now i use the floating property on the rowNode object to check if it's a floating node or not. See example below:

<ag-grid-column header-name="Mood" field="mood" width.bind="150" editable.bind="true">
    <ag-cell-template>
      <span show.bind="params.node.floating">
        <img width="20px" if.bind="params.value === 'Happy'" src="images/smiley.png"/>
      </span>
      <span hide.bind="params.node.floating">
        <img width="20px" if.bind="params.value !== 'Happy'" src="images/smiley-sad.png"/>
      </span>
    </ag-cell-template>
</ag-grid-column>

[priyanka813]

Hi, I am also using declarative markup. How can I set column width to fit content ? And what should I do for implementing pagination with this example? `

    <ag-grid-aurelia #agGrid style="width: 100%; height: 450px;" class="ag-fresh" grid-options.bind="gridOptions" column-defs.bind="columnDefs"
        row-data.bind="rowData" row-height.bind="50">
        <ag-grid-column header-name="Name" field="name" width.bind="150"></ag-grid-column>
        <ag-grid-column header-name="Country" field="country" width.bind="150"></ag-grid-column>
    </ag-grid-aurelia>

`

[mroseboom]

@priyanka813 You can remove the 'width' property on a column definition, then the column shall have dynamic content. Furthermore you must call the method sizeColumnsToFit() after the grid is ready.

For pagination you should take a look at pagination documentation

[seanlandsman]

thanks @mroseboom

[priyanka813]

Thanks @mroseboom . I I referred pagination documentation and implement it. But, I am getting error : Inner Error: Message: Cannot read property 'setDatasource' of undefined Inner Error Stack: TypeError: Cannot read property 'setDatasource' of undefined

[seanlandsman]

@priyanka813 - please create new threads for new issues - additionally, please try use the free forum (https://ag-grid.com/forum) or StackOverflow for support/general queries. We try keep GitHub issues reserved for issues/bug with this component

To answer your question - it sounds like your gridOptions.api isnt ready yet. Only try refer to it once the gridReady event has been called. If this doesnt help we'll probably require a plunker or similar to help investigate further

[seanlandsman]

Hi,

Thanks for raising this. I've raised AG-778 our side to track this - you can view its progress on our pipeline page here: https://www.ag-grid.com/ag-grid-pipeline/

We'll update this thread with updates as soon as we have any.

thanks

[seanlandsman]

Hi @mroseboom - this has now been added and will be available in our next release