[RESOLVED]
Hello,
I have integrated kendo grid with some details-grid using the KendoGridDetailTemplate.
Everything works great, but I can't find a way of hiding the [+] sign when there is nothing to show in the details component.
I am already using the [KendoGridDetailTemplateShowIf]="ShowDetailsCondition" but the problem i'm facing is that when the directive is called, I don't have access to the methods in my component, since "this" changes and represents the directive itself.
<ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition">
<app-cash-register-main-cash-register-action-form-details
[invoiceHeaders]="invoiceHeaders"
[quoteHeaders]="quoteHeaders"
[shipmentHeaders]="shipmentHeaders"
[subscriptionHeaders]="subscriptionHeaders"
[orderHeaders]="orderHeaders"
[creditNoteHeaders]="creditNoteHeaders"
[document]="dataItem">
</app-cash-register-main-cash-register-action-form-details>
</ng-template>
hasHeaders(dataItem): boolean {
console.log(dataItem);
let document = dataItem;
const type = document.SourceEntity;
const id = document.EntityId;
let documentFound = [];
switch (type) {
case 'InvoiceHeader':
console.log('InvoiceHeader');
const InvoiceHeader = this.invoiceHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(InvoiceHeader, type));
documentFound.push(...this.findParentDocumentFromLines(InvoiceHeader?.Lines, type));
break;
case 'QuoteHeader':
console.log('QuoteHeader');
const selectedQuoteHeader = this.quoteHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedQuoteHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedQuoteHeader?.Lines, type));
break;
case 'SubscriptionHeader':
console.log('SubscriptionHeader');
const selectedSubscription = this.subscriptionHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedSubscription, type));
documentFound.push(...this.findParentDocumentFromLines(selectedSubscription?.Lines, type));
break;
case 'OrderHeader':
console.log('OrderHeader');
const selectedOrderHeader = this.orderHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedOrderHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedOrderHeader?.Lines, type));
break;
case 'CreditNoteHeader':
console.log('CreditNoteHeader');
const selectedCreditNoteHeader = this.creditNoteHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedCreditNoteHeader, type));
documentFound.push(...this.findParentDocumentFromLines(selectedCreditNoteHeader?.Lines, type));
break;
case 'ShipmentHeader':
console.log('ShipmentHeader');
const selectedShipmentHeader = this.shipmentHeaders.find(q => q.Id == id);
documentFound.push(...this.findParentDocumentFromHeader(selectedShipmentHeader, type));
break;
}
if (documentFound.length > 0) {
return true;
}
return false;
}
here is my condition function:
public showDetailsCondition(dataItem: MovementDocumentCustomer): boolean {
console.log(dataItem);
return (
(dataItem.SourceEntity === 'InvoiceHeader' ||
dataItem.SourceEntity === 'ShipmentHeader' ||
dataItem.SourceEntity === 'OrderHeader') &&
this.hasHeaders(dataItem)
);
}
error : "this.hasHeaders is not a function" => I guess it's because "this" represent now the Directive and not my component
How could I use custom methods/function from my component into my condition function without have it returning an error ?
Thanks you!
Audric