kendoGridDetailTemplate only show the [+] signe when there is something to show

[Audric]

[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 

[Audric]

NeverMind, I found the solution, I just bind(this) to the condition function, and now I'm able to call methods/functions inside the condition function. 

from that : 

<ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition">

to that :

<ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showDetailsCondition.bind(this)">