Syncfusion Grid: невозможно отобразить данные столбца как ссылку - PullRequest
Новая
       34

Syncfusion Grid: невозможно отобразить данные столбца как ссылку

0 голосов
/ 25 октября 2018

Я работаю над Webapp, который использует сетку Syncfusion для отображения табличных данных.Одно из моих требований - показывать данные столбца в виде ссылки и вызывать функцию, когда пользователь нажимает на нее.

Я ознакомился с руководством, предоставленным syncfusion на официальном сайте Syncfusion

следующим образом я пытаюсь выполнить требование, указанное в документах: 

 <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right">
            <ng-template e-template let-data>
                    <div>
                        <a style="padding-left:5px !important;"> {{data.OrderID}} </a>
                    </div>
                </ng-template>

Но пока безуспешно.Вот мой пакет. Json 

"@angular/common": "~5.1.2",
"@angular/compiler": "~5.1.2",
"@angular/core": "~5.1.2",
"@angular/forms": "~5.1.2",
"@angular/http": "~5.1.2",
"@angular/platform-browser": "~5.1.2",
"@angular/platform-browser-dynamic": "~5.1.2",
"@angular/router": "~5.1.2",
"core-js": "^2.4.1",
"rxjs": "^5.4.3",
"zone.js": "^0.7.4",
"bootstrap": "^3.3.6",
"jquery": "~3.2.1",
"jsrender": "~0.9.84",
"syncfusion-javascript": "^15.4.17",
"ej-angular2": "^15.4.18"

Кто-нибудь может мне помочь с этим?

1 Ответ

0 голосов
/ 29 октября 2018

Мы выполнили ваше требование, используя функцию ColumnTemplate в ejGrid.см. приведенный ниже пример кода. 

// HTML File

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData">
    <e-columns>
        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right">
            <ng-template e-template let-data> 
                <div *ngIf="data.OrderID"> 
                    <a style="padding-left:5px !important;" (click)="clicked($event)">Click</a> 
                </div> 
                </ng-template>
        </e-column>
        ……..
    </e-columns>
</ej-grid>

// Ts File

export class GridComponent {
    public gridData: any;
    constructor() {
    ……………
    }
    clicked(e:any){
        alert("link column clicked"); // Do your stuff here.
    }
}

См. демонстрационный пример здесь

Для справки см. нашу справочную документацию

...