Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Paolo Ponzano
35
Open a dialog from the Grid toolbar that's defined in another component
posted

Hello,

I've a grid defined as

<igx-grid [data]="Items"  height="400px" primaryKey="id" [allowFiltering]="true" [rowEditable]="true">
  <igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
      <igx-grid-toolbar>

        <button igxButton="flat" (click)="addItem()" class="addProdBtn"><igx-icon>add</igx-icon> Aggiungi</button>

      </igx-grid-toolbar>
      <igx-grid-toolbar>

        <button igxButton="flat" (click)="refresh()" class="addProdBtn"><igx-icon>add</igx-icon>Carica</button>

      </igx-grid-toolbar>
      <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
      <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
      <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
      <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>

  </igx-grid-toolbar>
  <igx-column field="id" [hidden]="true" dataType="string"></igx-column>
  <igx-column field="tipo" header="Tipo" dataType="string"></igx-column>
  <igx-column field="descrizione" header="Descrizione" dataType="string"></igx-column>
  <igx-column [width]="'100px'">
    <ng-template igxCell let-cell="cell">
      <button igxButton="icon" (click)="editItem(cell.row.data)">
        <igx-icon>edit</igx-icon>
      </button>
      <button igxButton="icon" (click)="deleteItem(cell.row.data)">
        <igx-icon>delete</igx-icon>
      </button>
    </ng-template>
  </igx-column>
</igx-grid>


I wish at Add button click to open a dialog, but since it can be quite huge , I wish to have it separated from  the grid HTML.

The main reason is that having such code

<igx-dialog #dialogAdd title="Nuovo Tipo Oggetto" [rightButtonLabel]="'Inserisci'" [leftButtonLabel]="'Cancella'" (leftButtonSelect)="cancel()" (rightButtonSelect)="addRow()">
  <div class="dialogNewRecord">
    <app-tipi-oggetto-insert ></app-tipi-oggetto-insert>
  </div>
</igx-dialog>

shows me correctly the form, but I'm not able to disable the igx-dialog ok button if the validation fails... 

Otherwise if I put inside the app-tipi-oggetto-insert also the <igx-dialog>...</> I don't know how to show it from the HTML view

Any suggestions?
Thanks



Parents
No Data
Reply
  • 2660
    Offline posted

    Hello Paolo,

    Thank you for reaching out!

    I have been looking into your question and the provided code-snippet and from what I understand, your requirement is to add a button in the IgxGrid toolbar that opens a dialog. This dialog would contain another component, which performs some validation. This logic should be bound to the dialog’s “OK” button disabled state. Please, provide more details in case my understanding is not correct.

    From your snippet, I can see that there is a nested IgxGridToolbar inside the IgxGridToolbarActions component of the parent toolbar. I am wondering what the purpose of such setup might be, as it seems redundant. My suggestion is to place the buttons with class "addProdBtn" directly within the <igx-grid-toolbar-actions> tags.

    To address your question about disabling the dialog “OK” button based on the nested component’s validation logic, I have prepared this small sample demonstrating how this can be achieved with the help of an Output emitter from the child component. My suggestion is to leverage the igxDialogActions directive or the igx-dialog-actions selector to add a custom “OK” button to the dialog and bind its disabled property to the value emitted from the child component. Please, test this behavior in the sample by toggling the validity state of the switch control in the dialog.

    About your other requirement to add button click to open the dialog, I am not quite sure if I understand what you are referring to that “can be quite huge” and whether you mean that the dialog’s markup should be separate from the grid’s. Please, refer to the sample, where it is demonstrated how the dialog is opened by clicking on a button within the grid toolbar.

        <igx-grid-toolbar>
      <igx-grid-toolbar-actions>
          <button (click)="dialog.open()" igxButton="raised">
            Open Dialog
          </button>
      </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
     

    If this is not an accurate demonstration of what you are trying to achieve, please, feel free to elaborate further. You could also attach screenshots to demonstrate the ideas. Thank you for your cooperation.

    Best regards,
    Bozhidara Pachilova
    Associate Software Developer

Children
No Data