मैं वेबपैप पर काम कर रहा हूं जो सारणीबद्ध डेटा दिखाने के लिए सिंकफ्यूजन ग्रिड का उपयोग करता है। मेरी आवश्यकता में से एक कॉलम डेटा को लिंक के रूप में दिखाना है और जब उपयोगकर्ता उस पर क्लिक करता है तो फ़ंक्शन को कॉल करना है।

मैंने 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"

क्या कोई कृपया इस पर मेरी मदद कर सकता है?

0
programoholic 25 अक्टूबर 2018, 10:17

1 उत्तर

सबसे बढ़िया उत्तर

हमने ejGrid की ColumnTemplate सुविधा का उपयोग करके आपकी आवश्यकता प्राप्त कर ली है। कृपया नीचे दिए गए कोड उदाहरण देखें।

// 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.
    }
}

डेमो नमूना देखें यहां

अपने संदर्भ के लिए हमारी सहायता दस्तावेज देखें।

1
Gabriel M 29 अक्टूबर 2018, 10:29